File upload - multiple

File upload - multiple is able to:

• Accept one or more files via browse or drag-and-drop
• Provide their data to you using file objects via the onFileDrop callback prop
• Read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails
• Display (in real time) the upload progress/status of each file
  • Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic
  • If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the customFileHandler, fileName, fileSize, progressValue, and progressVariant props exist to allow you to do that

Restricting file size and type

As with singular file upload, any props accepted by react-dropzone's Dropzone component can be passed as a dropzoneProps object in order to customize the behavior of the Dropzone, such as restricting the type of files allowed. The following examples will only accept the files they list as accepted. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the accept prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.

IMPORTANT: A note about security

Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.

Composable structure

File upload - multiple is designed in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:

<MultipleFileUpload>
  <MultipleFileUploadMain />
  <MultipleFileUploadStatus>
    <MultipleFileUploadStatusItem />
  </MultipleFileUploadStatus>
</MultipleFileUpload>

Examples

Props

MultipleFileUpload

MultipleFileUploadMain

MultipleFileUploadStatus

MultipleFileUploadStatusItem

CSS variables