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" />

File multiple prop

<.file_field multiple />

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 />