Submitting a Form using AJAX in vanilla JavaScript (without the use of jQuery)

Question

Submitting a Form using AJAX in vanilla JavaScript (without the use of jQuery)

I'm looking for guidance on how to send a Form via an AJAX request. Specifically, I need help with the 'xmlhttp.open' line. The goal is to upload a video file to a third party video hosting site using their API and provided URL ('upload_link_secure'). Can anyone provide assistance?

Here's 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>

This is 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', );  // Need help completing this line???
        xmlhttp.send(vidFile);

    }

javascript ajax

Answer 1

Answer №1

Before anything else, make sure to correct the action attribute by changing it to a valid endpoint such as /upload.

Below is an example that demonstrates how to upload without server-side processing:

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>

Answer 2

Before anything else, make sure to correct the action attribute by changing it to a valid endpoint such as /upload.

Below is an example that demonstrates how to upload without server-side processing:

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>

Answer 3

Answer №2

Swap out the <button> element for a <span> element and add a click event handler to the #submitFile element. Use FormData() with XMLHttpRequest() to transmit the File object from the <input type="file"> .files object. Eliminate the action attribute in the <form> element, and specify the URL for the PUT request in XMLHttpRequest.prototype.open().

<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) {

      // ACCESS FILE OBJECTS
      var vidFile = document.getElementById('vidInput').files;

      var xmlhttp = new XMLHttpRequest;

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

      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>

Answer 4

Swap out the <button> element for a <span> element and add a click event handler to the #submitFile element. Use FormData() with XMLHttpRequest() to transmit the File object from the <input type="file"> .files object. Eliminate the action attribute in the <form> element, and specify the URL for the PUT request in XMLHttpRequest.prototype.open().

<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) {

      // ACCESS FILE OBJECTS
      var vidFile = document.getElementById('vidInput').files;

      var xmlhttp = new XMLHttpRequest;

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

      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>

Submitting a Form using AJAX in vanilla JavaScript (without the use of jQuery)

Answer №1

Answer №2

Similar questions

JavaScript animation not functioning properly when height is set to "auto"

What is the best way to locate the key with the greatest value in an array that is less than or equal to a certain

Remove the session variable when a JavaScript function is triggered

Web audio: setTimeout slows down when mobile screen is turned off

Issue with Github actions: Failure in mark-compacts process due to ineffective operation near heap limit causing allocation failure - running out of memory in

Efficiently making JQuery Ajax requests using HTTP Basic Authentication

Tips for setting multiple states simultaneously using the useState hook

Utilizing Redux state data in a hyperlink: A step-by-step guide

Enter the text value into the input field using live search through AJAX

The fitBounds and panToBounds functions in react-google-maps fail to properly adjust the map's size

A guide to delivering static images using NestJS

Validating input using jQuery Validate and implementing cross-domain remote validation with JSONP

most efficient method of sharing information between various angular controllers

Angular Search Version 2.0

An issue occurred while trying to retrieve the js file, as an error with code net::ERR_ABORTED 404 (Not

To access ES Module, importing is necessary

Is it possible to declare variables using the "this" keyword?

Setting up AntiXSS with .Net 3.5: A comprehensive guide

Tips for placing a marker at the center of the screen on Google Maps

Tips for adjusting border colors based on the current time