Javascript variable not changing inside onload function

Question

this code always return me '3' in alert.

I select two files together (ones .mp4 format and second ones .zip format)

    function readFile(input) {
        var counter = input.files.length;
        for(x = 0; x<counter; x++){
            if (input.files && input.files[x]) {
                var extension = input.files[x].name.split('.').pop().toLowerCase();
                var reader = new FileReader();

                reader.onload = function (e) {
                    urlss = 1;
                    if(extension == 'mp4'){
                        urlss = 2;
                    }else{
                        urlss = 3;
                    }
                    alert(urlss);
                };
                reader.readAsDataURL(input.files[x]);
            }
        }
    }

<input type="file" id="files" name="files[]" accept=".png, .jpg, .jpeg, .zip, .mp4" onchange="readFile(this);" multiple />

@AbhisarTripathi this is full code. it read files form an input file. — ali ali
– ali ali, Commented Aug 24, 2019 at 14:43

Maxim Pyshko · Accepted Answer · 2019-08-24 15:25:50Z

2

That is because of var hoisting

The onload function calling after the for was ended and extension == last file extension

Try replace var with const:

function readFile(input) {
    var counter = input.files.length;
    for(let x = 0; x < counter; x++){
        if (input.files && input.files[x]) {
            const extension = input.files[x].name.split('.').pop().toLowerCase();
            const reader = new FileReader();

            reader.onload = function (e) {
                urlss = 1;
                if(extension == 'mp4'){
                    urlss = 2;
                }else{
                    urlss = 3;
                }
                alert(urlss);
            };
            reader.readAsDataURL(input.files[x]);
        }
    }
}

Update

Please check the Webber's comment below.

edited Aug 24, 2019 at 15:25

answered Aug 24, 2019 at 15:11

Maxim Pyshko

5804 silver badges15 bronze badges

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

1 Comment

Webber Over a year ago

So the real problem actually was that the reader.onload gets overridden in every iteration. It would be better if you define 1 FileReader, that has one onload function, and run readAsDataURl once per iteration on that single file reader. This answer creates a separate file reader for every file that is read.

Collectives™ on Stack Overflow

Javascript variable not changing inside onload function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related