added azure storage support

.env.local.example

@@ -1,4 +1,10 @@
+// If you want to use AWS as storage cloud
 NEXT_PUBLIC_AWS_ACCESS_KEY=
 NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY=
 NEXT_PUBLIC_BUCKET_NAME=
-NEXT_PUBLIC_REGION=
+NEXT_PUBLIC_REGION=
+
+// If you want to use AWS as storage cloud
+NEXT_PUBLIC_AZURE_STORAGE_ACCOUNT_NAME=
+NEXT_PUBLIC_AZURE_STORAGE_CONTAINER=
+NEXT_PUBLIC_AZURE_SHARED_ACCESS_TOKEN=

components/Chat/FloatingButtonList.js

@@ -1,7 +1,7 @@
-import AWS_Ops from "../../utils/AWS_S3";
 import "../../styles/floatingButtonList.scss";
 import FloatButton from "./FloatButton";
 import { Message } from "../../utils/Message";
+import { uploadToAzure } from "../../utils/uploadFiles";
 
 const FloatingButtonList = ({
     onSend,
@@ -17,17 +17,13 @@ const FloatingButtonList = ({
         const file = event.target.files[0];
         if (!file) return;
 
-        // creating an instance of AWS oprations class to use its s3 upload
-        let up = new AWS_Ops();
-        const { uploadHandler, url } = up.uploadToS3(file);
+        const { uploadPromise, fileUrl } = uploadToAzure(file, (progress) => {
+            setProgress(Math.floor(progress * 100));
+        });
 
-        uploadHandler
-            .on("httpUploadProgress", (evt) => {
-                setProgress(Math.round((evt.loaded / evt.total) * 100));
-            })
-            .promise()
-            .then(() => onSend(url, file.name, type))
-            .catch((err) => console.log(err))
+        uploadPromise
+            .then(() => onSend(fileUrl, file.name, type))
+            .catch((err) => console.error(err))
             .finally(() => setProgress(0)); // this will make uploading progress bar hidden
     };
 

package.json

@@ -17,8 +17,9 @@
         "test:watch": "jest --watchAll"
     },
     "dependencies": {
+        "@azure/storage-blob": "12.12.0",
         "@zeit/next-sass": "^1.0.1",
-        "aws-sdk": "^2.817.0",
+        "aws-sdk": "2.817.0",
         "dayjs": "^1.9.7",
         "express": "^4.17.1",
         "next": "9.4.4",

pages/api/socket.js

@@ -9,7 +9,7 @@ import {
     getRoomUsers,
 } from "../../utils/user";
 
-const SocketHandler = (req, res) => {
+export default (req, res) => {
     if (res.socket.server.io) {
         console.log("Socket is already running");
     } else {
@@ -107,5 +107,3 @@ const SocketHandler = (req, res) => {
     }
     res.end();
 };
-
-export default SocketHandler;

utils/AWS_S3.js

@@ -1,6 +1,8 @@
 import AWS from "aws-sdk";
 
-class AWS_Ops {
+let instance = null;
+
+class AWS_S3 {
     static #CONFIG = {
         AWS_KEY: process.env.NEXT_PUBLIC_AWS_ACCESS_KEY,
         AWS_SECRET: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY,
@@ -9,33 +11,39 @@ class AWS_Ops {
     };
 
     constructor() {
+        if (instance) {
+            throw new Error("You can only create one instance of this class!");
+        }
         AWS.config.update({
-            accessKeyId: AWS_Ops.#CONFIG.AWS_KEY,
-            secretAccessKey: AWS_Ops.#CONFIG.AWS_SECRET,
+            accessKeyId: AWS_S3.#CONFIG.AWS_KEY,
+            secretAccessKey: AWS_S3.#CONFIG.AWS_SECRET,
         });
+        this.s3 = new AWS.S3();
+        instance = this;
     }
 
-    getUrl(fileName) {
-        return `https://${AWS_Ops.#CONFIG.bucketName}.s3.${
-            AWS_Ops.#CONFIG.region
+    getFileUrl(fileName) {
+        return `https://${AWS_S3.#CONFIG.bucketName}.s3.${
+            AWS_S3.#CONFIG.region
         }.amazonaws.com/${fileName}`;
     }
 
-    uploadToS3(file) {
+    upload(file, onProgressChange) {
         const params = {
             ACL: "public-read",
             Key: file.name,
             ContentType: file.type,
             Body: file,
-            Bucket: AWS_Ops.#CONFIG.bucketName,
+            Bucket: AWS_S3.#CONFIG.bucketName,
         };
 
-        const s3 = new AWS.S3();
         return {
-            uploadHandler: s3.upload(params),
-            url: this.getUrl(file.name),
+            uploadHandler: this.s3
+                .upload(params)
+                .on("httpUploadProgress", onProgressChange),
+            url: this.getFileUrl(file.name),
         };
     }
 }
 
-export default AWS_Ops;
+export default Object.freeze(new AWS_S3());

utils/Azure.js

@@ -0,0 +1,51 @@
+import { BlobServiceClient } from "@azure/storage-blob";
+
+let instance = null;
+
+class AzureStorageClient {
+    static #CONFIG = {
+        storageAccountName: process.env.NEXT_PUBLIC_AZURE_STORAGE_ACCOUNT_NAME,
+        containerName: process.env.NEXT_PUBLIC_AZURE_STORAGE_CONTAINER,
+        sasToken: process.env.NEXT_PUBLIC_AZURE_SHARED_ACCESS_TOKEN,
+    };
+
+    constructor() {
+        if (instance) {
+            throw new Error("You can only create one instance of this class!");
+        }
+        const blobServiceClient = new BlobServiceClient(
+            `https://${
+                AzureStorageClient.#CONFIG.storageAccountName
+            }.blob.core.windows.net/?${AzureStorageClient.#CONFIG.sasToken}`
+        );
+        this.containerClient = blobServiceClient.getContainerClient(
+            AzureStorageClient.#CONFIG.containerName
+        );
+        instance = this;
+    }
+
+    getFileUrl(fileName) {
+        return `https://${
+            AzureStorageClient.#CONFIG.storageAccountName
+        }.blob.core.windows.net/${
+            AzureStorageClient.#CONFIG.containerName
+        }/${fileName}`;
+    }
+
+    upload(file, onProgressChange) {
+        const fileName = file.name;
+        const blockBlobClient = this.containerClient.getBlockBlobClient(
+            fileName
+        );
+
+        return {
+            uploadPromise: blockBlobClient.uploadData(file, {
+                onProgress: onProgressChange,
+            }),
+            fileUrl: this.getFileUrl(fileName),
+        };
+    }
+}
+
+const azureStorageClient = Object.freeze(new AzureStorageClient());
+export default azureStorageClient;

utils/uploadFiles.js

@@ -0,0 +1,16 @@
+import awsStorageClient from "./AWS_S3";
+import azureStorageClient from "./Azure";
+
+export const uploadToAzure = (file, onProgressChange) => {
+    const fileSize = file.size;
+
+    return azureStorageClient.upload(file, ({ loadedBytes }) => {
+        onProgressChange(loadedBytes / fileSize);
+    });
+};
+
+export const uploadToAWS = (file, onProgressChange) => {
+    return awsStorageClient.upload(file, ({ loaded, total }) => {
+        onProgressChange(loaded / total);
+    });
+};