Ajax response 0 when using processData and contentType. Input='file[]'

Question

html:

<input id="fileSelect" type="file" name="files[]" multiple="multiple" accept="image/*" />

js:

alert( filesArray );
3 three images.// 
// [object File],[object File],[object File]

// new FormData object.
var formData = new FormData();
formData.append( 'files[]', filesArray );

jQuery.ajax
({
    url: ajaxurl, // uploadfile.php
    type: "POST",
    data:   {
                action: 'auto_post',
                form_data: formData
    },
    processData: false,
    contentType: false,
    success: function( data )
    {
       alert( data );
    },
    error: function( data )
    { }
});

When i don't use:

processData: false,
contentType: false,

I got: (error)

TypeError: 'append' called on an object that does not implement interface FormData.

What to do now? I need the the formData to send to the php server side using ajax.

uploadfile.php

I need to access like this here:

$_FILES["files"]["name"];

Ajax data get here:

// Ajax Funtion.
function aap_auto_post()
{
    echo $_FILES['files']['name'];
    die();
}
add_action( 'wp_ajax_auto_post', 'aap_auto_post' );
add_action( 'wp_ajax_nopriv_auto_post', 'aap_auto_post' );

score 2 · Accepted Answer · answered Jan 17 '15 at 18:15

2

All values sent in an ajax request must be appended to the FormData object, not just the files. Also the files have to be added individually.

var formData = new FormData();
for (var i = 0; i < filesArray.length; i++){
    formData.append( 'files[]', filesArray[i]);
}
formData.append( 'action', 'auto_post');
...
data: formData,

answered Jan 17 '15 at 18:15

Musa

96,336
17
118
137

what's this: `formData.append( 'action', 'auto_post');` – Hassan Ali Jan 17 '15 at 18:19
That's the action parameter you're trying to post – Musa Jan 17 '15 at 18:20
getting the same thing: `TypeError: 'append' called on an object that does not implement interface FormData.` – Hassan Ali Jan 17 '15 at 18:23
its in `jquery.1.11.js` file: `...,d=[],e=function(a,b){b=m.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURICo...` – Hassan Ali Jan 17 '15 at 18:29
Does the console have a stack trace? You can use that to find the line in your own code. – Musa Jan 17 '15 at 18:32
i am using firefox. i don't know about the stack trace thing. I saw this post [link](http://stackoverflow.com/questions/25390598/append-called-on-an-object-that-does-not-implement-interface-formdata) which said use `processData: false, contentType: false,` but then i get 0 response from the ajax. – Hassan Ali Jan 17 '15 at 18:36
1

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69034/discussion-between-musa-and-hassan-ali). – Musa Jan 17 '15 at 18:37

score 0 · Answer 2 · answered May 18 '17 at 11:42

Use the id to select the form like this

$('form#YOUR_FORM_ID').submit(function(e){
 e.preventDefault();   
 var formData = new FormData($(this)[0]);
 $.ajax({
   url: 'YOUR_SERVER_URI',
   type: 'POST',
   data: formData,
   async: true,         
   success: function (data) { 
         alert(data);
   },
   cache: false,
   contentType: false,
   processData: false
   });  
      return false;

});

This will process the $_FILES as well on the server side. Do it as you do it normally.

Ajax response 0 when using processData and contentType. Input='file[]'

2 Answers2