Upload multiple files parallel in azure blob with SAS Token in javascript

Question

Upload multiple files parallel in azure blob with SAS Token in javascript

586 views Asked by Kartik At 24 November 2024 at 08:03

I am trying to upload multiple video files in azure blob storage with the help of SAS token.

As you can see in this image :- Image

By looking in the console It looks like browser is handling the file and uploading it by chunks. So I didn't implemented it in my code. Don't know if that's the right way.

Files are uploading successfully but its taking lot of time.

<div class="container">
    <div class="row">
        <div class="form-group">
            <label for="Files"></label>
            <input type="file" id="fileControl" multiple />
            <br />
            <span class="" id="SizeLimitSAS" style="visibility: hidden; font-size:small"></span>
            <br />
            <progress id="uploadProgress" class="form-control" value="0" max="100" style="height: 60px;"></progress>
            <br />
        </div>
        <div class="form-group">
            <input type="button" id="btnUpload" value="Upload files" />
        </div>
        <br />
        <br />
        <span class="" id="countOfFileUploaded" style="visibility: hidden; font-size:large"></span>
    </div>
</div>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", init, false);
    function init() {
        document.querySelector('#fileControl').addEventListener('change', handleFileSelect, false);
        sizeLimit = document.querySelector("#SizeLimitSAS");
    }
    function handleFileSelect(e) {
        if (!e.target.files) return;
        var totalSize = 0;
        sizeLimit.innerHTML = "";
        var files = e.target.files;
        for (var i = 0; i < files.length; i++) {
            var f = files[i];
            totalSize += f.size;
        }
        console.log(files)
        console.log(totalSize)
        sizeLimit.innerHTML += "</br>" + niceBytes(totalSize);
        SizeLimitSAS.style.visibility = "visible";
    }

    const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    function niceBytes(x) {
        let l = 0, n = parseInt(x, 10) || 0;
        while (n >= 1024 && ++l) {
            n = n / 1024;
        }
        return (n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]);
    }

    var count = 0;
    function upload(file, type, url) {
        var ajaxRequest = new XMLHttpRequest();
        ajaxRequest.onreadystatechange = function (aEvt) {
            console.log(ajaxRequest.readyState);
            if (ajaxRequest.readyState == 4)
                console.log(ajaxRequest.responseText);
        };
        ajaxRequest.upload.onprogress = function (e) {
            var percentComplete = (e.loaded / e.total) * 100;
            console.log(percentComplete + "% completed");
            if (percentComplete === 100) {
                count++;
                countOfFileUploaded.innerHTML = count + " file uploaded";
                countOfFileUploaded.style.visibility = "visible";
            }
            uploadProgress.value = percentComplete;
        };
        ajaxRequest.onerror = function (jqXHR, exception, errorThrown) {
            alert(jqXHR.status + "--" + exception + "--" + errorThrown);
        };
        ajaxRequest.open('PUT', url, true);
        ajaxRequest.setRequestHeader('Content-Type', type);
        ajaxRequest.setRequestHeader('x-ms-blob-type', 'BlockBlob');
        ajaxRequest.send(file);
    }
    jQuery("#btnUpload").click(function () {
        var files = fileControl.files;
        for (var i = 0, file; file = files[i]; i++) {
            upload(file, file.type, "https://container.blob.core.windows.net/videos/" + file.name + "?sp=racwdli&st=2023-01-18T12:51:14Z&se=2023-01-21T20:51:14Z&sv=2021-06-08&sr=c&sig=gfgkkbhbkekhbkigyyuvuuQB2XR1ynaSOQ%3D");
            
        }
    });
</script>

Original Q&A

There are 1 answers

**Venkatesan** · Accepted Answer · 2023-01-22 05:49:19

I tried in my environment and successfully uploaded file parallelly in Azure blob storage using browser.

You can use the below code to upload file parallely with SAS url:

Index.html

<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <button id="select-button">Select and upload files</button>
    <input type="file" id="file-input" multiple style="display: none;" />
    <div id="showProgress"></div>
    <p><b>Status:</b></p>
    <p id="status" style="height:300px; width: 593px; overflow: scroll;" />
</body>
<script type="module" src="index.js"></script>

</html>

Index.js

const { BlobServiceClient } = require("@azure/storage-blob");
const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const status = document.getElementById("status");
const reportStatus = message => {
    status.innerHTML += `${message}<br/>`;
    status.scrollTop = status.scrollHeight;
}
const blobSasUrl = "<blob sas url>";
const blobServiceClient = new BlobServiceClient(blobSasUrl);

const containerName = "test";
const containerClient = blobServiceClient.getContainerClient(containerName);
const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
       for (var fileIndex = 0; fileIndex < fileInput.files.length; fileIndex++) {
            const file = fileInput.files[fileIndex];
            const blockBlobClient = containerClient.getBlockBlobClient(file.name);
             document.getElementById('showProgress').innerHTML += file.name +":<div id='progress-"+ file.name +"'></div>"
             var blobUploadOptions = {
                blockSize: 4 * 1024 * 1024, // 4MB block size
                parallelism: 20, // 20 concurrency
                metadata: { 'testindex': fileIndex.toString() },                    
                progress: function (ev) {
                    var percentdone = ((ev.loadedBytes / file.size) * 100);
                    var progessItem = document.getElementById('progress-' + file.name);
                    progessItem.innerHTML = percentdone.toFixed(2) + "%";                     
                }
            };
            var promise=blockBlobClient.uploadBrowserData(file,blobUploadOptions);
            promise.then((result)=>{
                var progessItem = document.getElementById('progress-' + file.name);
                progessItem.innerHTML += "  <a href="+result._response.request.url+">file link</a>" 
                
            });
           promises.push(promise);

        }
        await Promise.all(promises);
        alert("Done.");
    }
    catch (error) {
            alert(error.message);
    }
}

selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);

Console:

enter image description here

Browser:

enter image description here

Portal:

enter image description here

Reference: Quickstart: Azure Blob storage library v12 - JS Browser - Azure Storage | Microsoft Learn

TechQA.

Upload multiple files parallel in azure blob with SAS Token in javascript

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in AZURE

Related Questions in AZURE-BLOB-STORAGE

Related Questions in SHARED-ACCESS-SIGNATURES

Popular Questions

Popular Tags

Trending Questions