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](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — PHP Worm..., Jun 05 '15 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, Jun 05 '15 at 13:02
Just in case. I tried a lot of variants of adding data but FormData is empty. — Vadzim, Jun 05 '15 at 13:06
Check the network tab and see if the data is being sent to the server. — Musa, Jun 05 '15 at 13:34
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, Jun 05 '15 at 13:45

score 2 · Accepted Answer · answered Jun 05 '15 at 13:30

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 05 '15 at 13:30

PHP Worm...

4,109
1
25
48

I guess there is nothing wrong in your code you might be checking contents on `update.php` by `$_POST` you must use `$_FIELS` – PHP Worm... Jun 05 '15 at 13:32
No, I'm checking `$_FILES` array and it returns Array() – Vadzim Jun 05 '15 at 13:41
Is this written on your update.php `if($_SERVER['REQUEST_METHOD'] == 'POST'){ echo "
```
";
 print_r($_FILES);
}`
```
– PHP Worm... Jun 05 '15 at 13:51
change it to `print_r($_FILES);` – PHP Worm... Jun 05 '15 at 13:58
This is what I have mentioned in my first comment – PHP Worm... Jun 05 '15 at 13:58
`$_FILES` array is also blank. – Vadzim Jun 05 '15 at 14:00
Every thing is working fine at my end. You must check other part of your code – PHP Worm... Jun 05 '15 at 14:04
This is obviously NOT the right answer. It is his right to only append the first file! – stackoverflowed Jun 10 '21 at 07:52

score 0 · Answer 2 · answered Jun 05 '15 at 12:49

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 05 '15 at 12:49

Ashwani Goyal

616
4
18

It didn't worked :( Also, the FormData obj looks like this: https://www.dropbox.com/s/g8gnrby1egwtveo/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA.JPG?dl=0 – Vadzim Jun 05 '15 at 12:53

score 0 · Answer 3 · answered Jun 05 '15 at 13:06

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 05 '15 at 13:06

Guruprasad J Rao

29,410
14
101
200

Still nothing. Neither the first solution nor the second. – Vadzim Jun 05 '15 at 13:11
Can you just show how you are `submiting` the `form`?? – Guruprasad J Rao Jun 05 '15 at 13:15
Clicking on `` object fires a function `if ($('#photo-filename').val != '') { $('#profile-photo').submit(); };` – Vadzim Jun 05 '15 at 13:19
Can you edit the question and insert it in question? the whole process?? – Guruprasad J Rao Jun 05 '15 at 13:20

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

3 Answers3