Question: I'm uploading multiple files with form field

```
<input type="file" accept="image/jpeg, image/png" multiple 

```

a loop sends all files to upload function 

```
       // Upload photo function
            var upload = function (photo, callback) {
                var formData = new FormData();
                formData.append('photo', photo);
                var request = new XMLHttpRequest();
                request.onreadystatechange = function() {
                    if (request.readyState === 4) {
                        callback(request.response);
                    }
                }
                request.open('POST', 'upload.php');
                request.responseType = 'json';
                request.send(formData);
            };  

    for (var i = 0; i < files.length; i++) {
        upload(resizedFile, function (response) { });
    }

```

if all files are successfully uploaded, want to redirect ..

```
//all files finished, go to ...
if(response !== null && typeof response !== 'object') var response = JSON.parse(response);
window.location.href = "my-new-url.php?id="+response.id;

```

my problem, the redirect is done before all uploads are finished. how can I make the script wait for all xmlhttprequests to finish?

---

EDIT
----

I changed the upload function like this, to upload with jQuery. The fuction is called several times from the for loop, so how can I wait for all loops/jquery calls are finished, then redirect?

```
function upload (photo, callback) {
        var fd = new FormData();
        fd.append('photo',photo);

        return $.ajax({
            url: 'upload.php',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){

            },
        });
    };

```

Answer: 
You need to add `Accept` header in your ajax request. Then your backend will give proper json or it will return plain text.

$('.calculateField').on('input', function (e) {

```
var requestData = $('.calculateField').val();

$.ajax({
    url: '/InsurancePolicyContract/CalculatePurePrice',
    type: 'POST',
    data: JSON.stringify(requestData),
    headers: {
      "Accept": "application/json"
    },
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        $('#test1').text(response);
    },
    error: function (response) {
        alert(response.responseText);
    },
    failure: function (response) {
        alert(response.responseText);
    }
});

```

});
For your issue, it is caused by `dataType: 'json'` which is telling jQuery what kind of response to expect. For plain test without `""`, it will fail to convert to json. If you enter `"test"` in the input, it will work, but if you enter `test` directly, it will fail since there is no extra `""`.

For a workaround, you could remove `dataType: 'json'` like 

```
    $.ajax({
            url: '/api/movie/CalculatePurePrice',
            type: 'POST',
            data: JSON.stringify(requestData),
            //dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                    $('#test1').text(response);
            },
            error: function (response) {
                    alert(response.responseText);
            },
            failure: function (response) {
                    alert(response.responseText);
            }
    });

```