Dropzone

The Dropzone allows users to upload files via drag and drop, or by clicking the component. Currently, only one file upload at a time is allowed.

You will also need to provide upload logic yourself via onProcessUpload prop which accepts function that should take care of uploading the file to the backend (i.e. send HTTP request). This function accepts an object with following content as its only argument:

• {object} fileData - Metadata about the uploaded file.
• {object} requestConfig - Config to pass to axios call (this is required to display progress bar and hande cancel action).
• {function} handleError - Function to communicate to Dropzone that file upload resulted in failure, expects Error object as its only argument.

Each example below implements such a function.

Note that Dropzone does not render file after successful upload, you will have to provide that logic yourself depending on which type of file has been uploaded, see this example.

Basic Usage#

Drag and drop a file to begin uploading, only one file at a time is allowed, no other validation is done.

• Use onUploadProgress prop to get feedback about the upload progress - should be a function that receives (percentageUploaded, progressEvent) as arguments.

With Progress Bar#

Display upload progress as a progress bar with the ability to cancel the upload.

• Use onUploadCancel prop to react to upload cancel event - should be a function that takes Response object as its argument.

With file size and type validation#

Accepts only .png files with size between 1MB and 20MB. The file sizes are specified in bytes. accept prop should be an object with the keys set to the MIME type and the values to an array of file extensions.

For example:

• to allow only PNG images (as in this example) you should pass { 'image/*': ['.png'] } object as accept prop;
• to allow both PNG and JPG images you should pass { 'image/*': ['.png', '.jpg'] } object as accept prop;
• to allow arbitrary images you should pass { 'image/*': [] } object as accept prop

With file preview#

Shows image after successful upload.

With custom error messages#

Accepts only .png files with size between 1MB and 20MB, renders custom validation error messages.

With custom look#

Use inputComponent prop to override default view of Dropzone.

With custom validation#

You can pass your own validator function which accepts File object as its only argument, the function is invoked after all other validation steps are done. The function should return error message to display in case validation fails, otherwise return null.

Note that Dropzone does not handle unexpected errors that might happen in your function, they should be handled by the validator itself as in the example below.

This example validates that only 400x479 images can be uploaded.

$dropzone-padding:                          1.5rem !default;
$dropzone-border-default:                   1px dashed $gray-500 !default;
$dropzone-border-hover:                     2px solid $info-300 !default;
$dropzone-border-focus:                     2px solid $info-300 !default;
$dropzone-border-active:                    2px solid $primary-500 !default;
$dropzone-border-error:                     2px solid $danger-300 !default;
$dropzone-error-wrapper-color:              $danger-500 !default;