How do you Register a Blazor App to Upload Photos to Azure Blob Storage

George Irwin 0 Reputation points
2024-05-29T23:47:39.4066667+00:00

I've created a simple Blazor Application based on the standard Blazor Web application template to upload photos to Azure Blob Storage. It works when I run it in my computer, but I'm having trouble getting it to run when I Publish it to an Azure App Service. I receive an error: User's image

When I use the F12 debugging tools, it shows:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

The application uses the Blazor InputFile control and Azure Blob Storage to store the files. I don't know if it's because the application needs to declare that it needs to use the file system or if it just cannot access the Azure Blob Storage account. I assume it's related to not being able to access the Blob storage.

I just modified the Counter.razor page to do the file uploads. The other 2 pages (Home and Weather) work fine. Here is the code in question:

<@page "/counter"
@rendermode InteractiveServer
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
@inject BlobServiceClient blobservice
@inject IConfiguration configuration

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button>Click me</button>
<h1>Upload Photo</h1>
@if (showUpload)
{
    
Azure Blob Storage
Azure Blob Storage
An Azure service that stores unstructured data in the cloud as blobs.
2,538 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,448 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,136 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Sander van de Velde 30,096 Reputation points MVP
    2024-05-30T22:30:15.97+00:00

    Hello @George Irwin ,

    welcome to this moderated Azure community forum.

    Based on the code sample you share, I tried my myself and debugged the code via a breakpoint.

    I had to change the code a bit.

    Instead of using the:

    @inject BlobServiceClient blobservice
    @inject IConfiguration configuration
    

    I used a local variable for the BlobServiceClient and put the connectionstring directly in the code:

    var blobservice = new BlobServiceClient("DefaultEndpointsProtocol=https;AccountName=.....
    

    When I run this code, it works as expected:

    User's image

    the file is uploaded:

    User's image

    It seems the code on the page is not the problem.

    It seems either the injection fails or that environment variable is not working fine.

    Please not your server-side Blazor app is a web application so the environment variables are read from Application settings.

    Try to debug the application by setting a breakpoint both in the page and in the program.cs.

    As seen in you question, internal errors (a bug in the code) are not exposed to the browser (because hackers could learn from what is going wrong internally).


    If the response helped, do "Accept Answer". If it doesn't work, please let us know the progress. All community members with similar issues will benefit by doing so. Your contribution is highly appreciated.


  2. Bruce (SqlWork.com) 59,021 Reputation points
    2024-05-31T21:30:41.92+00:00

    as your hosting in azure, you probably want to use managed identity to access the storage account.

    https://learn.microsoft.com/en-us/azure/app-service/overview-managed-identity?tabs=portal%2Chttp

    to use the identity in your code:

    var containerClient = new BlobContainerClient(
       new Uri(containerEndpoint),
       new DefaultAzureCredential()
    );
    
    

    you probably want to set a local dev account to use:

    https://learn.microsoft.com/en-us/dotnet/azure/sdk/authentication/local-development-dev-accounts?tabs=azure-portal%2Csign-in-visual-studio%2Ccommand-line