How to Preview Uploaded Image File From File Input with Reactjs?

Question

I am using a plugin called dropzone which leaves rendering the image pretty much how to the user.

so I have done this

  <Dropzone
      onDrop={this.handleDropChange}}>
      <p>
        Try dropping some files here, or click to select files to upload.
      </p>
    </Dropzone>



 @observable files = [];
  @action
  handleDropChange = (files) => {
    
    files.forEach(file => {
        this.loadFile(file);
    });
}

  @action
  loadFile(file){
    const reader = new FileReader();
    reader.addEventListener('load',() => {
        runInAction(() => {
            this.files.push({file: file, preview: reader.result,  uploaded: false})
            window.URL.revokeObjectURL(reader.result);
          });
      },false);

    // reader.readAsDataURL(file.fileObject);
  }

      <img src={this.props.preview} />

Problem is though when I drag in say 500 images it takes awhile for them to render on the screen. I think reactjs is having a hard time as it is essentially re-rendering 500 times since each "file reader load" causes a new item to be put into the files array.

Is there away to batch this or first do all the loading then re-render?

Endless · Accepted Answer · 2018-10-06 18:52:45Z

1

revokeObjectURL is for object url's and not meant for other strings|urls|base64.
You can create a objectURL by calling URL.createObjectURL like so:

var url = URL.createObjectURL(file || blob)
var image = new Image()
image.src = url
document.body.appendChild(image)

There is no need to use FileReader and read all the content encode it as base64 then let the browser decode it back into binary. that is a waste of resource...

revoking the objecturl should be done when you no longer need the url

answered Oct 6, 2018 at 18:52

Endless

38.8k14 gold badges118 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chobo2 Over a year ago

if they go to a new page(SPA) will the resources from the createObjectUrl still need to be disposed of?

Endless Over a year ago

Especially if the page is a SPA, otherwise not so much as it will be revoked when you leave the page

chobo2 Over a year ago

So how do I manage it then. I thought if I create it then release it that would statsify it. Otherwise I got to do it after they leave that component which would also mean I would have to keep a reference to it.

Endless Over a year ago

You could do it as soon as the image is loaded img.onload = () => URL.revokeObjectURL(img.src)

Collectives™ on Stack Overflow

How to Preview Uploaded Image File From File Input with Reactjs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related