JSFiddle - React, Tailwind, and code Playground

by rowntreerob

HTML

<label>Select file to upload</label>
    <input type="file" id="files" name="files[]">

JavaScript

// This will upload the file after having read it
const url1 = 'https://$appName.herokuapp.com/parse/files/nativpic.png'
let status;
const upload = (file) => {
  fetch(url1, { 
    method: 'POST',
    headers: { "Origin":"https://$name.bubbleapps.io",     
    "Content-Type": "	image/png",
    "X-Parse-Application-Id": "dDgpCbCGWqIojuPcym19Ov6vEkmBH8Nk90P3qovv", 		"Access-Control-Request-Headers":
    "Origin, Content-Type, X-Parse-Application-Id"     
    },
    body: file // This is your file object
  }).then(
    response => response.json()    
  ).then(
  	json => console.log(json)
  ).catch((err) => {
    // handle error
    console.error(err);
  });
};
// Event handler executed when a file is selected
const onSelectFile = (evt) => {
  upload(evt.target.files[0])};
// Add a listener on your input
document.getElementById('files').addEventListener('change', onSelectFile, false);