File Drag and Drop

Description

File drag and drop component lets you upload multiple files by dropping it in directly in web app, you can also set the accepted file formats and the maximum file size.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-drag-and-drop-file --save

Standard File Drag and Drop

Configuration

<FileDragAndDrop
    allowedFormats={['pdf',  'png',  'jpg',  'mp3',  'pptx']}
    title="media"
    label="Drag and drop files here, or browse"
    subLabel="Supports .mp4, .mov, .mkv"
    onChanged={(val:  any) => getFiles(val)}
    maxSize={10}
/>

Supported Formats

The following are the default supported file formats the component can process

avi
doc
docx
jpeg
jpg
mp4
png
pdf
xls
xlsx
mp3
pptx
csv
txt

Adding Additional Supported Formats

You can also add additional supported format if your desired format is not on the default supported file formats by using the addSupportedFormats prop. However, you must adhere to the supported MIME Types the browsers can allow.

<FileDragAndDrop
    ...other props
    addSupportedFormats={[{code:  'mpeg',  mimeType:  'video/mpeg'}]} 
/>

File Drag and Drop (with API Upload)

You can also synchronize the upload status of your files to the UI by supplying the enableApiUpload and filesUploadStatus props. Take note that these two props must be present in order for the component to function properly. Refer to the format bellow.

Configuration

Additional Notes

Once you dropped / remove a file in the component, there will be an additional flag in the file object which is the uploadStatus that you can use. The status can be on-going, removing, success, failed.
The component is automatically disabled when there is ongoing or removing of upload.
The retry function will trigger the onChanged prop. To prevent reuploading of the files that are already successfully uploaded you can use the uploadStatus in file object to filter it out before sending it to your API.
Removing a failed upload will not trigger onChanged prop.

Properties

Parameter	Data Type	Constraint	Description

Parameter	Data Type	Constraint	Description
allowedFormats	Array[…String]	Required	Defines the formats to be accepted by the components. Ex. [".pdf", ".jpeg"]
maxSize	Number	Required	Specify the maximum size of each file in megabytes (mb)
totalMaxSize	Number	Optional	Specify the maximum overall total file size in megabytes (mb)
title	String	Optional	Specify the title of the component
label	String	Optional	Sets the label of the component Default: Drag and drop your files here Default if click upload is enabled: Drag and drop your files here, or click to browse
subLabel	String	Optional	Sets the sub label of the component Default: Supports [...your allowed formats]. Max of {maxSize}.mb
enableClickUpload	Boolean	Optional	Use to enable upload via browsing your file system by clicking the component
onChanged	Function	Optional	A function to trigger upon successfully dropping the files. The dropped files can be extracted in the function arguments
addSupportedFormats	ArrayObject	Optional	Add additional supported file formats Example: [{code: '.mpeg', mimeType: 'video/mpeg'}]
dataFiles	ArrayFile	Optional	Set the default files in the component
enableApiUpload	Boolean	Optional	Enable the synchronization of the upload status of the file and the UI. NOTE!: filesUploadStatus prop must be declared in order for the component to function properly.
filesUploadStatus	ArrayObject	Optional	Sets the status of the uploaded files from the api response to the UI. Format: [{ name: ""<NAME OF THE FILE>", uploadStatus: "<SEE POSSIBLE VALUES BELOW>" } ...n] uploadStatus Accepted Values: success - if the file is successfully uploaded failed - if the file failed to upload removed - if the file is successfully removed
onError	Function	Optional	A function to trigger if the component encountered an error. The error indicator can be extracted in the function arguments Error Indicator file-size-exceeded (One of your files exceeded the max limit) file-type (One of your files has an invalid file type that is against the allowed formats you have defined)

References

Repository Link: https://bitbucket.org/empowerteams/empower-drag-drop

NPM Package: npm: empower-drag-and-drop-file

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git