HTML Post images after resize from jquery with other inputs

Question

I have used this git project to resize images before uploading and in that it post the data as soon as user select the photos. But I want to send(post) those images along with other input fields once the user hit the Submit button. So my html code is,

  <form  action="process.php" method="post"  id="uploadImageForm" enctype="multipart/form-data">
        <input type="file" name="fileToUpload[]" accept="image/jpeg, image/png"  multiple />
        <input type="text" name="Text1">
        -- other input fields --
        <input type="submit" value="Upload Image" name="submit">
 </form>

In the jquery upload function is called for every image

 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', './process.php');
    request.responseType = 'json';
    request.send(formData);
 };

by this function

document.querySelector('form input[type=file]').addEventListener('change', function (event) {
    event.preventDefault();

    var files = event.target.files;
    for (var i in files) {

        if (typeof files[i] !== 'object') return false;

        (function () {

            var initialSize = files[i].size;

            resize.photo(files[i], 1200, 'file', function (resizedFile) {

                var resizedSize = resizedFile.size;
               // upload happens here, note that upload() is running for each image seperately
                upload(resizedFile, function (response) {
                     //callback function for each upload
                });

            });

        }());

    }

});

Please note that the resized images are come to "resizedFile" variable as expected. So what I did was append the "resizedFile" variable in to the formData object.

Now I want to send this when submit button clicked along with the other inputs.

Another major issue I'm facing is to take "formData" variable out of the Eventhandler, so that I can try something. So is there a way that I can take this to a global variable? Since in the jquery code i'm using they use 'use strict', can we do that?

I found this question related to mine, but I couldn't implement that because I dont understand what he ment by "imageResized".