1.0.1 • Published 1 year ago
react-file-trap v1.0.1
React File Trap
Simple wrapper component that convert child component to a drag and drop file input.
Demo
Installation
Install react-file-trap with npm
npm install react-file-trap Usage
<FileTrap
ref={wrapperRef}
allowedExtensions={['jpg', 'png']}
handleChange={handleChange}
handleDrag={handleDrag}
handleDrop={handleDrop}
onValidationError={onValidationError}
fileCount={3}
maxFileSize={2} // MB
minFileSize={0.1} // MB
browseOnClick={false}
>
<div style={{ margin: 10, border: "2px solid red" }}>
<h2 style={{ margin: 5 }}>Current Event: {currentEvent}</h2>
<h2 style={{ margin: 5 }}>Valid File Count: {validFiles.length}</h2>
<h2 style={{ margin: 5 }}>Invalid File Count: {invalidFiles.length}</h2>
<h2 style={{ margin: 5 }}>Last Error: {lastError}</h2>
</div>
</FileTrap>Props
| 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 some functions |
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. See events | |
handleDrag | function | Runs for every drag event. Possible values: dragover dragleave | undefined | See events |
handleDrop | function | Runs when dropped a file | undefined | See events |
onValidationError | function | Runs everytime if dropped or selected file invalid | undefined | See events |
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 |
Events
handleChange
Runs on every change on the valid files. fileList parameter includes all valid files.
const handleChange = (fileList) => {
setFiles(filesList);
setTotalSize(byteFormatter(newFiles.reduce((acc, file) => acc + file.size, 0)));
};handleDrag
Runs on drag event, eventName parametet can be: dragover or dragleave
const handleDrag = (eventName) => {
setCurrentEvent(eventName);
};handleDrop
Runs after a dropped files.
const handleDrop = () => {
setCurrentEvent('dropped');
};onValidationError
Runs after selected/dropped files.
const onValidationError = (invalidFileList, errorMsg) => {
setInvalidFiles([...invalidFiles, ...invalidFileList]);
setLastError(errorMsg);
}Functions
browseFiles
Trigger browse window manually. ref prop is needed.
wrapperRef.current.browseFiles();resetWrapper
To reset selected files. ref prop is needed.
wrapperRef.current.resetWrapper();removeFile
To remove specific file. file should be provided as parameter. ref prop is also needed.
wrapperRef.current.removeFile(file);Notes
For more details about usage, please check example project in the root directory.