AJAX Post to PHP with JSON Object containing a File

Question

I'm trying to attach a file to an email that is inside of a JSON object being posted to my PHP script.

The posted JSON appears as:

{  
   data:{  
      "sendto":"[email protected]",
      "name":"John Smith",
      "contem":"[email protected]",
      "mess":"This is a test",
      "subj":"Test"
   },
   file:{  
      "webkitRelativePath":"",
      "lastModified":1389280265000,
      "lastModifiedDate":"2014-01-09T15:11:05.000Z",
      "name":"test.pdf",
      "type":"application/pdf",
      "size":6437
   }
}

My PHP handles all of the "data" attributes just fine, but when I try to check for the file, I get:

Notice:  Undefined index: file in My\Website\Location\script.php on line 20

And Line 20 is:

$file = $_FILES['file'];

Is this index undefined because it's within a JSON object?

I've also tried:

$file = $_FILES[json_decode(stripslashes($_POST['file']), true)];

Thinking since the file is within a JSON object, it first needs decoded. However, this returned:

Warning:  Illegal offset type in My\Website\Location\script.php on line 20

I think the issue for the illegal offset had something to do with trying to set $_FILES to a JSON object, yes?

When I try to simply set the $_POST['file'] into the $_FILES array:

$file = $_FILES[$_POST['file']];

I receive:

Notice:  Undefined index: {"webkitRelativePath":"","lastModified":1389280265000,"lastModifiedDate":"2014-01-09T15:11:05.000Z","name":"test.pdf","type":"application/pdf","size":6437} in My\Website\Location\script.php on line 20

Showing the uploaded file as a JSON object.

What am I missing here? How can I get the uploaded file from my AJAX post?

ANSWER

As noted about the multiform/form-data content type, I changed the way I sent the form data.

Rather than using an object with a file inside of it:

var d = new FormData();
var data = {};
data.sendto = '[email protected]';
data.name = $('#puName').val();
data.contem = $('#puEmail').val();
data.mess = $('#puMess').val();
data.subj = 'User Permissions';
d.append('data', JSON.stringify(data));
$.each($('#puFile')[0].files, function(i, file) {
     d.append('file-'+i, file);
});
sendEmail(d);

I sent a FormData object directly to the PHP script.

function sendEmail(d){
    $.ajax({
        url: "script.php",
        data: d,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function () {
            alert("Cool");
        },
        error: function (e) {
            alert("Not Cool");
        }
    });
}

The FormData was made of an JSON object for my data, and the selected File.

PHP then read the form data like:

$data = json_decode(stripslashes($_POST['data']), true);
$file = $_FILES['file-0'];

Now my email is sending correctly.

Your JSON is badly formed. Test is at jsonlint.com

Jay Blanchard
– Jay Blanchard

2014-12-29 18:07:17 +00:00
Commented Dec 29, 2014 at 18:07 — Jay Blanchard
– Jay Blanchard, Commented Dec 29, 2014 at 18:07

Mike Brant · Accepted Answer · 2014-12-29 20:54:41Z

4

$_FILES superglobal will only be created when multipart/form-data content-type is set for the POST and would include the actual file being POSTed, not a local reference to that file. Instead you are sending a JSON request (hopefully with an appropriate application/json content-type). This is not going to populate $_FILES. Unless your receiving script has the ability to take the path information provided and access the file in question, your POSTing script will actually need to send the file as part of the POST.

Uploading files via AJAX is best handled using specific AJAX upload libraries that are meant to do this, which basically utilize workarounds to the fact that you really can't POST a file asynchronously natively in browsers.

edited Dec 29, 2014 at 20:54

answered Dec 29, 2014 at 18:17

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

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

3 Comments

evv_gis Over a year ago

Thanks - so rather than creating an object with my form components, I should 1. Submit my entire form to the PHP script, and 2. Change my contentType in my AJAX post to "multipart/form-data"?

Mike Brant Over a year ago

This is probably THE authoritative SO post about asynschronous file upload - stackoverflow.com/questions/166221/… Read the first few answers for very important considerations on what you are trying to do.

evv_gis Over a year ago

This answer put me on the right path. See above for changes made to get this to work.

Domain · Accepted Answer · 2014-12-29 18:30:47Z

0

Have you tried something like this -

Copy the json code in a variable say 'a' and then, decode it i.e. json_decode(a), then a->file

answered Dec 29, 2014 at 18:30

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Collectives™ on Stack Overflow

AJAX Post to PHP with JSON Object containing a File

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related