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

I'm struggling with finding an answer to this question: "What is the most effective way to conduct a

I'm experimenting with a file upload. I decided to encapsulate the FileReader() inside an observable based on information I found in this discussion thread: onFileSelected(event: any) { this.importJsonFileToString(event.target.files[0]) .p ...

Issue: Encountering an ObjectUnsubscribedError while using Observables in RxJS and Angular2

Currently, I am in the process of self-teaching Angular2 and realize that I need to find better resources. One issue I am facing is related to moving my data calls to a service and utilizing Reactive Subject & BehaviorSubject as recommended by a friend. Wh ...

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

I'm having trouble creating an expression to validate numbers between 1.0 to 4.5 accurately. The current expression I'm using is not working as intended: /^[1-4]{0,1}(?:[.]\d{1,2})?$/ The requirement is to only allow values between 1.0 to ...

Can you explain the distinction between `any[]` and `{ [s: string]: any }`?

I was attempting to make this code snippet function properly: test(a: any[]) { let b: string[][] = []; b.push(Object.keys(a[0])); b.push(...a.map(e => Object.values(e))); } However, the compiler is throwing an error for the b.push(...a.ma ...

What steps can be taken to implement jQuery within an Angular 15 npm package?

In my development process, I often create my own npm packages using Angular and Typescript. One of the packages I am currently working on is a PDF viewer service, which includes a file named pdf-viewer.service.ts with the following code: import { Behavior ...

What is the best way for me to determine the average number of likes on a post?

I have a Post model with various fields such as author, content, views, likedBy, tags, and comments. model Post { createdAt DateTime @default(now()) updatedAt DateTime @updatedAt id String @id @default(cuid()) author U ...

Error in Typescript/React: Unable to access the property 'MaxEmailLength' as it is undefined

I am facing an unusual problem with TypeScript. I have two static classes that are mutually referencing each other and causing issues. Class ValidationHelper (single file) import { ValidationErrors } from '../dictionary/ValidationErrors'; ex ...

The observer error silently assumes an undefined type

Currently, I am attempting to implement the guidance provided in this Stack Overflow post on performing a File Upload using AngularJS 2 and ASP.net MVC Web API. The issue arises from the upload.service.ts file where an error is identified next to the prob ...

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Currently, I am struggling with an issue where there is no built-in method to retry flaky tests in Jest. My tech stack includes Jest + TypeScript + Puppeteer. Has anyone else encountered this problem or have any suggestions for possible solutions? I attem ...

what kind of bespoke entity in TypeScript

Exploring typescript for the first time, I have constructed this object: const startingState = { name: { value: "", error: false }, quantity: { value: 0, error: false }, category: "Grocery& ...

The call to react.cloneElement does not match any overloads

I'm encountering a typescript error in my React code when using React.cloneElement with the first parameter "children", and I am unsure of how to resolve it. As a newcomer to typescript, I believe that the type definitions in index.d.ts for cloneElem ...

The TypeScript in the React-Native app is lacking certain properties compared to the expected type

I recently integrated the https://github.com/react-native-community/react-native-modal library into my project and now I need to create a wrapper Modal class. Initially, I set up an Interface that extends multiple interfaces from both react-native and reac ...

sort the array based on its data type

Recently diving into typescript... I have an array that is a union of typeA[] | typeB[] but I am looking to filter based on the object's type interface TypeA { attribute1: string attribute2: string } interface TypeB { attribute3: string attri ...

Exploring the Benefits of Angular 2 Beta Typings within Visual Studio (ASP.NET 4)

During my initial experiences with Angular 2.0 alpha versions, I utilized the files from DefinitelyTyped to incorporate typings for TypeScript in Visual Studio. The process was straightforward - simply adding the d.ts files to the project. However, as we t ...

Guide to creating JSDoc for a TouchEvent handler

Looking to improve my shorter-js codebase with JSDoc for TypeScript definitions, but hitting a roadblock. I've implemented the on() function using Element.addEventListener, working well so far. However, when passing a TouchEvent as a parameter for an ...

Can a single shield protect every part of an Angular application?

I have configured my application in a way where most components are protected, but the main page "/" is still accessible to users. I am looking for a solution that would automatically redirect unauthenticated users to "/login" without having to make every ...

Import JSON data into Angular 2 Component

After much effort, I have finally figured out how to load JSON data into an Angular 2 Component. datoer.service.ts: import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from ...

Implementing rxjs switch between multiple observables

As I work with 2 observables, my goal is to retrieve a value from Observable1, then disregard it and only anticipate a value coming from Observable2. After that, repeat the process by getting a value from Observable1 once more, and so on. I am exploring w ...

"Optimize Your Data with PrimeNG's Table Filtering Feature

I'm currently working on implementing a filter table using PrimeNG, but I'm facing an issue with the JSON structure I receive, which has multiple nested levels. Here's an example: { "id": "123", "category": "nice", "place": { "ran ...

tips for concealing a row in the mui data grid

I am working on a data grid using MUI and I have a specific requirement to hide certain rows based on a condition in one of the columns. The issue is that while there are props available for hiding columns, such as hide there doesn't seem to be an eq ...