React JS File Uploader Component
A customizable React file upload component with built-in loading indicator (throbber) and size validation. It simplifies file upload handling by abstracting front-end logic and providing a clean callback interface once the file is fully loaded.
Some key features are:
-
Displays a loading spinner while the file is being read.
-
Invokes a callback (uploadedFileCallback) with the file's content, name, size, and last modified date after successful loading.
-
Supports validation of maximum file size (in MB or bytes).
-
Allows restriction of accepted file types (e.g., .csv, .pdf,.docx).
-
Handles read errors (onErrorCallback) and aborts (onAbortCallback) gracefully.
-
Offers customization of UI text and styles via props.
How to thank me? Just click on ⭐️ button or buy me a tea using the donation button below :)
Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm i file-uploader-js
Or if you use yarn, you can execute:
yarn add file-uploader-js
Import FileUploader
in your react component.
import FileUploader from 'file-uploader-js';
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
//It comes in an object form
// {
// filename: string,
// data: file uploaded data content,
// lastModified: date,
// size: in bytes
// }
}
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 |
maxFileSizeMB | Number | N | File size max amount that can be received in MB (e.g 0.1, 100, 10) |
If you think that any information you obtained here is useful and worth of some money and are willing to pay for it, feel free to send any amount through Paypal :)
You can also follow me on Patreon: https://patreon.com/Jacware
- Fixed read as binary to use modern browser standards.
- Renaming: fileSizeLimit to maxFileSizeBytes
- Changed callback function to return filename and data uploaded instead of receiving just the content of the uploaded file you will receive { filename: "filename", content: blob} This can be extended in the future to add more elements.
- To make things easier created a new prop: maxFileSizeMB
- Deprecated prop maxFileSizeBytes
- Fixed logic issue with max file size limit
- No breaking changes besides all dependencies updated
- Dependencies updated
- Overall package size optimized
- Dependencies updated
- React version updated
- Overall package size optimized
- Dependencies updated
- Overall package size optimized
- Added props to have a hard file size limit
byteLimit
- Added new error message if the file exceeds the limit, can be configured with
customLimitTextCSS
prop
- Bug fixes typecheck added
- Read binary files
- Added accept prop
- Added styling prop for title
- Added callback support for abort and error handling
Licensed under the MIT License © jciccio