JSFiddle - React, Tailwind, and code Playground

HTML

<form action="sadasd" name="myForm">
    <input type="submit" value="submit">
</form>
    
    <p><strong>Make sure your form name attribute value will be same as document.<span style="color: green;">form_name_value</span>.addEventListener</strong></p>

JavaScript

window.addEventListener('load', function() {
    document.myForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        var actionURL = this.action; // will get the form action url
        uploadfile(actionURL); // your upload event with request url
    });
    
    function _(el) {
        return document.getElementById(el);
    }
    
    function uploadfile(url) {
      var file = _("file").files[0];
      // dev
      alert(file.name+" | "+file.size+ " | "+" | "+file.type);
      var formdata = new FormData();
      formdata.append("file", file);
      var ajax = new XMLHttpRequest();
      
      var metas = document.getElementsByTagName('meta'); 

      for (i=0; i<metas.length; i++) { 
          if (metas[i].getAttribute("name") == "csrf-token") {  
                ajax.setRequestHeader("X-CSRF-Token", metas[i].getAttribute("content"));
          } 
      }
        
      ajax.upload.addEventListener("progress", progressHandler, false);
      ajax.addEventListener("load", completeHandler, false);
      ajax.open("POST", url); // your url will pass to open method
      ajax.send(formdata);
    }
    
    function progressHandler(event) {
       _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + "bytes of "+ event.total;
       var percent = (event.loaded / event.total) * 100;
       _("progressBar").value = Math.round(percent);
       _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
    }
    
    function completeHandler(event) {
      _("status").innerHTML = event.target.responseText;
      _("progressBar").value = 0;
    } 
});