Connect Blob storage to an application through UI

Question

I'm planning to host my application in azure and give the functionality to browse the files in blob storage through UI. Is it possible to give the browse functionality similar to any web application which allows you to upload data or do we have to compulsorily specify the connection key ? If yes,what if I have access to only certain csv files in the blob storage in the same instance.Can I still browse the list of available csv files in the blob via my UI ?

Answer 1

@sanjith tummala Welcome to Microsoft Q&A Forum, Thank you for posting your query here!

Yes, it is possible to give the browse functionality similar to any web application which allows you to upload data. You can use Azure Blob Storage REST API to list the blobs in a container. You can also use Azure Storage Explorer to browse the list of available csv files in the blob via your UI. If you have access to only certain csv files in the blob storage in the same instance, you can still browse the list of available csv files in the blob via your UI by specifying the connection key for the container that contains the csv files.

To access the Blob storage, you will need to provide the connection string or the storage account name and key. If you only have access to certain CSV files in the Blob storage, you can use Shared Access Signatures (SAS) to grant temporary access to those files. You can create a SAS token with read permission for the specific CSV files and include it in the REST API call to list the blobs. This way, you can browse the list of available CSV files in the Blob storage via your UI without exposing the storage account key.

Option 2 : You can also create a web application and use the Azure Blob Storage client library to connect to the blob storage account and fetch the list of available files.

To access the blob storage account, you will need to provide the connection string or a shared access signature (SAS) token with appropriate permissions. If you want to restrict access to only certain CSV files, you can create a container in the blob storage account and set the appropriate access policy for the container. This way, you can provide the SAS token for the container and limit access to only the specified CSV files within that container.

Once you have the list of available files, you can display them in a UI, such as a table, and allow users to select the files they want to download or view.

Here's an example code snippet to fetch the list of available files in a container:

using Azure.Storage.Blobs;

// Create a BlobServiceClient object by providing the connection string
BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);

// Get a reference to a container
BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(containerName);

// List all the blobs in the container
foreach (BlobItem blobItem in containerClient.GetBlobs())
{
    Console.WriteLine(blobItem.Name);
}

Note that this code will list all the files in the container. If you want to filter the files based on some criteria, such as file extension or metadata, you can use the BlobContainerClient.GetBlobsByHierarchy() method.

Additional information: Upload an image to an Azure Storage blob with JavaScript

Use client-side JavaScript frameworks like React, Angular, or Vue.js to create a single-page application that interacts with Azure Blob Storage using client-side libraries like @azure/storage-blob or azure-storage-js. You can use these client-side libraries to upload files to Blob Storage and display a list of files in a container.

Please let us know if you have any further queries. I’m happy to assist you further.

---

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