Convert everything to a drag and drop input

Rasim Andıran — Fri, 17 Mar 2023 11:56:53 +0000

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
`ref`	`ref`	Suggest to use to reset and/or trigger browse outside of child component
`allowedExtensions`	`array`	Allowed file extensions
`handleChange`	`function`	Runs when selected and/or dropped a valid file
`handleDrag`	`function`	Runs for every drag event. Possible values: `dragover` `dragleave`
`handleDrop`	`function`	Runs when dropped a file
`onValidationError`	`function`	Runs everytime if dropped or selected file invalid
`fileCount`	`number`	Allowed file count
`maxFileSize`	`number`	Allowed upper limit for file size in MB
`minFileSize`	`number`	Allowed lower limit for file size in MB
`browseOnClick`	`boolean`	Trigger browse window on click to child component

For more details about usage, please check example project in the root directory.