CODEWITHSUNDEEP
phpjqueryhtmlajax
Vadzim
Vadzim

Reputation: 296

A FormData object is always empty when trying to upload a file using AJAX

When trying to upload an image using AJAX without submitting the form directly and sending a FormData object to server it returns empty $_FILES array. But if I submit the form using <input type="submit"> tag $_FILES array is not empty and recieves the data.

HTML

<form action="core/update.php" method="post" enctype="multipart/form-data" id="profile-photo" name="profile-photo-form">
  <input type="file" id="photo-filename" name="avatar" class="edit-show panel photo-upload">
</form>
<button class="save-button" disabled="disabled">Save</button>

JS

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();

    var form = $('#profile-photo')[0];
    var formData = new FormData(form);

    formData.append('avatar', $('#photo-filename')[0].files[0]);

    $.ajax({
      url: "core/update.php", 
      data: formData,
      type: "POST", 
      contentType: false,       
      cache: false,             
      processData: false
    });

    console.log(formData);
});

$('.save-button').on('click', function() {
    if ($('#photo-filename').val != '') {
        $('#profile-photo').submit();
    };
}

UPD

Also $('#profile-photo').serialize() returns blank string.

UPD 2

Can it conflict with the other AJAX-requests on the page?

Upvotes: 4

Views: 14907

Answers (3)

PHP Worm...
PHP Worm...

Reputation: 4224

Try this:

Because user may upload multiple files

jQuery.each(jQuery('#photo-filename')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

Instead of

formData.append('avatar', $('#photo-filename')[0].files[0]);

Complete Solution:

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();

var form = $('#profile-photo')[0];
var formData = new FormData(form);

 jQuery.each(jQuery('#photo-filename')[0].files, function(i, file) {
    formData.append('file-'+i, file);
});

$.ajax({
  url: "core/update.php", 
  data: formData,
  type: "POST", 
  contentType: false,       
  cache: false,             
  processData: false
});

    console.log(formData);
});

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

If it is only the file you want to send then you can do it as below and no need to attach form here to formdata:

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();
    var formdata = new FormData();
    var fileInput = $('#photo-filename');


    //Use Either this
    $.each($(fileInput).get(0).files, function (index, value) {
           formdata.append('avatar', value);
    });

    //Or this
    $.each($(fileInput).get(0).files, function (index, value) {
        formdata.append(value.name, value);
    });

    //For single file use this
    formData.append('avatar', $('#photo-filename')[0].files[0]);

    $.ajax({
      url: "core/update.php", 
      data: formData,
      type: "POST", 
      contentType: false,       
      cache: false,             
      processData: false
    });

    console.log(formData);
});

Upvotes: 0

Ashwani Goyal
Ashwani Goyal

Reputation: 616

Try the following, 

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this); // here I am editing

    formData.append('avatar', $('#photo-filename')[0].files[0]);

    $.ajax({
      url: "core/update.php", 
      data: formData,
      type: "POST", 
      contentType: false,       
      cache: false,             
      processData: false
    });

    console.log(formData);
});

Upvotes: 0

Related Questions