CODEWITHSUNDEEP
javascriptreactjs
chobo2
chobo2

Reputation: 85715

Read File Reactjs

I have 2 questions. I am using react-dropzone

  1. 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?

  2. 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

Upvotes: 2

Views: 3548

Answers (1)

lifejuggler
lifejuggler

Reputation: 460

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

Upvotes: 1

Related Questions