How to Use Javascript and AJAX to Upload into Wasabi Storage

1.6k Views Asked by Volomike At 14 February 2020 at 07:11

How would I use client-side browser Javascript with AJAX to upload a file into Wasabi Storage?

There are 1 best solutions below

Volomike On 14 February 2020 at 16:25 BEST ANSWER

Pankaj at Wasabi Tech Support got back to me and said that this code snippet will work just fine. They recommend one download and use the Amazon AWS SDK for S3 because Wasabi is S3 API compliant.

<!DOCTYPE html>
<html>
<head>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.619.0.min.js"></script>
</head>
<body>

  <h1>Wasabi Upload Test</h1>
  <input type="file" id="wasabiupload" onchange="handleFile()" />

<script>

function handleFile() {
  // console.log("handle file - " + JSON.stringify(event, null, 2));
  var files = document.getElementById('wasabiupload').files;
  if (!files.length) {
    return alert('Please choose a file to upload first.');
  }
  var f = files[0];
  var fileName = f.name;

  const s3 = new AWS.S3({
    correctClockSkew: true,
    endpoint: 'https://s3.wasabisys.com', //use appropriate endpoint as per region of the bucket
    accessKeyId: 'Wasabi-Access-keys',
    secretAccessKey: 'Wasabi-Secret-Access-key',
    region: 'us-east-1'
    ,logger: console
  });

  console.log('Loaded');
  const uploadRequest = new AWS.S3.ManagedUpload({
    params: { Bucket: 'bucket-name', Key: 'file-name', Body: f },
    service: s3
  });

  uploadRequest.on('httpUploadProgress', function(event) {
    const progressPercentage = Math.floor(event.loaded * 100 / event.total);
    console.log('Upload progress ' + progressPercentage);
  });

  console.log('Configed and sending');

  uploadRequest.send(function(err) {
    if (err) {
      console.log('UPLOAD ERROR: ' + JSON.stringify(err, null, 2));
    } else {
      console.log('Good upload');
    }
  });

}
</script>
</body>
</html>

How to Use Javascript and AJAX to Upload into Wasabi Storage

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in AJAX

Related Questions in FILE-UPLOAD

Related Questions in WASABI-HOT-CLOUD-STORAGE

Trending Questions

Popular # Hahtags

Popular Questions