Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
file-uploader-js
Advanced tools
React JS File uploader handler component with loading process and error management. Returns local uploaded file contents via callback
React JS File Uploader Component
Simple react file upload component with loading throbber. Abstracts the FE loading functionality and invokes a callback function once the file has been already loaded with the appropriate data. This was originally thought for text files. Can accept specific file types if needed
How to thank me? Just click on ⭐️ button :)
Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm i file-uploader-js
Import FileUploader
in your react component.
import FileUploader from 'file-uploader';
and specify the callback function you want to call when the file is loaded.
While the file is loading, you'll see a loading throbber.
For example:
<FileUploader
accept=".csv"
title="Please upload a CSV file"
titleCss={{ color: "#000", fontFamily: "arial" }}
uploadedFileCallback={e => {
this.uploadedCsv(e);
}}
/>
And then define the callback function
uploadedCsv(fileData) {
console.log(fileData);
//Do stuff with the loaded file data
}
Props available:
title
(title that will have the upload component section as a label)uploadedFileCallback
(callback function that will be invoked)accept
(Types you want to filter and accept for uploads e.g ".csv")Optionally you can handle errors with the following props:
onErrorCallback
(Error uploading and reading the file)onAbortCallback
(Operation aborted)Name | Type | Mandatory | Description |
---|---|---|---|
title | String | N | Title you want to have in the uploader |
uploadedFileCallback | Function callback | Y | Function to call on loaded data |
accept | String | N | Filter to determine what file types you want to upload |
onErrorCallback | Function callback | N | Function to call on loading error |
onAbortCallback | Function callback | N | Function to call on loading abort |
titleCss | Object | N | Styling for title |
isBinary | present? | N | Is the file binary? Text file as default |
customLimitTextCSS | Object | N | Object to customize error title |
byteLimit | Number | N | Number in bytes to determine file size limit |
byteLimit
customLimitTextCSS
propLicensed under the MIT License © jciccio
FAQs
React JS File uploader handler component with loading process and error management. Returns local uploaded file contents via callback
We found that file-uploader-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.