How to add custom header in ajax request using plain javascript (NOT JQUERY)?

Question

Please could someone advise on how to add a header to an AJAX request using plain javascript? I am trying to upload a video file to a server and want to let it know the file size and type of the file I am sending. I found someone solutions but this involved jQUERY which is not what I am after.

For example:

  Content-Length: 339108
  Content-Type: video/mp4

My AJAX request:

 var startUpload = function(){
        var formdata = new FormData();
        formdata.append('requestUpload', 'uploadTicket');

        var xmlhttp = new XMLHttpRequest;

        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var response = xmlhttp.responseText;

                if(response == '1'){

                    document.getElementById('UploadBox').innerHTML = '<div id="upWrap"><input type="file" id="vidInput"><button id="submitFile" onclick="">Upload Video<button></div>';

                }
            }
        }
        xmlhttp.open('POST', 'myFile.php');
        xmlhttp.send(formdata);
    }

uladzimir · Accepted Answer · 2016-10-08 19:30:41Z

3

You can use setRequestHeader method of XMLHttpRequest:

var xmlhttp = new XMLHttpRequest();

xmlhttp.setRequestHeader('Content-Type', 'video/mp4');
xmlhttp.setRequestHeader('Content-Length', '339108')

answered Oct 8, 2016 at 19:30

uladzimir

5,6897 gold badges34 silver badges51 bronze badges

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

1 Comment

Namo Over a year ago

You must call it after calling open()

Lukewcn · Accepted Answer · 2019-01-16 06:16:40Z

2

You must call it after calling open(), but before calling send()

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', url, true);
xhr.setRequestHeader('accept', 'application/json, text/plain, */*');

And not all headers canbe set, refer this Forbidden_header_name

Tip: Server side should Also support Cross-Origin Resource Sharing (CORS), like Access-Control-Allow-Origin

edited Jan 16, 2019 at 6:16

answered Jan 16, 2019 at 4:43

Lukewcn

6981 gold badge6 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to add custom header in ajax request using plain javascript (NOT JQUERY)?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related