How would I use client-side browser Javascript with AJAX to upload a file into Wasabi Storage?
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>