How do I perform client-side browser-based uploads with Wasabi

There are several ways one can implement a web page upload directly into Wasabi using scripts. Companies can use this method to allow their employees perform uploads and submit their work through the company designed client-side webpage and not allow employees perform direct server-side uploads.

The below example demonstrates the same using html javascript code for uploading files to Wasabi from a web page.

Note that this code example discusses the use of Wasabi's us-east-1 storage region. To use other Wasabi storage regions, please use the appropriate Wasabi service URL as described here 


<!DOCTYPE html>



<script src=""></script>



<h1>Wasabi Upload Test</h1>

<input type="file" id="wasabiupload" onchange="handleFile()" />



functionhandleFile() {

// console.log("handle file - " + JSON.stringify(event, null, 2));

varfiles = document.getElementById('wasabiupload').files;

if (!files.length) {

returnalert('Please choose a file to upload first.');


varf = files[0];

varfileName =;

consts3 = newAWS.S3({


endpoint:'', //Specify the correct endpoint based on where your bucket is



region:'us-east-1'//Specify the correct region name based on where your bucket is

,logger: console



constuploadRequest = newAWS.S3.ManagedUpload({

params: { Bucket:'Wasabi-Bucket-Name', Key:fileName, Body:f },



uploadRequest.on('httpUploadProgress', function(event) {

constprogressPercentage = Math.floor(event.loaded * 100 /;

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');





Here's how the output looks for the above script:
Have more questions? Submit a request