How to upload an image to Azure Blob Storage with v10 SDK?

Question

I'm trying to upload an image on the Blob Storage of Microsoft Azure using SDK V10 in Angular.

The following is the code I currently use to connect to the Storage and list all the containers names:

// connect to the Blob Service
const pipeline = StorageURL.newPipeline(new AnonymousCredential(), {
    retryOptions: { maxTries: 4 },
    telemetry: { value: "HighLevelSample V1.0.0" }
});

const serviceURL = new ServiceURL(
    `${this.blobUri}/${environment.azureContainers.sasToken}`,
    pipeline
);

// List containers
let marker;
do {
    const listContainersResponse: Models.ServiceListContainersSegmentResponse = await serviceURL.listContainersSegment(
      Aborter.none,
      marker
    );

    marker = listContainersResponse.nextMarker;
      for (const container of listContainersResponse.containerItems) {
        console.log(`Container: ${container.name}`);
      }
} while (marker);

Now I would like to upload a file (specifically, a image) in one of the listed containers (doesn't matter which one for the purpose of this question), but from what I have read in the documentation, a filepath is required, but I don't have it. What I have instead is an object of type "File" in JS and, as far as I know, getting a filepath from the browser cannot be done due to security reasons!

Do you have any idea of how to achieve this? How can I upload an image to the Blob Storage in Angular?

Gaurav Mantri · Accepted Answer · 2019-05-14 16:52:25Z

2

The example you referred to is for Node JS which has access to the file system. For uploading a file in the browser, you will need to make use of uploadBrowserDataToBlockBlob method.

From this samples link

  // Parallel uploading a browser File/Blob/ArrayBuffer in browsers with uploadBrowserDataToBlockBlob

  const browserFile = document.getElementById("fileinput").files[0];
  await uploadBrowserDataToBlockBlob(Aborter.none, browserFile, blockBlobURL, {
    blockSize: 4 * 1024 * 1024, // 4MB block size
    parallelism: 20, // 20 concurrency
    progress: ev => console.log(ev)
  });

edited May 14, 2019 at 16:52

answered May 14, 2019 at 9:06

Gaurav Mantri

137k17 gold badges247 silver badges282 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to upload an image to Azure Blob Storage with v10 SDK?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related