Sending Form via AJAX in plain javascript (no jQuery)

Question

I have the following Form which I would like to send via an AJAX request. I am unsure how to proceed in the line 'xmlhttp.open'. I am trying to upload a video file to a third party video hosting site (using their API)and they have provided me with a URL ('upload_link_secure')to upload the file to. Please can someone advise?

my HTML:

<form id="upload" action="'+upload_link_secure+'" method="PUT" enctype="multipart/form-data">
  <input type="file" id="vidInput">
  <button type="submit" id="submitFile" onclick="uploadMyVid(\''+upload_link_secure+'\')">Upload Video</button>
</form>

my javascript:

 var uploadMyVid = function(upload_link_secure){

        var form = document.getElementById('upload')

        // FETCH FILEIST OBJECTS
        var vidFile = document.getElementById('vidInput').files;

        var xmlhttp = new XMLHttpRequest;

        xmlhttp.open('PUT', );  // NOT SURE HOW TO COMPLETE THIS LINE???
        xmlhttp.send(vidFile);

    }

It's a bit more complicated than just sending a complete fileList, but basically the arguments are .open(method, url) so you have to add the URL to upload to. — adeneo
– adeneo, Commented Oct 8, 2016 at 22:10
i think you can complete it based on documentation developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open — Smile0ff
– Smile0ff, Commented Oct 8, 2016 at 22:12
i'm a little confused with the 'action' attribute in the Form element. My thoughts are this element would send the file to the url. Would i still need to duplicate this request at the xmlhttp.open line... — dave
– dave, Commented Oct 8, 2016 at 22:12
if you make sync request you don't need to specify action url, but in your case, you did async request, so XHR don't know anything about your endpoint, yes you need to set it explicitly — Smile0ff
– Smile0ff, Commented Oct 8, 2016 at 22:15
Are you trying to send the files using <form> or XMLHttpRequest()? — guest271314
– guest271314, Commented Oct 8, 2016 at 22:25

TIGER · Accepted Answer · 2018-04-11 15:21:09Z

6

First of all your action attribute not correct, change to some endpoint like /upload for example.

Here is a simple example without server side.

var form = document.getElementById("upload-form"),
        actionPath = "";
        formData = null;

    var xhr = new XMLHttpRequest();

    form.addEventListener("submit", (e) => {
        e.preventDefault();
        
        formData = new FormData(form);
        actionPath = form.getAttribute("action");

        xhr.open("POST", actionPath);
        xhr.send(formData);

    }, false);

<form id="upload-form" action="/upload" method="POST" enctype="multipart/form-data">
      <input type="file" id="file">
      <button type="submit">Upload Video</button>
</form>

edited Apr 11, 2018 at 15:21

TIGER

2,9055 gold badges38 silver badges46 bronze badges

answered Oct 8, 2016 at 23:02

Smile0ff

7988 silver badges18 bronze badges

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

1 Comment

JoeMecPak Over a year ago

This solution will work, but you'll need to define the xhr variable first.

guest271314 · Accepted Answer · 2016-10-08 23:17:36Z

Substitute <span> element for <button> element, use click event handler attached to #submitFile element; FormData() at XMLHttpRequest() to send File object within <input type="file"> .files object; remove action attribute at <form> element, set URL of XMLHttpRequest.prototype.open() to URL provided for PUT request

<body>
  <form id="upload">
    <input type="file" id="vidInput">
    <span id="submitFile" 
      style="-webkit-appearance:button;-moz-appearance:button;padding:4px;font-family:arial;font-size:12px">Upload Video</span>
  </form>
  <script>
    function uploadMyVid(event) {

      // FETCH FILEIST OBJECTS
      var vidFile = document.getElementById('vidInput').files;

      var xmlhttp = new XMLHttpRequest;

      xmlhttp.open('PUT', "upload_link_secure");

      var data = new FormData();
      data.append("file", vidFile[0], vidFile[0].name);

      xmlhttp.send(data);

    }

    var button = document.getElementById("submitFile");
    button.addEventListener("click", uploadMyVid);
  </script>
</body>

Collectives™ on Stack Overflow

Sending Form via AJAX in plain javascript (no 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