Angularjs get file url using FileReader

Question

element.bind('change', function () {

                var file = element[0].files[0];
                console.log(file);
                var reader = new FileReader();
                var url1 = reader.readAsDataURL(file);
                console.log(url1);
            });

I have used this in my directive. When I console file it displays file name, last modified date etc. But when I console url1 it is showing undefined. How can I get image url using file reader. Thank you.

Ignacio Ara · Accepted Answer · 2018-05-10 15:10:35Z

1

You should check reader object instead of assigning it to a variable:

element.bind('change', function () {
    var file = element[0].files[0];
    console.log(file);
    var reader = new FileReader();
    reader.readAsDataURL(file);
    console.dir(reader);
    });

Result:

FileReader    error    :    null
onabort    :    null
onerror    :    null
onload    :    ƒ (e)
onloadend    :    null
onloadstart    :    null
onprogress    :    null
readyState    :    2
result    :    "data:image/png;base64,iVBORw0K[...]

answered May 10, 2018 at 15:10

Ignacio Ara

2,5702 gold badges28 silver badges37 bronze badges

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

3 Comments

Ignacio Ara Over a year ago

JSFiddle, check it again, its not the same... clue: two last lines

e.k Over a year ago

Thank you. Can you know the reason why it hasn't worked when I set the result to url1? Knowing the reason will be very helpful.

Ignacio Ara Over a year ago

I think that it has something to do with the onload function, which is asynchronous. If you check console you'll see that it takes a while to appear the result so using reader.onload = function(){[Here you'll have the value]);};

Collectives™ on Stack Overflow

Angularjs get file url using FileReader

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related