Giter Site home page Giter Site logo

react-file-reader's Introduction

THIS LIBRARY HAS BEEN DEPRECATED - IF YOU WOULD LIKE TO MOVE THE PROJECT FORWARD FORK IT AND CARRY ON! I just don't have time to maintain without any help, as I no longer run this business as a full time job.

THIS REPO IS NO LONGER MAINTAINED AND IS HERE ONLY FOR PRESERVATION AND PORTFOLIO PURPOSES

React File Reader

Build Status DAVID

NPM

LIVE DEMO

A flexible ReactJS component for handling styled HTML file inputs.

Install

npm install react-file-reader --save

ChangeLog

  • 1.1.4
    • adds disabled prop for input
  • 1.1.3
    • adds the ability to accept multiple fileTypes as an array
  • 1.1.2
    • fixes an issue where the same file couldn't be selected twice in a row
  • 1.1.1
    • changes the way we're hiding the input, as previously it would break parent elements that were positioned absolutely.
  • 1.1.0
    • adds the ability to return both base64 strings and an HTML5 FileList from handleFiles
  • 1.0.3
    • bumps React version to 15.5 and fixes UNMET peer dependency with webpack
  • 1.0.2
    • fixed an issue w/ prop-types not being available
  • 1.0.1
    • fixed issue w/ uuid4 being a devDependency
  • 1.0.0
    • initial release

Props

Default Props

  • fileTypes: 'image/*'
  • multipleFiles: false
  • base64: false

Required Props

  • a child element/component
    • pass in your customized element to represent your upload input
  • handleFiles
    • a function to handle the selected files from the HTML input

Optional Props

  • elementId
    • set a unique element Id for the input element
    • if this is not set, a random UUID is generated for each input on the page.
  • base64
    • a boolean to convert and return the files as a base64 string
    • multipleFile selection will return an array of base64 strings
  • multipleFiles
    • a boolean enforce single file or multiple file selection
  • fileTypes
  • disabled
    • disable input

Usage

Import React File Reader

import ReactFileReader from 'react-file-reader';

Basic Use

handleFiles = files => {
  console.log(files)
}

<ReactFileReader handleFiles={this.handleFiles}>
  <button className='btn'>Upload</button>
</ReactFileReader>

Response

HTML5 FileList

Base64

When base64 is true, React File Reader returns a JS Object including both the base64 files and the HTML5 FileList. You can access their values at Object.base64 or Object.fileList

handleFiles = (files) => {
  console.log(files.base64)
}

<ReactFileReader fileTypes={[".csv",".zip"]} base64={true} multipleFiles={true} handleFiles={this.handleFiles}>
  <button className='btn'>Upload</button>
</ReactFileReader>

Response

multipleFiles={true}
["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA", "data:image/png;base64,i..."]
multipleFiles={false}
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."
Access HTML5 FileList with base64={true}
handleFiles = (files) => {
  console.log(files.fileList)
}

Copyright

Copyright (c)2017 Grillwork Inc. See LICENSE for details.

react-file-reader's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-file-reader's Issues

Add option to return both base64 and FileList

There should be an option for returning both base64 and FileLists incase end services don't accept base64 files as an upload option.

  • Returns both FileList and Base64 Strings to handleFiles

Multiple files upload on Android -> Mobile Firefox browser does not work

Hi GrillWork,

thank you for this cool file-reader!

Would you be kind to help me with next:

  • Multiple files upload does not work on mobile Mozilla Firefox browser, the handleFiles event handler does not fire.

My component configuration is next:

  • multiple files: true
  • base64: true

Device details:

  • Samsung Galaxy S7 Edge
  • Mozilla Firefox version 61.0

Looking forward to hearing from you
Thank you

Add disabled prop

It would be nice to be able to disable the component if needed. I'm currently attempting to implement it but have it disabled until another form element is completed. I can do this directly to the child <button> element which effectively makes the button look disabled, but you can still click it to invoke the file uploader.

Problem with the uuid package

Hi,

version 1.1.4
There is a problem with the uuid dependency. While the application is running occurs an error as below:

index.js:44 Uncaught TypeError: (0 , _uuid2.default) is not a function
at new ReactFileReader (index.js:44)

Maybe should you froze the version of this dependency or remove it?
It is a major issue. Is there a chance to fix this bug immediately?

Best regards, codezzly.

handleFiles won't trigger if the same file is selected twice

Hi, first of all thanks for creating and sharing this component.

I noticed that if you select a file the handleFiles listener is called as expected, however, if I retry the action of selecting the same file to upload, handleFiles won't get called.
I double checked this behaviour on your demo page. You can check it too by selecting a file with the console open, then clearing the messages in the console and retrying the process. You will notice that no new messages are shown after selecting the same file.

As a side note, selecting the same image to upload doesn't make much sense, however it's important for my users to select the same file several times.

remove `uuid` package

the uuid package can be avoided, it will add extra 700KB (including crypto polyfil for browser) to the bundle size when the component is built with webpack

created pull request for this issue

#22

Implement dropzone

  • has the ability to drag & drop files for selection.
  • returns HTML FileList
  • returns Base64 strings
  • works with single file drop
  • works with multiple file drop
  • component Dropzone
  • The Dropzone component should accept a child component just like the FileReader

Same file cannot be uploaded in row

I am trying to upload same .CSV file in row. Second upload of the same file doesn't work. As per the log it says version 1.1.2 has fixed this issue. but looks like its still broken.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.