- Notifications
You must be signed in to change notification settings - Fork0
Simple wrapper component that convert child component to a drag and drop file input
License
rasimandiran/react-file-trap
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Simple wrapper component that convert child component to a drag and drop file input.
Install react-file-trap withnpm
npm install react-file-trap
<FileTrapref={wrapperRef}allowedExtensions={['jpg','png']}handleChange={handleChange}handleDrag={handleDrag}handleDrop={handleDrop}onValidationError={onValidationError}fileCount={3}maxFileSize={2}// MBminFileSize={0.1}// MBbrowseOnClick={false}><divstyle={{margin:10,border:"2px solid red"}}><h2style={{margin:5}}>Current Event:{currentEvent}</h2><h2style={{margin:5}}>Valid File Count:{validFiles.length}</h2><h2style={{margin:5}}>Invalid File Count:{invalidFiles.length}</h2><h2style={{margin:5}}>Last Error:{lastError}</h2></div></FileTrap>
| Parameter | Type | Description | Default Value | Notes |
|---|---|---|---|---|
ref | ref | Suggest to use to reset and/or trigger browse outside of child component | undefined | Should be defined to trigger somefunctions |
allowedExtensions | array | Allowed file extensions | undefined | Don't provide to allow all file types |
handleChange | function | Runs when selected and/or dropped a valid file | Mandatory prop to handle files. Seeevents | |
handleDrag | function | Runs for every drag event. Possible values:dragoverdragleave | undefined | Seeevents |
handleDrop | function | Runs when dropped a file | undefined | Seeevents |
onValidationError | function | Runs everytime if dropped or selected file invalid | undefined | Seeevents |
fileCount | number | Allowed file count | Number.MAX_VALUE | |
maxFileSize | number | Allowed upper limit for file size in MB | Number.MAX_VALUE | |
minFileSize | number | Allowed lower limit for file size in MB | 0 | |
browseOnClick | boolean | Trigger browse window on click to child component | true |
Runs on every change on the valid files.fileList parameter includes all valid files.
consthandleChange=(fileList)=>{setFiles(filesList);setTotalSize(byteFormatter(newFiles.reduce((acc,file)=>acc+file.size,0)));};
Runs on drag event, eventName parametet can be:dragover ordragleave
consthandleDrag=(eventName)=>{setCurrentEvent(eventName);};
Runs after a dropped files.
consthandleDrop=()=>{setCurrentEvent('dropped');};
Runs after selected/dropped files.
constonValidationError=(invalidFileList,errorMsg)=>{setInvalidFiles([...invalidFiles, ...invalidFileList]);setLastError(errorMsg);}
Trigger browse window manually.ref prop is needed.
wrapperRef.current.browseFiles();
To reset selected files.ref prop is needed.
wrapperRef.current.resetWrapper();
To remove specific file.file should be provided as parameter.ref prop is also needed.
wrapperRef.current.removeFile(file);
For more details about usage, please checkexample project in the root directory.
About
Simple wrapper component that convert child component to a drag and drop file input
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.