Skip to content

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

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
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.

License

MIT

Details


Assets

  • react-file-trap-1.0.0.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all