Example using amazon s3 direct upload

awsupl via form vars w fetchPost

by rowntreerob

HTML

<form action="https://spreedemostore.s3.amazonaws.com/" method="post" enctype="multipart/form-data" name="mykey">
  <input type="hidden" name="region" value="us-east-1">
  <input type="hidden" name="bucket" value="bubble-yaya-tst">
  <input type="hidden" name="folder" value="photo">
  <input type="hidden" name="AWSAccessKeyId" value= "AKIAYCYZXBCRHRFOZJEO" >
  <input type="hidden" name="AWSSecretKey" value="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"> 
   <input type="hidden" name="token" value="Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Inh5emFzZGYiLCJpYXQiOjE2Njg3MjYzOTIsImV4cCI6MTY3MDcyNjM5MiwiYXVkIjoiczN1cGxvYWRzZXJ2aWNlLmJ1YmJsZWFwcHMuaW8iLCJpc3MiOiJzYW1wbGVleHByZXNzLXByb2R1Y3Rpb24udXAucmFpbHdheS5hcHAiLCJzdWIiOiJyb3dudHJlZXJvYkB5YWhvby5jb20ifQ.sUPQ3Zj8jrH4VxUlQBfn8WMofkdNSfN7f2L_YrpiTcA8NdhvDoRyNrnpyPKwCQ1cSirknGeD_O-xdS5GPAPc0IXEFLo_UxDXlt4ihxiTRmieq-7CF_OL4_8awR4o8JErXobF8t16vmq1GlElDxR4wxsKHkWAOVjlYfOWFsMAp-BVS9Y3Dvh8p7wFL0ONLAfYmcuIosMQXCm6KpQ8SI3duScI1ZEGm5F51SEk8BaU-6mGXYjGhB5aNq0ivGec5bnY4sN16loAqPbSVaBPncwm6tY5JpCbA9cGhVJAHkAh9nLOyMSwyJXsq2uUWD_OtilGSaNJoCTagej1Hun86xqY-w"> 
  <input name="files[]" type="file" id="files" accept=".png,.jpg,.jpeg"> 
  <br> 
  <input type="submit" value="Upload File to S3" "> 
</form> 
<div id="fetchresp"></div>

JavaScript

$div1_ = document.querySelector('#fetchresp');
let form, upobj, name, _regn, _buck, _fldr, _keyid, _secretkey; 
window.onload = function() {
	_regn = document.getElementsByName("region")[0].value; // region your bucket located
  _buck = document.getElementsByName("bucket")[0].value; // the bucket 
  _fldr = document.getElementsByName("folder")[0].value; // child folder separates photo | audio
  _keyid = document.getElementsByName("AWSAccessKeyId")[0].value; // AWS authorization your bucket
  _secretkey = document.getElementsByName("AWSSecretKey")[0].value;  // AWS auth p2
   _token = document.getElementsByName("token")[0].value;
  form = document.querySelector("form");
  form.onsubmit = upload.bind(form);
  document.getElementById('files').addEventListener('change', onSelectFile, false);
}

const onSelectFile = (evt) => { 
upobj = evt.target.files[0]
name = upobj.name
};
// upload is bound to *submit* action on the form
const upload = (e) => {
	var havit = document.getElementsByName("acl")[0];  
  e.preventDefault()      
   let url1 = 'https://sampleexpress-production.up.railway.app/awsupl/'; // backend Proxy server. Puts to AW
   url1 = url1 + _regn +'/' + _buck + '/' + _fldr + '/'  + name;
   console.log('show ' + url1)
     fetch(url1, { 
    method: 'POST',
    headers: {
      "application":"s3uploadservice.bubbleapps.io",  // client app 
      "Content-Type": "image/png",
      "X-Aws-Key-Id": _keyid,
      "X-Aws-Secret-Key": _secretkey,
      "authorization": _token, // your client-app token on the API
      "Access-Control-Request-Headers":"Content-Type, application, X-Aws-Key-Id, X-Aws-Secret-Key, authorization"
    },
    body: upobj // file object to be upload is the photo selection from "Choose File"
  }).then(
    response => response.json() // includes S3.path to file- URL & DB record of upload
  ).then(
    data => {$div1_.textContent = JSON.stringify(data.calls[0].Location);}   // link to s3.file , remote fileName
  ).catch(
    error =>...