Get base64 image with javascript

Question

i need to upload an image by an input file, convert it to base64 and send it to an API using ajax. I can convert the image but can't return the base64 into a variable to make the json. Here is my code:

HTML

<input id="picture" type="file">

JS

const picture = document.getElementById("picture")

function loadImageFileAsURL() {
    var filesSelected = picture.files;
    if (filesSelected.length > 0) {
        var fileToLoad = filesSelected[0];
        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) {
            console.log(fileLoadedEvent.target.result);
        }

        fileReader.readAsDataURL(fileToLoad);
    }
}

picture.addEventListener('change', function() {
    loadImageFileAsURL()
})

It returns the base64 image in the console.

So i'm try to save this into a variable changing this: console.log(fileLoadedEvent.target.result); by this: let pictureEnconde = fileLoadedEvent.target.result; but it returns undefined. I don't know what's going on :( i will appreciate your help.

ferhado · Accepted Answer · 2018-07-17T00:23:43.010

0

Here is an Example may help you:

var file=null;

function toBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     file=reader.result
     console.log(file);
   };
}

<input type="file" onchange="toBase64(this.files[0])">

edited Jul 17 '18 at 00:23

answered Jul 17 '18 at 00:00

ferhado

2,363
2
12
35

thanks for your answer, it shows the result into the console just like my code, but what i really need is store it into a variable. – Ken Ramirez Jul 17 '18 at 00:04
You can declare any variable instead console.log like `var file=reader.result`. what is exactly the problem? – ferhado Jul 17 '18 at 00:08
Yes i did it, but then returns undefined :( – Ken Ramirez Jul 17 '18 at 00:20
Declare your variable on the top and override it in the onload function check the Update; – ferhado Jul 17 '18 at 00:23
Lol, i tried the same some hours ago but didn't work, now it did. Thank you so much! – Ken Ramirez Jul 17 '18 at 00:28

Get base64 image with javascript

1 Answers1