Xtykutl

I have two different file inputs and multiple textual/select inputs, that I'd like to upload to a PHP file using Ajax. The file inputs are meant to send images, and because they are two specific images that I'd like to identify by the name of the input, I do not want to use <input type="file" multiple>.

Currently I have the following (names have been changed to keep it simple):

<input type="file" name="file1">

<input type="file" name="file2">

<textarea name="text1"></textarea>

<button>Submit</button>

What I have tried is to push both to a variable once the change event of the file input gets fired, followed by the button press triggering the upload using Ajax.

$('input[type="file"][name="file1"]').on('change', prepareUpload);

$('input[type="file"][name="file2"]').on('change', prepareUpload);



files = new Array;



function prepareUpload(event){

    files.push(event.target.files);

}



$('button').on('click', uploadFiles);



function uploadFiles(event){



    $('#uploadInfo').html('Uploading...');

    event.stopPropagation();

    event.preventDefault();



    var data = new FormData();

    $.each(files, function(key, value){

        data.append(key, value);

    });



    data.append('text1', $('textarea[name="text1"]').val());



    $.ajax({

        url: '',

        type: 'POST',

        data: data,

        cache: false,

        dataType: 'json',

        processData: false,

        contentType: false, 

        success: function(result){

            //do stuff

        },

        error: function(error){

            console.log(error);

        }

    });

}

But this seems to do nothing. Is it even possible to append two image inputs to the same request using Ajax, or am I better off trying to put it in two different requests?

event.target.files is a array, so you need the first file in the array

function prepareUpload(event){

    files.push(event.target.files[0]);

}