File Upload

[maryprtavian]

File Upload Investigation

According to upload target there are 3 kinds of task

• Upload a single file
• Upload multiple files at the same time
• Upload a folder

According to the user actions, there are 3 kinds of tasks:

• Choose a file to upload
• Drag the file to the box then upload
• Upload from the clipboard

From a performance perspective, we may need:

• Upload after compressing a file
• Divide a large file into blocks then uploading

Suggested Libraries

• React FilePond
• React Dropzone Uploader
• Uppy React
• React Dropzone

Previously Highly Used Libraries

• React Dropzone Component
• React Fine Uploader

Comparison of the suggested libraries

	React Dropzone Uploader	React FilePond	React Uppy
Browser support	Chrome Firefox Edge Safari - 10+, 9 (@babel/polyfill) iOS Safari Chrome for Android	Chrome Firefox Edge Safari 9+ Opera Chrome for Android Firefox Android iOS Safari 9+ Chrome for iOS Firefox iOS for IE11 - install the filepond-polyfill files	recent versions of: Chrome Firefox Safari Edge
Accepts	-	Files Directories Blobs Local URLs Remote URLs Data URIs Cameras	local disk Google Drive Instagram Remote urls Cameras etc.
Progress Tracking	Yes	Yes	Yes
Chunk Uploading	No	Yes	Yes
Styles	Custom Styles	Custom Styles	Styles
Accessibility	None	Supported	Supported
Docs	React Dropzone Uploader	FilePond	React Uppy

React Dropzone is different from the above mentioned three libraries. Unlike the latter, it only gives us a dropzone — it has no API for managing uploads.

Demos

• React Dropzone Uploader Examples
• FilePond Examples, React FilePond Example
• Uppy React Examples
• React Dropzone Examples

Base Properties

restrictions: {
    maxFileSize: null,
    minFileSize: null,
    maxTotalFileSize: null,
    maxNumberOfFiles: null,
    minNumberOfFiles: null,
    allowedFileTypes: null,
}

allowMultipleUploadBatches: true,

isDisabled: false

allowDrop: false, 
allowBrowse: false, 
allowPaste: false,
allowReplace: false, 

instantUpload:  false, 

disabled: false,
selectButtonLabel: null,
dropzoneText: null,

onBeforeUpload,
onAfterUpload,

oninit
onwarning
onerror
oninitfile
onaddfilestart
onaddfileprogress
onaddfile