react-js-file-uploader

React JS File Uploader Component

Description

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:

Features:

• 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 :)

How it looks

Installation

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

Usage

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);
  }}
/>

Multiple File Types

You can accept multiple file types by passing an array:

<FileUploader
  accept={[".mp3", ".mp4", ".pdf", ".png", ".jpg"]}
  title="Upload media or documents"
  uploadedFileCallback={e => {
    this.handleUpload(e);
  }}
/>

Custom UI

Customize the upload button with icons or styled components using renderInput:

<FileUploader
  accept={[".png", ".jpg", ".jpeg"]}
  uploadedFileCallback={(file) => console.log(file)}
  renderInput={({ onChange, accept }) => (
    <div>
      <button 
        onClick={() => document.getElementById("fileInput").click()}
        style={{ 
          padding: "10px 20px", 
          background: "#007bff", 
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer"
        }}
      >
        📁 Choose Image
      </button>
      <input
        id="fileInput"
        type="file"
        accept={accept}
        onChange={onChange}
        style={{ display: "none" }}
      />
    </div>
  )}
/>

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

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 or Array | N| Filter to determine what file types you want to upload (e.g., ".csv" or [".mp3", ".mp4", ".pdf", ".png", ".jpg"]) | | 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) | renderInput| func | N | ({ onChange, accept }) => JSX - Customize Render input container | renderLoader| func | N | () => JSX - Customize render loader | renderContainer| func | N | (maxSizeMB) => JSX - Customize render container | renderLimitText| func | N | (children) => JSX - Render Limit Test element

Donations

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

Changelog

v0.7.0

• Migrated from class component to functional component with hooks
• Added support for array of file types in accept prop (e.g., [".mp3", ".mp4", ".pdf"])
• Updated to React 18 compatibility
• Improved performance with modern React patterns
• Enhanced documentation with custom UI examples

v0.6.0

• New customization options: render input, loader, container and limit text

You can pass down functions with JSX.

<FileUploader
  title="Upload Your File"
  maxFileSizeMB={2}
  uploadedFileCallback={(file) => console.log(file)}
  renderInput={({ onChange, accept }) => (
    <button onClick={() => document.getElementById("hiddenUpload").click()}>
      Custom Upload Button
      <input
        id="hiddenUpload"
        type="file"
        accept={accept}
        onChange={onChange}
        style={{ display: "none" }}
      />
    </button>
  )}
  renderLoader={() => <span>Loading...</span>}
  renderLimitText={(max) => <p style={{ color: "red" }}>Too big! Max {max}MB.</p>}
  renderContainer={(children) => <section className="custom-wrapper">{children}</section>}
/>

v0.5.2

• Code refactors to make the component more performant
• Binary read fixes

v0.5.1

• Fixed read as binary to use modern browser standards.

v0.5.0

Breaking changes:

• 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

Deprecations:

• Deprecated prop maxFileSizeBytes

Other:

• Fixed logic issue with max file size limit

v0.4.0

• No breaking changes besides all dependencies updated
• Dependencies updated
• Overall package size optimized

v0.3.4

• Dependencies updated
• React version updated
• Overall package size optimized

v0.3.0

• Dependencies updated
• Overall package size optimized

v0.2.7

• 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

v0.2.2

• Bug fixes typecheck added

v0.2.1

• Read binary files

v0.2.0

• Added accept prop
• Added styling prop for title

v0.1.8

• Added callback support for abort and error handling

License

Licensed under the MIT License © jciccio