JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.23.0/axios.min.js"></script>
  <input type="file" name='name' placeholder="Select file"/>
  <button>upload</button>

JavaScript

const inp = document.querySelector("input");
const btn = document.querySelector("button");

btn.addEventListener("click", (e) => {
	e.preventDefault();
  const formdata = new FormData();
formdata.append("name", inp.files[0], inp.files[0].name);

console.dir(inp.files[0]);

var requestOptions = {
  method: 'POST',
  body: formdata,
  redirect: 'follow'
};

/* fetch("http://localhost:3000/files/upload", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
 */

axios.request({
    method: "post", 
    url: "http://localhost:3000/files/upload", 
    data: formdata, 
    onUploadProgress: (p) => {
      console.log(p); 
      //this.setState({
          //fileprogress: p.loaded / p.total
      //})
    }
}).then (data => {
    //this.setState({
      //fileprogress: 1.0,
    //})
})


})