Empower Drag and Drop File

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.

Installation

Component

npm install empower-drag-and-drop-file

Repository

1. Run npm install
2. After successful installation, run npm start

Initialization

import  FileDragAndDrop  from  'empower-drag-and-drop-file'

Usage

<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}
/>

The onChanged can be bind to a function of your choice to extract the dropped file from the component and shall be triggered upon file drop.

Documentation

Confluence - File Drag and Drop

Developers

Jephunneh Viernes - [email protected]

Changelog:

• 0.1.10 - Security Fix - Fix vulnerability issues in the package.
• 0.1.6 - Added enableApiUpload and filesUploadStatus to synchronize the file status between the UI and the upload status in the upload api and totalMaxSize prop to set the overall files maximum size limit in the component.
• 0.1.7 - Disable the component when there is pending/removing of file uploads when enableApiUpload is enabled.