When encoding an image to base 64, the result is always undefined

Question

In my ReactJS project, I'm trying to store images in Firebase Realtime Database as a Base64 url and then convert back to an image on render.

(Note: I know that firestore has this built in, however it's too late to rewrite the code to implement the rest of the project on the platform.)

I take the file in via an input:

<input onChange={this.handleImageUpload} className="form-control" type="file" name="profilePicture" id="profilePicture" placeholder="Upload a profle picture"/>

Which runs the handleImageUpload() function:

  handleImageUpload = e => {
    e.preventDefault();
    const imageAsUrl = this.encodeImageFileAsUrl(e.target.files[0]);

    this.setState({
      profilePicture: imageAsUrl
    });

  }

Which calls the encodeImageAsUrl() function with the current file as input:

  encodeImageFileAsUrl = image => {
    const file = image;
    const reader = new FileReader();
    const imageAsUrl = reader.readAsDataURL(file);
    console.log("Image as url = " + imageAsUrl)
    return imageAsUrl;

  }

The variable 'imageAsUrl' prints as 'undefined' and also note that any image I try is 1.2MB or less.

Deepak Kumar T P · Answer 1 · 2018-12-17T13:46:46.147

1

You need to have a event hook onload where you will get the data

encodeImageFileAsUrl = image => {
    return new Promise(resolve=>{
    const file = image;    

    const reader = new FileReader();
    //Like this
    reader.onload = (e) => {
        //Adding log to check result
        console.log(e.target.result);
        resolve(e.target.result);
    }
    const imageAsUrl = reader.readAsDataURL(file);
  });
} 

handleImageUpload = async(e) => {
    e.preventDefault();
    const imageAsUrl = await this.encodeImageFileAsUrl(e.target.files[0]);

    this.setState({
      profilePicture: imageAsUrl
    });

  }

edited Dec 17 '18 at 13:46

answered Dec 17 '18 at 13:16

Deepak Kumar T P

1,076
10
20

I understand the logic on what you're doing, but the provided code is still printing as undefined... – whelanevan6 Dec 17 '18 at 13:42
Try to debug whether you are getting data in `e.target.result` – Deepak Kumar T P Dec 17 '18 at 13:45
I have updated the code with log statement – Deepak Kumar T P Dec 17 '18 at 13:47
e.target.result actually does contain the base64 encoded data. I can paste the data into an online image converter and it shows me the right image. Should I be setting the state to e.target.result or should it be imageAsUrl? – whelanevan6 Dec 17 '18 at 13:52
Try testing if you are getting data in `imageAsUrl` before setting state – Deepak Kumar T P Dec 17 '18 at 15:54

When encoding an image to base 64, the result is always undefined

1 Answers1