Javascript for loop returning same value

Question

I have this JS function using which I'm using to upload files from HTML multi-file uploader to dropbox using Javascript SDK. It's working well. Now I'm trying to add list of file names that are failed to upload(when catch block executes) to a string named "failed", but it's adding the name of the first file for all the failed files. What am I doing wrong here?

function uploadFile() {
    var count1=0,count2=0,loop=0, failed='';
    const UPLOAD_FILE_SIZE_LIMIT = 150 * 1024 * 1024;
    var ACCESS_TOKEN = 'SomeAccessToken';
    var dbx = new Dropbox.Dropbox({
        accessToken: ACCESS_TOKEN
    });
    var fileInput = document.getElementById('file-upload');
    var formp= document.getElementById('formp');
    for (var i = 0; i < fileInput.files.length; i++) {
        formp.innerHTML='<p> Uploading ' + fileInput.files.length + ' files </p>' ;
       
        var file = fileInput.files[i];
        var filename = fileInput.files[i].name;
        if (file.size < UPLOAD_FILE_SIZE_LIMIT) { // File is smaller than 150 Mb - use filesUpload API
            dbx.filesUpload({path: '/Test/' + file.name, contents: file})
                .then(function(response) {


                    var results = document.getElementById('results');
                    var br = document.createElement("br");
                    results.appendChild(document.createTextNode(file.name + 'File uploaded!'));
                    results.appendChild(br);
                  count1=count1+1;
if(count1+count2==fileInput.files.length)
{
formp.innerHTML='<p> Uploaded ' + count1 + ' files. Failed ' + count2 + ' files</p>';
}
                    console.log(response);

                })

                .catch(function(error) {
                    count2=count2+1;
                    console.error(error);
                    failed+=file.name;
                   if(count1+count2==fileInput.files.length)
{
formp.innerHTML='<p> Uploaded ' + count1 + ' files. Failed '+ count2 + ' files</p>';
}
                     
                });
        }

}

Answer 1

As far as I have seen, I dint find anything wrong in this code. For testing purpose I commented few lines of your code and tested. The files names are properly concatenated to the "failed" string.

<form>
     <input type="file" id="formp" multiple="true" accept="*/*" />
</form>

<pre></pre>



$('#formp').change(function (event) {
    var count1=0,count2=0,loop=0, failed='';
    const UPLOAD_FILE_SIZE_LIMIT = 150 * 1024 * 1024;
    var ACCESS_TOKEN = 'SomeAccessToken';
/* var dbx = new Dropbox.Dropbox({
        accessToken: ACCESS_TOKEN
    }); */
    var fileInput = document.getElementById('formp');
    var formp= document.getElementById('formp');
    for (var i = 0; i < fileInput.files.length; i++) {
        formp.innerHTML='<p> Uploading ' + fileInput.files.length + ' files </p>' ;
       
            var file = fileInput.files[i];
            var filename = fileInput.files[i].name;
            failed+=file.name;
            console.log('Failed check', failed);
            if (file.size < UPLOAD_FILE_SIZE_LIMIT) { // File is smaller than 150 Mb - use filesUpload API
    //             dbx.filesUpload({path: '/Test/' + file.name, contents: file})
    //                 .then(function(response) {
    
    
    //                     var results = document.getElementById('results');
    //                     var br = document.createElement("br");
    //                     results.appendChild(document.createTextNode(file.name + 'File uploaded!'));
    //                     results.appendChild(br);
    //                   count1=count1+1;
    // if(count1+count2==fileInput.files.length)
    // {
    // formp.innerHTML='<p> Uploaded ' + count1 + ' files. Failed ' + count2 + ' files</p>';
    // }
    //                     console.log(response);
    
    //                 })
    
    //                 .catch(function(error) {
    //                     count2=count2+1;
    //                     console.error(error);
    //                     failed+=file.name;
    //                    if(count1+count2==fileInput.files.length)
    //                         {
    //                         formp.innerHTML='<p> Uploaded ' + count1 + ' files. Failed '+ count2 + ' files</p>';
    //                         }
                         
    //                 });
            }
        }
    
    });

Try the above code in jsFiddle.

There might be a chance that the first file name might be cached in file variable and might be displaying the same variable name for each and every loop again and again. So emptying the "file" variable at the end of the each loop might fix the issue.