Example using amazon s3 direct upload

by morphcast

HTML

<form action="https://spreedemostore.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
  <input type="hidden" name="key" value="${filename}">
  <input type="hidden" name="AWSAccessKeyId" value= "AKIAIDSTEOFIIVTWCUFA" > 
  <input type="hidden" name="acl" value="public-read"> 
  <input type="hidden" name="success_action_status" value="201">
  <input type="hidden" name="policy" value= "eyJleHBpcmF0aW9uIjoiMjAxNC0xMC0xM1QxODoyMzoxNFoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJzcHJlZWRlbW9zdG9yZSJ9LHsiYWNsIjoicHVibGljLXJlYWQifSxbInN0YXJ0cy13aXRoIiwiJGtleSIsIiJdLHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAxIn1dfQ==" >
  <input type="hidden" name="signature" value= "lsspLDjPbE6UL+/28bs0oOWZ82g=" >
  <!-- Include any additional input fields here -->

  File to upload to S3: 
  <input name="file" type="file"> 
  <br> 
  <input type="submit" value="Upload File to S3"> 
</form>

JavaScript

throw Error();
const filename = (new Date()).getTime() + "aaa.zip";
const file = new File(["aaaa"], filename);
  //const file = document.getElementById('file').files[0];
  const fd = new FormData();

  const key = "uploads/" + filename;

  fd.append('key', key);
  fd.append('acl', 'bucket-owner-full-control');
  fd.append('Content-Type', file.type);
  fd.append('success_action_status', '201');
  fd.append('policy', 'eyJleHBpcmF0aW9uIjogIjIwMjEtMDEtMDFUMDA6MDA6MDBaIiwgImNvbmRpdGlvbnMiOiBbeyJidWNrZXQiOiAiYXR0ZW50aW9uLWRhdGFzZXQtdXBsb2FkIn0sIFsic3RhcnRzLXdpdGgiLCAiJGtleSIsICJ1cGxvYWRzLyJdLCB7ImFjbCI6ICJidWNrZXQtb3duZXItZnVsbC1jb250cm9sIn0sIHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjogIjIwMSJ9LCBbInN0YXJ0cy13aXRoIiwgIiRDb250ZW50LVR5cGUiLCAiIl0sIHsieC1hbXotY3JlZGVudGlhbCI6ICJBS0lBM1hLWkhOR1ZYVEI2TzJJRy8yMDE1MTIyOS9ldS1jZW50cmFsLTEvczMvYXdzNF9yZXF1ZXN0In0sIHsieC1hbXotYWxnb3JpdGhtIjogIkFXUzQtSE1BQy1TSEEyNTYifV19');
  fd.append('X-Amz-Algorithm','AWS4-HMAC-SHA256');
  fd.append('X-Amz-Credential','AKIA3XKZHNGVXTB6O2IG/20151229/eu-central-1/s3/aws4_request');
  fd.append('X-Amz-Signature','d03990de5b7b42f3e4b2547b6f97d028a13d68940b7dc1beac957f6d85f38ed1');

  fd.append("file",file);

  const xhr = new XMLHttpRequest();

  xhr.open('POST', 'https://attention-dataset-upload.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND


  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 201) {
        console.log(xhr.responseText);
      } else {
        window.alert("Impossibile completare l'upload. Per favore riprova o contattaci, inviandoci i dati via mail. Errore: " + xhr.statusText);
        console.log("Errore: ", xhr.statusText);
      }
    }
  };

  xhr.send(fd);