- 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