Acessing files from Azure Blob within the Aurelia UI: Download or View now!

I currently have my files stored in Azure and I am looking for a way to either download or view them on the client side. This is how I envision the process:

Azure -> Api -> Client UI (Aurelia)

While I have come across several C# examples, I am unsure of how to bring the file to the UI side. Can anyone provide some assistance?

Thank you!

Edit:

Here is the code for the API:

public string getUtf8Text()
{
    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

    var containerName = "myContainer";
    var blobName = "myBlobName.pdf";                
    CloudBlobContainer container = blobClient.GetContainerReference(containerName);
    CloudBlockBlob blockBlob  = container.GetBlockBlobReference(blobName);

     string text;
     using (var memoryStream = new MemoryStream())
     {
        await blockBlob.DownloadToStreamAsync(memoryStream);
        text = System.Text.Encoding.UTF8.GetString(memoryStream.ToArray());
        return text;
     }
}

When attempting to download a file from the utf8 byte string, the client side code is as follows:

var byteCharacters =result.byteArray;
var byteNumbers = new Array(result.byteArray.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var octetStreamMime = "application/octet-stream";
var contentType = octetStreamMime;
var blob = new Blob([byteArray] {type: contentType});
FileSaver.saveAs(blob, result.blobName);

While this method works occasionally for PDFs, other times it displays blank pages. Moreover, when trying to download an MP4 file, it seems to hang indefinitely. Any insight into what might be causing these issues?

Answer №1

Every blob is assigned a unique URL address, which can be used to access its contents through a URL-compatible client.

The format of a blob URL typically resembles the following:

https://myaccount.blob.core.windows.net/mycontainer/myblob

For more details on how to name and reference containers, blobs, and metadata, refer to Naming and Referencing Containers, Blobs, and Metadata.

The real challenge lies in securing access to the blob for users. There are several options available:

  • You can set blobs in the container to be public, enabling anonymous access without authentication. This makes all blobs in the container accessible to anyone. For more information, see Manage anonymous read access to containers and blobs.
  • Alternatively, you can utilize a shared access signature to grant specific permissions and time-limited access to blobs within the container. While this option provides greater control than anonymous access, it requires additional planning. Learn more about shared access signatures in Shared Access Signatures, Part 1: Understanding the SAS model.

It's important to note that while individuals in possession of your account key can authenticate and access blobs within your account, it is advised not to share your account key with others. As the owner of the account, you can access your blobs from your application using authentication via the account key (also referred to as shared key authentication).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error has occurred in the Next.js App: createContext function is not defined

While developing a Next.js application, I keep encountering the same error message TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function every time I try to run my app using npm run dev. This issue arises when attempting to co ...

Initiating the node js service locally

I have been working on a Node.js and Gradle application, but I'm having trouble figuring out how to run it locally. So far, I've done the Gradle build (./gradlew) and NPM run build (compile), with all my dependencies neatly stored in the node_mo ...

Steps for eliminating the chat value from an array tab in React

tabs: [ '/home', '/about', '/chat' ]; <ResponsiveNav ppearance="subtle" justified removable moreText={<Icon icon="more" />} moreProps={{ noCar ...

typescript create object with some properties using object literal

Is there a way to initialize an instance of a class with an object literal that doesn't contain all the elements in the class, but those present are part of the class? class Example{ text:string; number:number; displayResult(){return thi ...

Exploring the @HostBinding argument in Angular directives

Need help grasping the concept behind the @Hostbinding argument: Snippet of the code: import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: '[appDropdown]' }) export class DropdownDirective { @HostBinding(&apos ...

Send Image Bitmap to Azure Face SDK for detection using the detectWithStream() function

I am currently working on a React application that aims to capture frames from the webcam and analyze them using the Azure Face SDK (documentation). Specifically, I would like to detect faces in the image and extract attributes such as emotions and head po ...

Encountering issues with MediaSession.setPositionState() and seekto functionalities not functioning properly

Having trouble with MediaSession.setPositionState() not displaying the audio time and seekbar not behaving as expected. const sound= document.querySelector('sound'); function updatePositionState() { if ('setPositionState' in navigato ...

There was an error encountered: Uncaught TypeError - Unable to access the 'append' property of null in a Typescript script

I encountered the following error: Uncaught TypeError: Cannot read property 'append' of null in typescript export class UserForm { constructor(public parent: Element) {} template(): string { return ` <div> < ...

Exploring the Ways to Determine Array Type in Typescript Generics

I'm working with a method that looks like this: public select(fieldName: keyof TType) In this scenario, TType can potentially be an array type. If fieldName is called with a type of User[], I want to access the properties of User instead of the defa ...

Steps for setting up single sign on in an Angular 2 application

Currently, I am working on a web application that has been developed using angular2. One of the requirements for this application is to incorporate a single sign-on feature, where users do not have to manually input their login credentials. Instead, the ap ...

Developing a TypeScript PureMVC project from scratch

Currently, I am working on a project to implement PureMVC in TypeScript using npm and grunt. Unfortunately, PureMVC has ended development on their project and there is a lack of resources for PureMVC in TypeScript online. The documentation only provides in ...

`Firebase User Instance and Custom Firestore Document`

Recently, I posted a question regarding Google Firebase Angular Firestore switchMap and encountered some issues. The question can be found here. After exploring AngularFireAuth, I learned that it is used to create a User object with fixed values, requirin ...

Conflicting React types found in pnpm monorepo

In the process of converting an inherited monorepo from yarn+lerna to pnpm workspaces, I am encountering some issues. Specifically, there are mismatching React versions causing errors in typescript. It seems that TypeScript is not recognizing the closest @ ...

Customize nestjs/crud response

For this particular project, I am utilizing the Nest framework along with the nestjs/crud library. Unfortunately, I have encountered an issue where I am unable to override the createOneBase function in order to return a personalized response for a person e ...

Updating an array of drag and drop elements in Angular Material

During my attempt to use drag and drop functionality with Angular Material, I encountered an issue with updating the `pos` key in a JSON array. Specifically, I wanted to set the `pos` value to the value of `event.currentIndex` while also adjusting the posi ...

Issue in Angular form: Element removal from the DOM does not remove it at the specified index, instead removes the last item

I'm encountering an issue where the wrong element is being removed from the DOM. In my onDelete() method, I am deleting a specific FormControl at a certain index, but in the actual DOM, it's removing the last item instead of the intended one. Fo ...

Merge type guard declarations

After studying the method outlined in this post, I successfully created an Or function that accepts a series of type guards and outputs a type guard for the union type. For example: x is A + x is B => x is A | B. However, I encountered difficulties usin ...

Utilizing a Dependency Injection container effectively

I am venturing into the world of creating a Node.js backend for the first time after previously working with ASP.NET Core. I am interested in utilizing a DI Container and incorporating controllers into my project. In ASP.NET Core, a new instance of the c ...

Error: Unable to iterate through posts due to a TypeError in next.js

Hi there, this is my first time asking for help here. I'm working on a simple app using Next.js and ran into an issue while following a tutorial: Unhandled Runtime Error TypeError: posts.map is not a function Source pages\posts\index.tsx (1 ...

Optimal techniques for deploying in the Azure DevOps NPM Registry for production and beta environments

Situation In my current project, I am looking to deploy an NPM package to a private Azure DevOps NPM Registry. This package has two versions - production and beta. However, while attempting to publish the package, I encountered an issue with Azure DevOps. ...