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.

Usage Requirements

You need to provide upload logic via the onProcessUpload prop. This function should handle uploading the file to the backend and accepts an object with:

• fileData - Metadata about the uploaded file
• requestConfig - Config to pass to axios call (required for progress bar and cancel action)
• handleError - Function to communicate upload failures to Dropzone, expects an Error object

Note: Dropzone does not render files after successful upload. You need to implement that logic based on your file type needs.

Basic Usage

function BasicDropzone() {
  const handleProcessUpload = async ({ fileData, requestConfig, handleError }) => {
    const uploadUrl = 'https://httpbin.org/post';
    try {
      await axios.post(uploadUrl, fileData, requestConfig);
    } catch (error) {
      handleError(error);
    }
  };

  return (
    <Dropzone
      onProcessUpload={handleProcessUpload}
      onUploadProgress={(percent) => console.log(percent)}
    />
  );
}

With Progress Bar

function ProgressDropzone() {
  const handleProcessUpload = async ({ fileData, requestConfig, handleError }) => {
    const uploadUrl = 'https://httpbin.org/post';
    try {
      await axios.post(uploadUrl, fileData, requestConfig);
    } catch (error) {
      handleError(error);
    }
  };

  return (
    <Dropzone
      onProcessUpload={handleProcessUpload}
      onUploadCancel={() => console.log('UPLOAD CANCEL')}
      progressVariant="bar"
    />
  );
}

With File Validation

function ValidatedDropzone() {
  const handleProcessUpload = async ({ fileData, requestConfig, handleError }) => {
    const uploadUrl = 'https://httpbin.org/post';
    try {
      await axios.post(uploadUrl, fileData, requestConfig);
    } catch (error) {
      handleError(error);
    }
  };

  return (
    <Dropzone
      onProcessUpload={handleProcessUpload}
      progressVariant="bar"
      minSize={1048576} // 1MB
      maxSize={20971520} // 20MB
      accept={{
        "image/*": ['.png']
      }}
    />
  );
}

With File Preview

function PreviewDropzone() {
  const [uploadedFile, setUploadedFile] = useState(null);

  const handleProcessUpload = async ({ fileData, requestConfig, handleError }) => {
    const uploadUrl = 'https://httpbin.org/post';
    try {
      const response = await axios.post(uploadUrl, fileData, requestConfig);
      setUploadedFile(response.data.files.file);
    } catch (error) {
      handleError(error);
    }
  };

  if (uploadedFile) {
    return <Image src={uploadedFile} fluid alt="Uploaded preview" />;
  }

  return (
    <Dropzone
      onProcessUpload={handleProcessUpload}
      accept={{
        "image/*": []
      }}
      progressVariant="bar"
    />
  );
}

With Custom Error Messages

function CustomErrorDropzone() {
  const handleProcessUpload = async ({ fileData, requestConfig, handleError }) => {
    const uploadUrl = 'https://httpbin.org/post';
    try {
      await axios.post(uploadUrl, fileData, requestConfig);
    } catch (error) {
      handleError(error);
    }
  };

  return (
    <Dropzone
      onProcessUpload={handleProcessUpload}
      errorMessages={{
        invalidType: 'Invalid file type, only images allowed.',
        invalidSize: 'The file size must be between 1MB and 20MB.',
        multipleDragged: 'Cannot upload more than one file.',
      }}
      minSize={1048576}
      maxSize={20971520}
      accept={{
        "image/*": ['.png']
      }}
    />
  );
}

With Custom Validation

function CustomValidationDropzone() {
  const imageDimensionValidator = async (file) => {
    const image = new window.Image();
    try {
      const url = URL.createObjectURL(file);
      image.src = url;
      await image.decode();
      
      if (image.width !== 400 || image.height !== 479) {
        return 'Image must be 400x479 pixels';
      }
      return null;
    } catch (error) {
      return 'Validation failed. Please try again.';
    }
  };

  const handleProcessUpload = async ({ fileData, requestConfig, handleError }) => {
    const uploadUrl = 'https://httpbin.org/post';
    try {
      await axios.post(uploadUrl, fileData, requestConfig);
    } catch (error) {
      handleError(error);
    }
  };

  return (
    <Dropzone
      onProcessUpload={handleProcessUpload}
      validator={imageDimensionValidator}
      accept={{
        "image/*": []
      }}
    />
  );
}

Props

Prop	Type	Description
onProcessUpload	function	Required. Handles file upload logic
onUploadProgress	function	Optional. Receives upload progress updates
onUploadCancel	function	Optional. Handles upload cancellation
progressVariant	string	Optional. Type of progress indicator ('bar' or 'spinner')
minSize	number	Optional. Minimum file size in bytes
maxSize	number	Optional. Maximum file size in bytes
accept	object	Optional. File type restrictions
validator	function	Optional. Custom validation function
errorMessages	object	Optional. Custom error messages
inputComponent	node	Optional. Custom input component

File Type Restrictions

The accept prop should be an object with MIME types as keys and arrays of file extensions as values:

// Allow only PNG files
{
  "image/*": ['.png']
}

// Allow PNG and JPG files
{
  "image/*": ['.png', '.jpg']
}

// Allow all images
{
  "image/*": []
}

Error Messages

The errorMessages prop accepts an object with these keys:

{
  invalidType: 'Custom type error message',
  invalidSize: 'Custom size error message',
  multipleDragged: 'Custom multiple files error message'
}