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.

Theme Variables (SCSS)#

$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;
Dropzone Props API
  • className string

    Specifies class name to append to the base element.

  • accept Object.<string[]>

    Set accepted file types. This should be an object with the keys set to the MIME type and the values to an array of file extensions.

  • maxSize number

    Maximum file size (in bytes).

    DefaultInfinity
  • minSize number

    Minimum file size (in bytes).

    Default0
  • onUploadProgress func

    A callback fired each time an upload progress event happens, receives (percentageUploaded, progressEvent) as arguments.

    Default() => {}
  • onUploadCancel func

    A callback fired upon successful upload, receives Response object as a single argument.

    Default() => {}
  • onProcessUpload func Required

    A function responsible for uploading the file. Receives following object as its only argument { @param {object} fileData - Metadata about the uploaded file. @param {object} requestConfig - Config to pass to axios call. @param {function} handleError - Function to communicate to Dropzone that file upload resulted in failure, expects Error object to be passed as its only argument. }

  • errorMessages shape {
    invalidType: string | element,
    invalidSizeLess: string | element,
    invalidSizeMore: string | element,
    multipleDragged: string | element,
    uploadError: string | element,
    }

    An object containing error messages, following are supported: 1) invalidType - A message to display when file of invalid type is dropped into Dropzone. Defaults to 'The file type must be {filType} file / one of {fileTypes} files.'. 2) invalidSizeLess - A message to display when file of size less than minSize value is dropped into Dropzone. Defaults to 'File must be larger than {minSize}.'. 3) invalidSizeMore - A message to display when file of size greater than maxSize value is dropped into Dropzone. Defaults to 'File must be less than {maxSize}.'. 4) multipleDragged - A message to display when multiple files are dragged over Dropzone. 5) uploadError - A message to display in case upload results in an error

    Default{ invalidType: undefined, invalidSizeLess: undefined, invalidSizeMore: undefined, multipleDragged: undefined, uploadError: undefined, }
  • progressVariant enum'spinner' | 'bar'

    Specifies how the upload progress should be displayed, component shows either spinner or a progress bar.

    Default'spinner'
  • validator func

    Custom validation function, receives File object as its only argument. Note that this function will be invoked as a last validation step before beginning an upload process.

  • inputComponent func | node

    A component to display initial state of the Dropzone.

    Default<DefaultContent />