$_FILES[] is empty in jQuery generated form

Question

I generated the next form in jQuery:

$('.content').append('
<form name="make_new_model_release" enctype="multipart/form-data">
<input data-validate="validate" type="text" name="new_model_release_title" placeholder="Enter new model release title" />
<input type="file" name="newModelReleaseFile" id="newModelReleaseFile" />
<input type="submit" value="Create new model release" />
</form>');

Server side simple:

var_dump($_FILES);

AJAX code:

var data = form.serialize();
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: formurl,
    data: data,
    beforeSend: function(data) {
        form.find('input[type="submit"]').attr('disabled', 'disabled');
    },
    success: function(data) {
        console.log(data);
    },
    complete: function(data) {
        form.find('input[type="submit"]').prop('disabled', false);
    }
});

after submitting the $_FILES array is empty.

1. I checked php.ini

file_uploads=On | upload_max_filesize=128M | post_max_size=128M

2. Temp folder is allowed for read and write

3. I tried to make data: new FormData(formId) - nothing changed, $_FILES array is empty.

Answer 1

If you used jQuery('#dailyActivity').serialize(),
It it is not working for <input type'file'>
Have look at this jsFiddle Does not works

and this one .serialize()

Data from file select elements is not serialized.

Have look at this https://stackoverflow.com/a/8758614/3425489

In you case try this

To send <input type'file'> you may want to try this

var formData = new FormData($('form')[0]);

or specify exact data for formdata

var formData = new FormData();
// Append your other Data
formData.append('newModelReleaseFile', $('input[type=file]')[0].files[0]); 

And you ajax call will be

$.ajax({
    type: 'POST',
    url: formurl,
    data: formData,
    // THIS MUST BE DONE FOR FILE UPLOADING
    contentType: false,
    processData: false,
    beforeSend: function(data) {
        form.find('input[type="submit"]').attr('disabled', 'disabled');
    },
    success: function(data){
        console.log(data);
    },
    complete: function(data) {
        form.find('input[type="submit"]').prop('disabled', false);
    }
});