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.

License

MIT