The first thing that needs to be setup to be able to upload files directly to the blob storage account are the CORS rules. These can be configured by visiting the Azure portal and going to the storage account that you would like to upload images to. Once there, there should be a CORS tab on the left hand side. Once selected a new panel will open up which will allow you to configure the CORS settings of this storage account. Under the Blob Service tab add a new entry.
For the allowed origins, you will likely want to put the domain that your frontend UI is configured to use. However for the purpose of this article, we’ll use *, which would allow any domain to upload to the storage account. For allowed methods, this setting will really depend on what storage account functionality that you want your front end code to be able to accomplish. Since this article is simply about uploading images to the storage account, we will simply check the PUT option. The Allowed Headers and Exposed Headers should also be tuned for specifically the headers that are required for the functionality that you want the UI to offer, but to make things easy we are also going to set this to *. The final setting to configure is the Max Age. For our purposes we will set the value to a full day, or 86400 seconds. Make sure to click Save in the top menu bar to persist these settings.
Initial Project Setup
npm init -y
Next we need a simple HTML file which will be used to select the image file to be uploaded directly to blob. Again this should be done using your frontend framework of choice instead of writing the raw HTML shown below, but this is just to give an idea of what is needed. We are also including the index.js file, which is defined later, in the body of this HTML file.
You’ll notice that a fake value is being used for the blobSasUrl in the code above. In order to properly fill this in, one will need to be generated from the Azure Portal, the Azure CLI, or the Azure API. Normally the frontend UI would request an shared access token which is provisioned specifically for the container and file name of the file to be uploaded, so that the signature can only ever be used to upload a file to that specific location. This shared access signature should also have a time limit configured on it so that it will only work for a small range of time. Otherwise, if the signature was somehow exposed to a third party, they could overwrite the file or image that was uploaded by the client.
The shared access signature can be generated in the Azure Portal by going to the storage account that the images should be uploaded to, and selecting the Shared access signatures tab on the left hand side. From there different settings can be configured for the signature including the allowed services, the allowed resource types, the allowed permissions, the start and expiry times, allowed IP address ranges, allowed protocols and which signing key to use to generate the signature. These settings should be tuned specifically for the use case that the shared access signature is being used to accomplish.
Now that this has happened, you can visit http://localhost:1234 and from here you can select an image by clicking the Select files button and choosing the image that you would like to upload to the Azure Blob Storage container. If everything went well, you’ll get an alert popup that says Done. which means that the image was successfully uploaded to the Azure Blob Storage container from the web page loaded by the browser.
The video below also shows the entire process of setting up and running these small pieces of code in order to upload data directly to the Azure Blob Storage container from the browser. Please like and subscribe!