chose file (photo) for upload (AWS bucket)

by rowntreerob

HTML

<label for="browse">Select photo</label>
<br>
<input type="file" id="files" name="files[]" style="display: none"/>
<input type="hidden" id="filename" readonly="true"/>
<input type="button" value="Upload to S3" id="fakeBrowse" onclick="HandleBrowseClick();"/>

JavaScript

function HandleBrowseClick()
 {document.getElementById("files").click();}

const upload = (file) => {
	let name = file.name; //todo rm spaces in name
  let url1 = 'https://${apps.domain}/awsupl2/files/' + name;
  console.log(url1)
  fetch(url1, { 
    method: 'POST',
    headers: {
      "Origin":"https://apidflt.bubbleapps.io",   
      "Content-Type": "image/png",
      "Access-Control-Request-Headers":"Content-Type, Origin"
    },
    body: file // file object to be upload is the photo selection by "upload-button"
  }).then(
    response => response.json()
  ).then(
    success => console.log(JSON.stringify(success) ) // link to s3.file , remote fileName
  ).catch(
    error => console.log(error.message) // Handle the error 
  );
};
// Event handler executed when a file is selected
const onSelectFile = (evt) => {
  upload(evt.target.files[0])
  };
  
  document.getElementById('files').addEventListener('change', onSelectFile, false);