CODEWITHSUNDEEP
javascriptphpjqueryajaxfile-upload
Adrian
Adrian

Reputation: 3

Uploading multiple files from different inputs using Ajax

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?

Upvotes: 0

Views: 572

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

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

function prepareUpload(event){
    files.push(event.target.files[0]);
}

Upvotes: 1

Related Questions