# file-uploader-js

> React JS File uploader handler component with loading process and error management. Returns local uploaded file contents via callback

Latest version **0.7.1** (published 2025-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install file-uploader-js
pnpm add file-uploader-js
yarn add file-uploader-js
bun add file-uploader-js
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2025-11-13 |
| First published | 2018-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jose Antonio Ciccio |
| Maintainers | jciccio |
| Keywords | file uploader, js file upload, file upload, upload, uploader, react file upload, react js file uploader |

## Links

- npm: https://www.npmjs.com/package/file-uploader-js
- Repository: https://github.com/jciccio/file-uploader
- Homepage: https://github.com/jciccio/file-uploader/blob/master/README.md
- Issues: https://github.com/jciccio/file-uploader/issues
- npm.io page: https://npm.io/package/file-uploader-js

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Recent versions

- 0.7.1 (latest) — 2025-11-13
- 0.7.0 — 2025-11-12
- 0.6.0 — 2025-06-02
- 0.5.2 — 2025-04-30
- 0.5.1 — 2025-04-30
- 0.5.0 — 2025-04-30
- 0.4.0 — 2025-04-30
- 0.3.4 — 2025-04-29
- 0.3.2 — 2025-04-29
- 0.3.1 — 2020-05-29
- 0.3.0 — 2020-03-28
- 0.2.9 — 2019-12-06
- 0.2.8 — 2019-12-02
- 0.2.7 — 2019-12-02
- 0.2.6 — 2019-12-02
- … 13 more at https://npm.io/package/file-uploader-js/versions

## README

![npm](https://img.shields.io/npm/dt/file-uploader-js.svg)
![npm](https://img.shields.io/npm/v/file-uploader-js.svg)
![npm](https://img.shields.io/npm/l/file-uploader-js.svg)


# 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

![alt text](images/uploader.png "React JS File Uploader example")


# 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:

```javascript
<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:

```javascript
<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`:

```javascript
<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

```javascript
    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 :)

[![](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2MSMEVFF9P33N)

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.

```js
<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](https://www.npmjs.com/~jciccio)

---
_Source: https://npm.io/package/file-uploader-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._