Certain props are shared across all form-related components, and you can find them in the form wrapper.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.
File component
The
file_field
component allows users to upload files in a traditional way. However, by adding the
dropzone
option, you can enable a drag-and-drop feature for a more intuitive file upload experience. With the
dropzone
, users can simply drag files into the designated area, making the process faster and easier. This combination offers flexibility by supporting both standard file selection and the convenience of drag-and-drop functionality.
<.file_field color="danger" /> <.file_field color="warning" /> <.file_field color="success" /> <.file_field color="primary" /> <.file_field color="secondary" /> <.file_field color="info" /> <.file_field color="misc" /> <.file_field color="dawn" /> <.file_field color="light" /> <.file_field color="dark" />
Dropzone
The
file
component enables users to upload files either through a standard input field or by using a drag-and-drop interface, known as a
dropzone
. This
dropzone
feature allows users to easily drag files into a designated area, making the upload process more intuitive. The component supports various file types and sizes, enhancing flexibility. With the combination of traditional file input and the
dropzone
, it offers a seamless and user-friendly file upload experience.
<.file_field dropzone /> <.file_field target={:avatar} uploads={@uploads} dropzone />
Dropzone type
The
file
component enables users to upload files either through a standard input field or by using a drag-and-drop interface, known as a
dropzone
. This
dropzone
feature allows users to easily drag files into a designated area, making the upload process more intuitive. The component supports various file types and sizes, enhancing flexibility. With the combination of traditional file input and the
dropzone
, it offers a seamless and user-friendly file upload experience.
<!--Default is type file--> <.file_field dropzone dropzone_type="file" /> <.file_field dropzone dropzone_type="image" />
Dropzone title and icon and description
The
dropzone
component provides a convenient and customizable area for file uploads, allowing users to add unique icons, titles, and descriptions. By setting the
dropzone_icon
attribute, you can specify any Heroicon icon to replace the default cloud upload symbol, giving it a personal touch or matching the application's theme. The
dropzone_title
attribute offers a clear prompt, such as “Click to upload, or drag and drop a file,” helping users understand how to interact with the component. Additionally, the
dropzone_description
attribute allows for an optional description, which can specify file size limits, accepted file types, or other upload requirements. This added customization helps users upload files confidently by making the process intuitive and guided.
<.file_field dropzone dropzone_type="image" dropzone_icon="hero-upload" dropzone_title="Upload your documents here" dropzone_description="Supports PDF files up to 10MB" />
Dropzone variant and colors
The
dropzone
component comes with three visual variants: outline, shadow, and default. The
outline
variant provides a clean border around the dropzone, making it stand out while keeping a minimal look. The
shadow
variant adds a subtle box-shadow, giving the dropzone a more prominent, elevated appearance. The
default
variant offers a balanced and simple look without additional borders or shadows. These variants can be further customized with various color options, including
primary
,
secondary
,
dark
,
success
, and more, allowing you to tailor the appearance to your design needs.
<.file_field color="white" variant="outline" dropzone /> <.file_field color="primary" variant="outline" dropzone /> <.file_field color="secondary" variant="outline" dropzone /> <.file_field color="dark" variant="outline" dropzone /> <.file_field color="success" variant="outline" dropzone /> <.file_field color="warning" variant="outline" dropzone /> <.file_field color="danger" variant="outline" dropzone /> <.file_field color="info" variant="outline" dropzone /> <.file_field color="light" variant="outline" dropzone /> <.file_field color="misc" variant="outline" dropzone /> <.file_field color="dawn" variant="outline" dropzone /> <.file_field color="white" variant="default" dropzone /> <.file_field color="primary" variant="default" dropzone /> <.file_field color="secondary" variant="default" dropzone /> <.file_field color="dark" variant="default" dropzone /> <.file_field color="success" variant="default" dropzone /> <.file_field color="warning" variant="default" dropzone /> <.file_field color="danger" variant="default" dropzone /> <.file_field color="info" variant="default" dropzone /> <.file_field color="light" variant="default" dropzone /> <.file_field color="misc" variant="default" dropzone /> <.file_field color="dawn" variant="default" dropzone /> <.file_field color="white" variant="shadow" dropzone /> <.file_field color="primary" variant="shadow" dropzone /> <.file_field color="secondary" variant="shadow" dropzone /> <.file_field color="dark" variant="shadow" dropzone /> <.file_field color="success" variant="shadow" dropzone /> <.file_field color="warning" variant="shadow" dropzone /> <.file_field color="danger" variant="shadow" dropzone /> <.file_field color="info" variant="shadow" dropzone /> <.file_field color="light" variant="shadow" dropzone /> <.file_field color="misc" variant="shadow" dropzone /> <.file_field color="dawn" variant="shadow" dropzone />