Javascript file reader does not get stored in array

Question

I am trying to upload multiple images. So I read that I can generate a temporary url and send them with ajax.

The idea is push the url created with filereader into an array and the send with ajax but the url's are not pushed properly. When I see the result I got like an empty array:

But if I click the arrow I can see the url's inside

But them seems Inaccessible.

This is my code:

$('form').on('submit',function(e) {

        e.preventDefault();

        var filesToUpload = document.getElementById("myFile");
        var files = filesToUpload.files;
        var fd = new FormData();
        var arr = [];

        if (FileReader && files && files.length) {

            for (i=0; i< files.length; i++){


                (function(file) {

                    var name = file.name;
                    var fr = new FileReader();  


                    fr.onload = function () {

                            arr.push(fr.result);

                    }

                    fr.readAsDataURL(file);

                })(files[i]);

            }

            console.log(arr);

        }


    });

The final idea is convert to string JSON.stringify(arr) and then parse in php json_decode($_POST['arr']).

Of course this is not working because JSON.stringify(arr) gets empty.

AS Jaromanda hints already, you have a timing problem here: you can see what is happening, when you put your console.log() into the fr.onload() function. The array is gradually being built up. Your current console.log is currently fired far too early. You could try and bundle your asynchronous requests into a when() / then() construct (look under "promises"). — Carsten Massmann
– Carsten Massmann, Commented Mar 27, 2017 at 5:00
If you are going to send it to the server, why do you send all these images as text ? You could simply send it as MultiPart (directly from your blobs), and if you really need a b64 version, then do the conversion server-side. — Kaiido
– Kaiido, Commented Mar 27, 2017 at 6:24
hey guys, noted, will take a deep look into this your advices... they answer below helped me — Tomas Lucena
– Tomas Lucena, Commented Mar 27, 2017 at 6:54

Carsten Massmann · Accepted Answer · 2017-03-27 05:28:22Z

2

Maybe the following simple solution works for you? I placed your console.log() and your ajax call into the fr.onload() method but fire it only, after your results array has been filled up with all values:

$('form').on('submit',function(e) {
        e.preventDefault();
        var filesToUpload = document.getElementById("myFile");
        var files = filesToUpload.files;
        var fd = new FormData();
        var arr = [];
        if (FileReader && files && files.length) {
            for (var i=0; i< files.length; i++){
                (function(file) {
                    var name = file.name;
                    var fr = new FileReader();  
                    fr.onload = function () {
                            arr.push(fr.result);

                            if(arr.length==files.length) {
                              console.log(arr);
                              // place your ajax call here!
                            }
                        }
                       fr.readAsDataURL(file);
                })(files[i]);
            }
        }
});

answered Mar 27, 2017 at 5:28

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

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

1 Comment

Tomas Lucena Over a year ago

hey mate, this works perfectly, thanks for taking the time.

Collectives™ on Stack Overflow

Javascript file reader does not get stored in array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related