Set AJAX Content Type with plain JavaScript (No JQuery)

Question

I'm working on form submission with AJAX but using plain JavaScript, no external libraries.

I've been having a problem when it comes to parsing the form as the PHP doesn't seem to be parsing the data correctly.

From some research on the internet, I've seen people set the content type to "false". The problem is however, they are are using JQuery to do this and I'm not sure how I do this in plain JavaScript.

I am only submitting a file and my PHP processes forms uploaded the traditional way perfectly. The AJAX also seems to work flawlessly and I see no fault in the code. Here is my upload function.

var fd = new FormData();
fd.append("upload-file", document.getElementById('upload-file').files[0]);

var xhr = new XMLHttpRequest();

/* I add some event listeners here for progress, load, error, and abort */

xhr.open("POST", "upload.php");
xhr.send(fd);

What content type do you need to set? And what page was suggesting that? — ItalyPaleAle
– ItalyPaleAle, Commented Oct 3, 2014 at 21:03
It was another question on here actually I found. stackoverflow.com/questions/24839009/… — Arcana
– Arcana, Commented Oct 3, 2014 at 21:06
The way to set the content type has been told you. But I have a feeling that was a workaround for jQuery. In your case, you need to do some debug to understand where the error is. With a network monitor (e.g. Chrome's Inspector window), can you see if the file is actually being uploaded? — ItalyPaleAle
– ItalyPaleAle, Commented Oct 3, 2014 at 21:08
I used the network tab in Firefox and from what I can see, it is uploading. It sends data of the correct size to upload.php. — Arcana
– Arcana, Commented Oct 3, 2014 at 21:16

helllomatt · Accepted Answer · 2014-10-03 21:07:19Z

3

In order to set the content type you need to modify the request header.

I don't know which content type you'd like to set, so I've defaulted to json.

Here's how you can set it:

var fd = new FormData();
fd.append("upload-file", document.getElementById('upload-file').files[0]);

var xhr = new XMLHttpRequest();

/* I add some event listeners here for progress, load, error, and abort */

xhr.open("POST", "upload.php");
xhr.setRequestHeader("Content-type","application/json");
xhr.send(fd);

EDIT: Setting HTTP request headers from MDN

answered Oct 3, 2014 at 21:07

helllomatt

1,3498 silver badges16 bronze badges

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

6 Comments

loveNoHate Over a year ago

You must call setRequestHeader() after open(), but before send(). developer.mozilla.org/en-US/docs/Web/API/…

Arcana Over a year ago

Thank you for the code and also where to put it! I've set it to image/jpeg as the image I am trying to upload is a jpeg. (I detect this in JavaScript, it should support various files) It doesn't seem to have solved my problem of the PHP parsing however. Any idea what content type I need for AJAX forms?

helllomatt Over a year ago

Yep! I didn't notice, but when you're uploading files via AJAX, you need to set the content type to be the same as if you were uploading it via a PHP form. Set it to multipart/form-data and let me know how that goes.

Arcana Over a year ago

I set it as multipart/form-data yet still no luck although it is different. Before I modified content-type, when I requested $_FILES["file"]["name"] it was blank, but now it gives "0"

Arcana Over a year ago

I feel very silly but you're completely right... I had an id/name mismatch. That works and my AJAX form works perfectly now. I'm new to the whole area of AJAX and file uploading in general so I assumed there was a problem with some of my code. Thank you very much for all the help!

|

Collectives™ on Stack Overflow

Set AJAX Content Type with plain JavaScript (No JQuery)

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related