File-uploader-js NPM

npm npm npm

file-uploader

React JS File Uploader Component

Description

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

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm i file-uploader-js

Usage

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

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

Changelog

v0.3.1

Package size optimizations

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