Search code examples
javascriptazureazure-blob-storageshared-access-signatures

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

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>
Solution

  • 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