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