Dropzone
Single File Upload

The "Dropzone" component provides an easy way to implement file upload functionality in your web application. This example demonstrates how to create a "Dropzone" for single file uploads, with options for setting file upload constraints and additional headers.

Example code / preview
Drop files here or click to upload.
This is just a demo dropzone. Selected files are not actually uploaded.
            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                        Drop files here or click to upload.
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                                        This is just a demo dropzone. Selected files are
                                                        HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                                        uploaded.
                                                    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
            
        

The "Dropzone" component simplifies the implementation of single file uploads in your web application. You can configure various options such as the upload URL, maximum file size, and headers to meet your specific needs. In this example, a "Dropzone" for single file uploads is created, with an informative user interface. However, it's important to note that the selected files are not actually uploaded to a server in this demo. Customize the "Dropzone" component as required to enable real file uploads and enhance the file handling capabilities of your web application.

Multiple File Upload

The "Dropzone" component provides an easy way to implement file upload functionality in your web application. This example demonstrates how to create a "Dropzone" for multiple file uploads, with options for setting file upload constraints and additional headers.

Example code / preview
Drop files here or click to upload.
This is just a demo dropzone. Selected files are not actually uploaded.
            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                        Drop files here or click to upload.
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                                        This is just a demo dropzone. Selected files are
                                                        HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                                        uploaded.
                                                    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
            
        

The "Dropzone" component simplifies the implementation of multiple file uploads in your web application. You can configure various options such as the upload URL, maximum file size, and headers to meet your specific needs. In this example, a "Dropzone" for multiple file uploads is created, with an informative user interface. However, it's important to note that the selected files are not actually uploaded to a server in this demo. Customize the "Dropzone" component as required to enable real file uploads and enhance the file handling capabilities of your web application.

File Type Validation

The "Dropzone" component allows you to implement file upload functionality in your web application with the ability to validate file types before uploading. This example demonstrates how to create a "Dropzone" with file type validation using accepted file formats.

Example code / preview
Drop files here or click to upload.
This is just a demo dropzone. Selected files are not actually uploaded.
            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                        Drop files here or click to upload.
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                                        This is just a demo dropzone. Selected files are
                                                        HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                                        uploaded.
                                                    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
            
        

The "Dropzone" component with file type validation enhances your web application's file upload functionality by allowing you to specify accepted file formats. In this example, a "Dropzone" is created with validation rules for image file formats (JPEG, PNG, and JPG). Users will be restricted to uploading only the specified file types. Customize the "Dropzone" component and file format validation as needed to ensure secure and controlled file uploads in your application.

Component API

In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.

Below is a list of props that can be passed to the component:

Dropzone
Prop Type Description
`options` `DropzoneOptions` Dropzone configuration options.
`getRef` `(el: DropzoneElement) => void` A function that receives a reference to the Dropzone element.