Skip to content

Latest commit

 

History

History
132 lines (95 loc) · 3.94 KB

README.md

File metadata and controls

132 lines (95 loc) · 3.94 KB

React File Trap

Simple wrapper component that convert child component to a drag and drop file input.

Demo

Edit remark-codesandbox 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