Upload large file via REST API Put Block Blob

Question

Hello

I am using React Native to build Mobile application for Andrioid and iOS.

based on the situation that no framework is exist to support Azure Storage API for React Native (all frameworks are required browsers that not exist in React Native),

I use REST API for the interaction with the Azure storage and it is works fine e.g list containers, list blob, get blob and put blob.

in order to upload large file I tried to use the same mechanizm for put block api (as describe here: https://learn.microsoft.com/en-us/rest/api/storageservices/put-block) without succcess, failed on error code 403.

I will appreciate for your assist.

Thank you.

my code:

private createAuthorizationHeader(canonicalizedString: string) {  
    const str = CryptoJS.HmacSHA256(canonicalizedString, CryptoJS.enc.Base64.parse(this.config.accountKey));  
    const sig = CryptoJS.enc.Base64.stringify(str);  
    const authorizationHeader = `SharedKey ${this.config.accountName}:${sig}`;  
    return authorizationHeader;  
  }  
  
  async putBlockBlob(containerName: str, blobPath: str, blobContent: str, blockIndex: number,) {  
    const requestMethod = 'PUT';  
  
    const urlPath = `${containerName}/${blobPath}`;  
  
    const dateInRfc1123Format = new Date(Date.now()).toUTCString();  
  
    const storageServiceVersion = '2019-12-12';  
  
    const blobLength: number = blobContent.length;  
  
    const blockId = Buffer.from(`block-${blockIndex}`).toString('base64');  
  
    const blobType = 'BlockBlob';  
  
    // StringToSign =  
    //   VERB + "\n" +  
    //   Content-Encoding + "\n" +  
    //   Content-Language + "\n" +  
    //   Content-Length + "\n" +  
    //   Content-MD5 + "\n" +  
    //   Content-Type + "\n" +  
    //   Date + "\n" +  
    //   If-Modified-Since + "\n" +  
    //   If-Match + "\n" +  
    //   If-None-Match + "\n" +  
    //   If-Unmodified-Since + "\n" +  
    //   Range + "\n" +  
    //   CanonicalizedHeaders +  
    //   CanonicalizedResource;  
  
    const canonicalizedHeaders = `x-ms-date:${dateInRfc1123Format}\nx-ms-version:${storageServiceVersion}`;  

    const canonicalizedResource = `/${this.config.accountName}/${urlPath}}\nblockid:${blockId}\ncomp:block`;  
  
    const stringToSign = `${requestMethod}\n\n\n${blobLength}\n\napplication/octet-stream\n\n\n\n\n\n\n${canonicalizedHeaders}\n${canonicalizedResource}`;  
  
    const uriStr = `${urlPath}?comp=block&blockid=${blockId}`;  
  
    const authorizationHeader = this.createAuthorizationHeader(stringToSign);  
  
    const header = {  
      'cache-control': 'no-cache',  
      'x-ms-date': dateInRfc1123Format,  
      'x-ms-version': storageServiceVersion,  
      Authorization: authorizationHeader,  
      'Content-Length': `${blobLength}`,  
      'Content-Type': 'application/octet-stream',  
    };  
  
  
    try {  
      return axios  
	    .create({baseURL: `https://${this.config.accountName}.blob.core.windows.net/`,})  
        .request({  
          method: requestMethod,  
          url: uriStr,  
          data: blobContent,  
          headers: header,  
        })  
        .then((response) => response.data)  
        .catch((err) => {  
          throw err;  
        });  
    } catch (err) {  
      console.log(err);  
      throw err;  
    }  
  }  
  

Answer 1

@eitan
You might find this thread on React Native and blob storage helpful as it discusses some possible solutions outside of just using the REST API.

When using Put Block you need to follow-up and use the Put Block List to successfully upload the file. There are a few similar threads on Stack Overflow which you might find helpful. I also recommend posting your question here as well so more people from our developer community can contribute.

https://stackoverflow.com/questions/50348815/put-block-list-forbidden-azure
https://stackoverflow.com/questions/58636249/upload-large-video-8gb-to-azure-blob-storage-from-angular-8-using-rest-put

-------------------------------

Please don’t forget to "Accept the answer" and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.

Answer 2

@deherman-MSFT : Thank you for the response,

of course, the final step should be Put Block List,

my problem is that the basic operation 'putBlock' isn't working for me.