Read File Reactjs

Question

I have 2 questions. I am using react-dropzone

How do I setup different settings? They have file.preview, max size and etc. How do I set this up in my react js? Is this on init or something?
I followed the example and now have OnDrop function but I am wondering how can I read the contents of a files(say a csv/text file) in my javascript code. The example just shows how to upload it to the server.

Right now I have

export default class TransactionHistory extends React.Component {

    onDrop(acceptedFiles, rejectedFiles) {
      acceptedFiles.forEach((file)=> {
           console.log(file)
        });
    }
    render() {
        return (
            <div>
            <Dropzone onDrop={(acceptedFiles, rejectedFiles) => this.onDrop(acceptedFiles,rejectedFiles) }>
              <div>Upload your transaction here. By Dragging and dropping your file here. Or double clicking here.</div>
            </Dropzone>
          </div>
        )
    }
}

Edit

Got the upload working

  onDrop(acceptedFiles, rejectedFiles) {
      acceptedFiles.forEach((file)=> {
          var fr = new FileReader();
            fr.onload = function(e) {
                console.log(e.target.result);
            };
         fr.readAsText(file);
        });
    }

Now not sure how to set these "features"

disableClick [Boolean | **false**] — Clicking the <Dropzone> brings up the browser file picker.
multiple [Boolean | **true**] — Accept multiple files
minSize [Number | **0**] — Only accept file(s) larger than minSize bytes.
maxSize [Number | **Infinity**] — Only accept file(s) smaller than maxSize bytes.
accept - Accept only specified mime types. Must be a valid MIME type according to input element specification, for example application/pdf, image/*, audio/aiff,audio/midi

are you looking for this? developer.mozilla.org/en-US/docs/Web/API/FileReader — azium
– azium, Commented Jan 4, 2017 at 22:16

lifejuggler · Accepted Answer · 2017-01-11 21:34:07Z

You can setup those features via having them in the <Dropzone> tag in render() I believe the author did it this way so that you can customize each dropzone if there are multiple dropzones in the same window.

i.e:

<Dropzone disableClick={false} 
     accept={"text/csv"}
     minSize={23} 
     maxSize={3000}>
</Dropzone>

Reference/ example that I found: https://gist.github.com/wvance/c052a57654ea943edee113a180598ab8

Edited: Example of the preview field in the github readme

render: function () {
    return (
        <div>
            <Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop}>
                <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
            <button type="button" onClick={this.onOpenClick}>
                Open Dropzone
            </button>
            {this.state.files.length > 0 ? <div>
            <h2>Uploading {this.state.files.length} files...</h2>
            <div>{this.state.files.map((file) => <img src={file.preview} /> )}</div>
            </div> : null}
        </div>
    );
}

If you look at the example closely (this is just a snippit of the entire thing) you'll notice that the file is coming from this.state.files <= this is an array where this.state.files is the accepted files in the onDrop that you got there...

I really would suggest that you read the readme more carefully and understand each lines of code in that sample before you attempt to customize it and use it in your project and ask questions here. But hopefully this clarifies some things

That is what I was looking for, though still leaves this in question "To show a preview of the dropped file while it uploads, use the file.preview property. Use <img src={file.preview} />" Where is file coming from?

Collectives™ on Stack Overflow

Read File Reactjs

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related