Browser Direct Upload Data to Azure Blob Storage Part 0: Outline

Overview

I discuss all the modules including HTML, JavaScript, PHP, CORS, Memory Data issues involved in uploading data into Azure Blob Storage directly from browser.

Similar to the post series in Amazon S3: “HTML Direct Upload Data to Amazon S3 Part 0: Outline“, I will give an outline for the Azure Blob Storage case too including the work flow and each individual parts (HTML, JavaSript, PHP, CORS, Memory Data) details here. Some of them are quite similar so I don’t give separate posts describing HTML, JavaScript, Memory Data but I will include them here in this one. The two other parts PHP and CORS (i.e., Azure Blob Storage Details) are already discussed in detail separately.

Blob Direct Upload  Modules and Work Flow

So in order to directly upload your data into Azure Blob Storage Service, you need to write HTML to accept local data, JavaScript to query application proxy server for SAS, enable CORS on the Azure Blob Storage Service, PHP code to generate SAS, and you might also want to try memory data instead of the disk files. Here are the details of each module and the work flow:

  1. Enable CORS on the Azure Blob Storage Service side. Unfortunately, Azure Portal does not have any entry for you to configure CORS as in Amazon S3: “HTML Direct Upload Data to Amazon S3 Part 1: S3 Details“. You have to write a small amount of code to do this job. This is also the first step you need to take, please follow the details discussed in this post: “Browser Direct Upload Data to Azure Blob Storage Part 1: CORS“.
  2. After enabling CORS of Azure Blob Storage, you need to write some HTML code to accept date the user selected from their local computers, this should be almost the same as what I did in Amazon S3 case, follow this: “HTML Direct Upload Data to Amazon S3 Part 3: HTML Details (No Form)
  3. Differently From Amazon S3 case in which the signature and the policy could be defined and decided without knowing the uploaded data name, in Azure Blob Storage case, the name of the uploaded file has to be part of the contents used to generate the actual signature (SAS), so we have to create a single PHP page accepting request with the file name in the query string and generate the SAS, the details should be found here : “Browser Direct Upload Data to Azure Blob Storage Part 2: SAS PHP (Tricky!)
  4. Next thing is the JavaScript, it is quite similar to the one “HTML Direct Upload Data to Amazon S3 Part 4: JavaScript Details“, but as stated in step 3, now the JavaScript need to do two things, firstly, sent request to the PHP page to get back the SAS, and use the SAS plus the disk data and directly send request with the data and SAS to Azure Blob Storage Service
  5. A final thing interests you might be memory data, this should be exactly the same as in this post: “HTML Direct Upload Data to Amazon S3 Part 5: Memory Data

Summary

All the modules including HTML, JavaScript, PHP, CORS, Memory Data issues involved in uploading data into Azure Blob Storage directly from browser are discussed. This could be regards has a high level designing of the whole system for directly uploading to Azure Blob Storage. Please feel free to leave any comments. Thanks.

 


(Please specify the source  烟客旅人 sigmainfy — http://www.sigmainfy.com  as well as the original permalink

URL for any reprints,  and please do not use it for commercial purpose)

Written on October 17, 2014