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

Question

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?

possible duplicate of Sending multipart/formdata with jQuery.ajax — PHP Worm...
– PHP Worm..., Commented Jun 5, 2015 at 13:02
Why are you adding the file input twice? It is already in the form that you add using new FormData(form). — jeroen
– jeroen, Commented Jun 5, 2015 at 13:02
Just in case. I tried a lot of variants of adding data but FormData is empty. — Vadzim
– Vadzim, Commented Jun 5, 2015 at 13:06
Musa, the request is being sent. Request payload: ------WebKitFormBoundarykKBm9n5RL1SEIQD5 Content-Disposition: form-data; name="avatar"; filename="s369unD7-50[2].jpg" Content-Type: image/jpeg ------WebKitFormBoundarykKBm9n5RL1SEIQD5-- — Vadzim
– Vadzim, Commented Jun 5, 2015 at 13:45

PHP Worm... · Accepted Answer · 2015-06-05 13:30:55Z

2

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);
});

answered Jun 5, 2015 at 13:30

PHP Worm...

4,2341 gold badge28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

PHP Worm... Over a year ago

I guess there is nothing wrong in your code you might be checking contents on update.php by $_POST you must use $_FIELS

Vadzim Over a year ago

No, I'm checking $_FILES array and it returns Array()

PHP Worm... Over a year ago

Is this written on your update.php if($_SERVER['REQUEST_METHOD'] == 'POST'){ echo "<pre>"; print_r($_FILES); }

PHP Worm... Over a year ago

change it to print_r($_FILES);

PHP Worm... Over a year ago

This is what I have mentioned in my first comment

|

Ashwani Goyal · Accepted Answer · 2015-06-05 12:49:27Z

0

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);
});

answered Jun 5, 2015 at 12:49

Ashwani Goyal

6264 silver badges18 bronze badges

1 Comment

Vadzim Over a year ago

It didn't worked :( Also, the FormData obj looks like this: dropbox.com/s/g8gnrby1egwtveo/…

Guruprasad J Rao · Accepted Answer · 2015-06-05 13:06:10Z

0

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);
});

answered Jun 5, 2015 at 13:06

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

4 Comments

Vadzim Over a year ago

Still nothing. Neither the first solution nor the second.

Guruprasad J Rao Over a year ago

Can you just show how you are submiting the form??

Vadzim Over a year ago

Clicking on <button class="save-button"></button> object fires a function if ($('#photo-filename').val != '') { $('#profile-photo').submit(); };

Guruprasad J Rao Over a year ago

Can you edit the question and insert it in question? the whole process??

Collectives™ on Stack Overflow

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

3 Answers 3

8 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related