How to upload file to wasabi aws s3 sdk in react js

I had a little difficulty uploading files to wasabi (http://wasabi.com/) and couldn't get resources on how to fix it, so I thought to write this. I hope it helps someone.
wasabi and AWS have a similar way of uploading file.
Firstly
install aws-sdk package (npm i aws-sdk@2.283.1). make sure to install a lower version, specifically version 2.283.1
secondly
import S3 to your project (import S3 from "aws-sdk/clients/s3")

Note: you might want to write a function for it, if you will be needing it in more than one component and also you may want to consider the file type, if its base 64 or multipart (binary).

let declare our function:

const export = () => {
}

this function will accept two values, the file to be uploaded and the progress setter (the progress setter keeps the progress of the file uploading).

const export = (file, setProgress) => {
}

the next thing you want to do is check the type of file being sent (base 64 or multipart) and also generate a unique key that wasabi will save the file with (the Key is the file name)

const export = (file, setProgress) => {
    const date = new Date();
    let Body;
    let Key = `s3-${date.getFullYear()}/${date.getMonth()}/${date.getDate()}/${uuid()}`;
    if (typeof file === "string") {
      file = file.replace(/^data:image\/\w+;base64,/, "");
      let format = file.charAt(0);
      if (format === "/") format = "jpg";
      else if (format === "i") format = "png";
      else if (format === "R") format = "gif";
      Body = Buffer.from(file, "base64");
      Key = `${Key}.${format}`;
    } else {
      Body = file;
      Key = `${Key}.${file.name.split(".").pop()}`;
    }
}

next is your wasabi credentials.

    const s3 = new S3({
      correctClockSkew: true,
      endpoint: process.env.NEXT_PUBLIC_AWS_S3_BASE_URL, //Specify the correct endpoint based on where your bucket is
      accessKeyId: process.env.NEXT_PUBLIC_AWS_S3_ACCESS_KEY_ID,
      secretAccessKey: process.env.NEXT_PUBLIC_AWS_S3_SECRET_KEY_ID,
      region: process.env.NEXT_PUBLIC_AWS_S3_REGION, //Specify the correct region name based on where your bucket is
      logger: console,
    });

then the file upload:

    const uploadRequest = new S3.ManagedUpload({
      params: {
        Bucket: process.env.NEXT_PUBLIC_AWS_S3_BUCKET as string,
        Key,
        Body,
      },
      service: s3,
    });

then the file upload progress

    uploadRequest.on("httpUploadProgress", function (event) {
     const progressPercentage = Math.floor((event.loaded * 100) / event.total);
      setProgress(progressPercentage);
    });

finally send to wasabi:

    uploadRequest.send((err, res) => {
      if (err) return rej(err);
      ful(res.Key);
    });

below is the function:


import S3 from "aws-sdk/clients/s3";
import { v4 as uuid } from "uuid";

export const uploadFiles = (file: any, setProgress: Function) =>
  new Promise((ful, rej) => {
    const date = new Date();
    let Key = `s3-${date.getFullYear()}/${date.getMonth()}/${date.getDate()}/${uuid()}`;
    let Body;
    if (typeof file === "string") {
      file = file.replace(/^data:image\/\w+;base64,/, "");
      let format = file.charAt(0);
      if (format === "/") format = "jpg";
      else if (format === "i") format = "png";
      else if (format === "R") format = "gif";
      Body = Buffer.from(file, "base64");
      Key = `${Key}.${format}`;
    } else {
      Body = file;
      Key = `${Key}.${file.name.split(".").pop()}`;
    }
    const s3 = new S3({
      correctClockSkew: true,
      endpoint: process.env.NEXT_PUBLIC_AWS_S3_BASE_URL, //Specify the correct endpoint based on where your bucket is
      accessKeyId: process.env.NEXT_PUBLIC_AWS_S3_ACCESS_KEY_ID,
      secretAccessKey: process.env.NEXT_PUBLIC_AWS_S3_SECRET_KEY_ID,
      region: process.env.NEXT_PUBLIC_AWS_S3_REGION, //Specify the correct region name based on where your bucket is
      logger: console,
    });

    const uploadRequest = new S3.ManagedUpload({
      params: {
        Bucket: process.env.NEXT_PUBLIC_AWS_S3_BUCKET as string,
        Key,
        Body,
      },
      service: s3,
    });

    uploadRequest.on("httpUploadProgress", function (event) {
     const progressPercentage = Math.floor((event.loaded * 100) / event.total);
      setProgress(progressPercentage);
    });
    uploadRequest.send((err, res) => {
      if (err) return rej(err);
      ful(res.Key);
    });
  });