How to upload a local file from browser?

[azure]

How to upload a local file from browser?

[XiaoningLiu]

Examples comparing V2 vs V10 for uploading a File in browsers:

V10

      function uploadBlobByStream(checkMD5) {
        var files = document.getElementById("files").files;
        if (!files.length) {
          alert("Please select a file!");
          return;
        }
        var file = files[0];
        var blobServiceURL = getBlobServiceURL();
        if (!blobServiceURL) {
          return;
        }

        var containerURL = azblob.ContainerURL.fromServiceURL(
          blobServiceURL,
          container
        );
        var blockBlobURL = azblob.BlockBlobURL.fromContainerURL(
          containerURL,
          file.name
        );

        var btn = document.getElementById("upload-button");
        btn.disabled = true;
        btn.innerHTML = "Uploading";

        var blockSize = 4 * 1024 * 1024;

        azblob
          .uploadBrowserDataToBlockBlob(
            azblob.Aborter.none,
            file,
            blockBlobURL,
            {
              blockSize: blockSize,
              progress: function(ev) {
                displayProcess((ev.loadedBytes * 100) / file.size);
              }
            }
          )
          .then(function() {
            btn.disabled = false;
            btn.innerHTML = "UploadBlob";
            displayProcess(100);
            setTimeout(function() {
              // Prevent alert from stopping UI progress update
              alert("Upload successfully!");
            }, 1000);
            refreshBlobList();
          })
          .catch(function(error) {
            btn.disabled = false;
            btn.innerHTML = "UploadBlob";
            alert("Upload filed, open browser console for more detailed info.");
            console.log(error);
            displayProcess(0);
          });
      }

V2

function uploadBlobByStreamOld(checkMD5) {
        var files = document.getElementById("files").files;
        if (!files.length) {
          alert("Please select a file!");
          return;
        }
        var file = files[0];

        var blobService = getBlobService();
        if (!blobService) return;

        var btn = document.getElementById("upload-button");
        btn.disabled = true;
        btn.innerHTML = "Uploading";

        // Make a smaller block size when uploading small blobs
        var blockSize =
          file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
        var options = {
          storeBlobContentMD5: checkMD5,
          blockSize: blockSize
        };
        blobService.singleBlobPutThresholdInBytes = blockSize;

        var finishedOrError = false;
        var speedSummary = blobService.createBlockBlobFromBrowserFile(
          container,
          file.name,
          file,
          options,
          function(error, result, response) {
            finishedOrError = true;
            btn.disabled = false;
            btn.innerHTML = "UploadBlob";
            if (error) {
              alert(
                "Upload filed, open brower console for more detailed info."
              );
              console.log(error);
              displayProcess(0);
            } else {
              displayProcess(100);
              setTimeout(function() {
                // Prevent alert from stopping UI progress update
                alert("Upload successfully!");
              }, 1000);
              refreshBlobList();
            }
          }
        );

        speedSummary.on("progress", function() {
          var process = speedSummary.getCompletePercent();
          displayProcess(process);
        });
      }

[XiaoningLiu]

@varghesep

V10 is next generation of Azure Storage JavaScript SDK. It has new architecture and design, more compatibility and lightweight. You can continue to use V2, or considering moving to V10.

For V2, only way to use the browser version is to load the JS bundle. While for V10, you can directly import the @azure/storage-blob npm package.

In V2, createBlockBlobFromBrowserFile only accepts File. While for V10, uploadBrowserDataToBlockBlob accepts Blob | ArrayBuffer | ArrayBufferView. File inherits from Blob, so it accepts File too.

https://docs.microsoft.com/en-us/javascript/api/%40azure/storage-blob/index?view=azure-node-preview#uploadbrowserdatatoblockblob-aborter--blob---arraybuffer---arraybufferview--blockbloburl--iuploadtoblockbloboptions-

[varghesep]

I followed your code for the version V10 and was able to successfully upload a Html5 File object (a jpeg image) from my laptop through the browser.

[XiaoningLiu]

You can create a ServiceURL by: const pipeline = StorageURL.newPipeline(new AnonymousCredential()); new ServiceURL(“https://account.blob.core.windows.net?SAS_TOKEN”, pipeline); Best, Xiaoning From: Marcin Wojciechowski <[email protected]> Sent: Thursday, January 3, 2019 6:26 AM To: Azure/azure-storage-js <[email protected]> Cc: Xiaoning Liu <[email protected]>; Mention <[email protected]> Subject: Re: [Azure/azure-storage-js] How to upload a local file from browser? (#48) HI @XiaoningLiu<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FXiaoningLiu&data=02%7C01%7CXiaoning.Liu%40microsoft.com%7C294da08bf88b48f4dfa108d67101494d%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636820647671790252&sdata=PGTf2tCq5oJb5z1p7ENrWY8jQ%2Fy2XPAbJpqstZQSO78%3D&reserved=0> could you tell me in v10 what is equivalent to createBlobServiceWithSas(blobStorageUri, SAS_TOKEN)? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FAzure%2Fazure-storage-js%2Fissues%2F48%23issuecomment-451004598&data=02%7C01%7CXiaoning.Liu%40microsoft.com%7C294da08bf88b48f4dfa108d67101494d%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636820647671800261&sdata=BfTK80sU7iwxvs2h8djIk%2BeZkFJYMszWamaii61eQWw%3D&reserved=0>, or mute the thread<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAGkeyMeluOllksyvQGEEpjqcP7Oeedmqks5u_TH9gaJpZM4ZjT82&data=02%7C01%7CXiaoning.Liu%40microsoft.com%7C294da08bf88b48f4dfa108d67101494d%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636820647671800261&sdata=CSlx4jQWaGvGOd00NSYXc8Cbdk2V5LMQ6HGiubxaQco%3D&reserved=0>.

[raufdean]

Implemented both the V2 & V10 methods as above. Over a slow patchy wifi connection the V10 method failed repeatedly. The V2 method was however very reliable. Would you have any idea why this might be the case ?

[XiaoningLiu]

@raufdean

Can you share the parameters you have used? Such as file size, blockSize, parallelism/concurrency, retry settings and etc.

Error messages printed by V10 are also very helpful.

V10 enables retry policy by default, while V2 not. It's interesting V2 is more reliable on your side.

[raufdean]

@XiaoningLiu Sure. So small files were ok, but anything over 20Mb seemed to be a problem (this was a very unreliable connection). The upload would progress, and then fail right at the end. I tried with paralleism set to 1, and reduced blocksize to 1024 x 512 but still had the same problem. The error was always a ERR_CONNECTION_RESET from Azure. I have some HAR files that I can send you directly. I then used your V2 code above, and the uploads of the same files over the same connection were fine

[XiaoningLiu]

@raufdean If file size less than maxSingleShotSize (default is 256MB in bytes), file will be uploaded via a single http request. So besides setting blocksize to 1024 x 512, you need to set a small maxSingleShotSize such as 1024 * 512 to make the blocksize work. Have a try.

Please share the HAR files. What I can do is to make retry policy work for that kind of errors.

[XiaoningLiu]

Will close this issue as long time no response, fell free to re-open if you have further questions.