Angular $http put request to azure storage

Question

I am having trouble when trying to upload an image to Azure storage account. The issue is with the config header to make the request properly to the server. I have test this with postman making myself the request and works like a charm, but when trying to do it from angular with $http.put it is giving me the error

400 (Authentication information is not given in the correct format. Check the value of Authorization header.)

This is my javascript function

uploadToAzure: function (urlToUpload, fileType, file) {
    var formattedUrl = urlToUpload.split('"')[1];
    var fecha = new Date();
    var config = {
      headers:{}}
    config.headers = {
        'x-ms-blob-type': 'Blockblob',
        'x-ms-blob-content-type': fileType,
        'x-ms-date': fecha,
        'x-ms-version': '2017-04-17',
        //'Host': 'necesito1.blob.core.windows.net',
        'Authorization_Token': 'SharedKey <myAccount>:<MyPublicAccessKey>'
      };
    return $http.put(urlToUpload, file._file, config);

I have read these articles where I found how to config my header properly Doc1////Stackoverflow answer

I get this header from postman if it helps

Am I missing something here? Any help would be appreciated.

Answer 1

The format for the Authorization header is as follows:

Authorization="[SharedKey|SharedKeyLite] <AccountName>:<Signature>"

• The name of Authorization header should be Authorization, not Authorization_Token.

• The signature string is not your access key, it should be generated against storage access key, request header and so on. About how to construct it, refer to this documentation.

Another option is to use Shared Access Signature (SAS). See Azure storage authorization failed or format is wrong.

Answer 2

Ok, so I finally figure it out. The thing was that the javascript I posted was wrong, not the configuration but the way I was setting up the header. Digging a little bit more I found that setting the header the way I was doing it was not gonna work

return $http.put(urlToUpload, file._file, config);

I ended up overriding the interceptor service for $httpProvider. What you need to do is override this functionality at the app.js file like this

angular.module('yourAppName', ['yourInyectedModules']).config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push(function ($q) {
  return {
    'request': function (config) {
       //Do your custom processing here
        config.headers = {
          'x-ms-blob-type': 'Blockblob' 
        };
        return config;       
    },

    'response': function (response) {
      // same as above
      return response;
    }
  };
});}]);

Take into consideration that if you do this you are doing it for every request it's been made from the client side, so you need to process your request to set it up only for an specific one.

No authorization needed since I had my Authorize url already in the correct format in my variable "urlToUpload" (asked azure for giving me the authorized url to upload the file). The type was automatically inherited so no need to set it up.

Thanks for your reply Aaron Chen!