JSFiddle - React, Tailwind, and code Playground

by rowntreerob

HTML

<label for="files">Select Photo </label>
  <input id="files" type="file" accept="image/png, image/jpeg" style="height: 320px; font-size:18px"/>
 
  <input type="button" value="Upload" id="submit" />

JavaScript

document.getElementById("submit").addEventListener("click", async () => {
  const fileInput = document.getElementById("files");
  const file = fileInput.files[0];
  const filename = file.name;
console.log(filename)

  let url = `http://localhost:3000/labelai/${filename}`
  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
"application":"awsgcpupld-production.up.railway.app",
"content-type":"application/octet-stream",
"authorization":"Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Inh5emFzZGYiLCJpYXQiOjE2ODE5NDIyNTEsImV4cCI6MTY4NDQ0MjI1MSwiYXVkIjoiYXdzZ2NwdXBsZC1wcm9kdWN0aW9uLnVwLnJhaWx3YXkuYXBwIiwiaXNzIjoic2FtcGxlZXhwcmVzcy1wcm9kdWN0aW9uLnVwLnJhaWx3YXkuYXBwIiwic3ViIjoicm93bnRyZWVyb2JAeWFob28uY29tIn0.pX2Y0Gatujbi7xqc5KuN4AFLlyPTjz7F2e_VZRYCV7wdw-Z-pVoKZYYLKQ4TcENyNxkTLaudCGKvTvNH3DOpXvrD3brZDQlfjzWhFkTWH604fFvNsLFlH4gCw2nFMkTsNdP2qygCkEjm0LG6BKLh6Hj7B8I2ovNyuSTKEi1VOGBqA8FOXMnsBEx-PXamFAujIKJKWnjR2vdC-zrJqbM9JNPpXNs4LHZN9zRR54l4YlB0men_mTo9pGKHRh0NSshdj4E75xnvLufsYDUKpCji4mNfdo3YiOOJizvqteajVv5GlszF5wu8IUAJBZGLDuWsdDExNYsbHs0ipT36g9EBzg"
},
      body: file,
    });

    if (response.ok) {
      const jsonResponse = await response.json();
      console.log("Response:", jsonResponse);
    } else {
      console.error("Error:", response.statusText);
    }
  } catch (error) {
    console.error("Error:", error);
  }
});