1

I am currently working on uploading the screenshot of React UI to the Azure blob storage.

But I have some issues when I upload the screenshot image.

Here is my part of codebase.

./src/captureError.js
export const getCapturedImageBlob = async (container) => {
    const screenshot = await html2canvas(container);
    return screenshot;
}

export const uploadImageToBlobStorage = (screenshot, connection_string, container_name, blob_name) => {
    screenshot.toBlob(blob => {
        console.log(blob);
        const blobServiceClient = new BlobServiceClient(connection_string);
        const containerClient = blobServiceClient.getContainerClient(container_name);
        const blobClient = containerClient.getBlockBlobClient(blob_name);

        blobClient.uploadData(blob);
    })
}

./src/App.js
const screenshot = await getCapturedImageBlob(document.querySelector("#root"));
    uploadImageToBlobStorage(screenshot, 'https://{Account Name}.blob.core.windows.net', {Container Name}, {Blob name});

Once I tried to upload the screenshot, I got this error. enter image description here

PUT https://{Account Name}.blob.core.windows.net/{Container Name}/{Blob Name}?{Account Key} 401 (Server failed to authenticate the request. Please refer to the information in the www-authenticate header.)
Branch
  • 88
  • 7

2 Answers2

2

Thanks for the error screenshot. Looking at the error details, it seems like you are uploading the blob using an incorrect request URL.

PUT https://{Account Name}.blob.core.windows.net/{Container Name}/{Blob Name}?{Account Key}

The above syntax is incorrect. Account Key shouldn't be passed as a query string. If you are using the SAS token to upload your blob, the syntax is as shown below:

enter image description here

More Information about the SAS token is here. Please refer the sample code provided here and here.

NaveenBaliga
  • 449
  • 1
  • 2
  • 5
  • Thanks for answering to my question. I also think passing account key is not correct. But I also don't want to pass SAS token to the URL. And I want to make my storage fully access from all users. How can I do that? @NaveenBaliga. Cors issue is already fixed now. – Branch Apr 11 '23 at 13:31
  • I also removed account key from my URL. Now URL looks like this. https://{Account Name}.blob.core.windows.net/{Container Name}/{Blob Name}. But uploading also failed because of above issue. – Branch Apr 11 '23 at 13:35
  • Thanks NaveenBaliga. I used SAS token and I can connect to Storage. – Branch Apr 12 '23 at 17:05
0

The Azure Storage allows only authorized PUT (Upload)operations.

The supported authorizations in Azure storage are mentioned below:

  1. Shared Key (storage account key)
  2. Shared access signature (SAS) token.
  3. Azure Active Directory (Azure AD)

If you don't want to use the SAS token, You need to use AAD RBAC permissions or use SharedKey to access the storage while performing the PUT operation.

Sample code is here.

NaveenBaliga
  • 449
  • 1
  • 2
  • 5