Reactjs Input Upload doesn't return local URL

Question

I have a problem when trying to display image preview before upload it to server. I 'm using reactjs.

My problem is when I try to upload an image I got the file data but when I'm using reader, it doesn't return local URL and just show undefined

this is the topic that I tried to follow get-image-preview-before-uploading-in-react

but when I try to check my image local url it return undefined

this is what I import in my file:

import React, {Component} from "react";
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem  } from 'mdbreact';

this is my js:

<p className="text-upload">Front Desain</p>
<input ref="file" type="file" name="front Design" onChange={this.frontDesign}/>

this is my method or function:

  frontDesign = (e) =>{
    var file = this.refs.file.files[0];
    var reader = new FileReader();
    var url = reader.readAsDataURL(file);

    reader.onloadend = function (e) {
        this.setState({
          form:{
            frontDesign: [reader.result]
          }
        })
      }.bind(this);
    console.log("Check Data : ", file)
    console.log("Check URL : ", url)

  }

and this is my state:

  state ={
    form:{
      frontDesign: [],
    }
  }

this is my console:

This my codesandbox:

https://codesandbox.io/s/tender-mclaren-zb1l7?fontsize=14

can someone help me to solve this?

Morlo Mbakop · Accepted Answer · 2019-08-17T08:53:36.603

2

From the mozilla website it seams you need to add a load event listener to your reader. This sample code is not supported in some versions of IE.

...

reader.addEventListener("load", () => {
  this.setState(state => ({
    ...state,
    form:{
      frontDesign: [reader.result]
    }
  }))
  const url = reader.result;
  console.log(url);
}, false);

...

Working condeSanbox here: https://codesandbox.io/s/affectionate-lamport-dnbij

edited Aug 17 '19 at 08:53

answered Aug 17 '19 at 08:06

Morlo Mbakop

3,518
20
21

thankyou for the answer, I try to use this approach but when I use `console.log("Check URL : ", url)` to check it, it still return undefined – Rakis Friski Aug 17 '19 at 08:17
as for the fileReader, I always use it like this but in fact I don't really know how to use another approach for this file upload – Rakis Friski Aug 17 '19 at 08:19
That's weird can you add a CodeSandbox link?, it might be the `react ref` try passing the id of your input to your onChange method and use `document.getElementById` or use @Cong anwser – Morlo Mbakop Aug 17 '19 at 08:23
I tried @Cong answer but it return another error, wait I'll try to make something to try – Rakis Friski Aug 17 '19 at 08:31
@RakisFriski, I think you might need to add load event listener to your reader. Please create a codesandbox it will easier to help. – Morlo Mbakop Aug 17 '19 at 08:40
I'll already make it in https://codesandbox.io/s/tender-mclaren-zb1l7?fontsize=14 – Rakis Friski Aug 17 '19 at 08:43
@RakisFriski check this out : https://codesandbox.io/s/affectionate-lamport-dnbij – Morlo Mbakop Aug 17 '19 at 08:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198074/discussion-between-morlo-mbakop-and-rakis-friski). – Morlo Mbakop Aug 17 '19 at 08:53

score 1 · Answer 2 · answered Aug 17 '19 at 07:33

1

Do not need use ref here. Try to code below

frontDesign = (e) => {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = (e) => {
    //Image URL e.target.result
    this.setState({
      form:{
        frontDesign: [e.target.result]
      }
    })
  }
  reader.readAsDataURL(file);
}

answered Aug 17 '19 at 07:33

Cong Nguyen

3,199
1
23
22

Thankyou for the answer, but when i try to use this I got another error that said ` Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.` – Rakis Friski Aug 17 '19 at 08:15

Reactjs Input Upload doesn't return local URL

2 Answers2