How to upload media file in the blob storage of Azure Media Services using Rest API

Question

I am accessing Azure Media Rest API using javascript (angular js), I followed the Microsoft documentation(https://learn.microsoft.com/en-us/azure/media-services/media-services-rest-get-started) through which I was able to generate the token, connect to media services, create the access token and the locator. But after this step, I am facing a problem in uploading a file into a blob storage container. Is there any way to perform uploading of a file via client side using Angular js or javascript?

while making a request:- PUT https:/storageaccountname.blob.core.windows.net/assetcontainer/filename?sas token HTTP/1.1 Host: storageaccount.blob.core.windows.net Connection: keep-alive Content-Length: 223 x-ms-blob-type: BlockBlob Origin: http://localhost Authorization : SharedKey accountnamw: access key Content-Type: video/mp4 Accept: application/json, x-ms-version: 2011-08-18

This gives a response :- HTTP/1.1 400 Authentication information is not given in the correct format. Check the value of Authorization header. Content-Length: 297 Content-Type: application/xml x-ms-request-id: e6b8eeaa-0001-003e-4403-6958b9000000 Access-Control-Allow-Origin:localhost Access-Control-Allow-Credentials: true Date: Sat, 07 Jan 2017 16:34:38 GMT

On trying to remove authorization header and date header from the request, the response we receive is a 404 error: resource does not exist. I am looking for a proper solution to upload file to the blob storage container, kindly help me in resolving this issue .

Thank you..

Answer 1

Since uploading is not something that is handled by the Media Services API itself, you would need to look for examples of using the Azure Storage APIs to upload into a Block Blob via a SAS URL.

Since you have a writable Locator (SAS URL) already, you now need to write to the block blob.

I've seen some examples of doing this out there on the web from client side Angular code. For example - https://blogs.msdn.microsoft.com/kaevans/2015/12/18/securely-upload-to-azure-storage-with-angular/

I'll check to see if we have any more examples

Answer 2

Currently, there is not an existing Azure storage SDK for javascript in client side using. So we can manually generate SAS token URLs fro uploading blobs from client applications.

You can refer to https://learn.microsoft.com/en-us/azure/storage/storage-dotnet-shared-access-signature-part-1 for the detailed guidance.

Also, you can refer this thread Authorization of Azure Storage service REST API as we discussed how to generate SAS token in javascript on client side previous.