react-file-trap 1.0.0
Install from the command line:
Learn more about npm packages
$ npm install @rasimandiran/react-file-trap@1.0.0
Install via package.json:
"@rasimandiran/react-file-trap": "1.0.0"
About this version
Simple wrapper component that convert child component to a drag and drop file input.
Install react-file-trap with npm
npm install react-file-trap
<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>
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.
Details
- react-file-trap
-
rasimandiran
- over 2 years ago
- MIT
- 8 dependencies
Assets
- react-file-trap-1.0.0.tgz
Download activity
- Total downloads 0
- Last 30 days 0
- Last week 0
- Today 0