Decode the byte array in the client-side model of the entity that was retrieved from an ASP.NET Core

I have implemented a SomeFile class:

C#:

public class SomeFile
{
    public byte[] Content { get; set; }

    public string MimeType { get; set; }

    public string Name { get; set; }
}

and the file is retrieved in the following manner:

public async Task<IActionResult> GetFiles(string guid)
{            
    return Ok(new SomeFile() { Content = zippedFiles.ToArray(), 
                   Name = $"zippedFiles.zip", MimeType = "application/x-zip-compressed" });
}

On the Angular side, I have created a model file:

Angular:

export interface SomeFile {
    Content: **Uint8Array** //is it correct to use this type?
    MimeType: string
    Name: string
}

and the http service receives this object like so:

public downloadZip(): Observable<any> {
    return this.http 
        .get(fooUrl)
        .map((response: Response) => <SomeFile> response.json());  
};

What type should be used for the Content property on the Angular side? Is it correct to use Uint8Array? Because I am encountering the error:

ERROR SyntaxError: Unexpected token P in JSON at position 0

Maybe I shouldn't use

.map((response: Response) => <SomeFile> response.json());
?

Answer №1

When dealing with JSON Format, binary files cannot be processed directly. Therefore, the binary information must be encoded into a base64 string before being returned.

In order to do this, it is necessary to convert the data type from byte[] to string.

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

Should I opt for 'typeof BN' or the BN Constructor when working with TypeScript and "bn.js"?

Note: Despite the recommendation to use BigInts instead of bn.js, I am currently working with a legacy codebase that has not been migrated yet. Below is the code that compiles and executes without any issues: import { BN } from "bn.js"; import a ...

Three.js functions smoothly on both Android devices and desktop computers using Chrome, unfortunately it is not compatible with Safari

After diving into learning three.js, I decided to incorporate it into my angular 11 project. I created a simple demo using a SphereBufferGeometry and deployed it on github pages. Surprisingly, when I accessed it on an android phone, everything worked perfe ...

Creating an object in JavaScript using an array type初始化数组类型为对象javascript

In my code, there is an interface defined as Products export interface Products{ category: string; imageUrl: string; price: number; title: string; } Within my component, I have a variable named products which is an array of type Product ...

SVG is not incorporated in the Typescript build

I'm facing an issue where my build using tsc --project tsconfig.dist.json (refer to the file below) does not include the assets (.svg files) that are imported and used in the code. How can I make TypeScript include these assets in the build? Some con ...

Prevent clicking outside the bootstrap modal in Angular 4 from closing the modal

Just starting out with angular4 and incorporating bootstrap modal into my project. I want the modal to close when clicking outside of it. Here's the code snippet: //in html <div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" rol ...

Unlock the solution housing extensive file directories

Once I build Bootstrap v4-alpha using npm, Visual Studio refuses to open my project due to long file paths, resulting in a hang-up. When using Bower, Bootstrap is installed in the following path: C:\Users\BigFont\Documents\GitHub&bsol ...

Is there a problem with ngModel while working with dynamically changing data?

I've been working on creating a custom datatable with Angular 4 CLI and JSON arrays. Successfully, I have managed to build a table with dynamic columns and rows. Now, my focus is on implementing a column filter using a dropdown checkbox style. Below i ...

PGP encryption: securing your data with private keys

My current project involves encrypting data and transmitting it to our server. I've come across various methods online that all seem to require a public key, private key, and secret password for encryption. Is there an easier way to encrypt using just ...

Incorporating a Custom Design with the HAP

I have a string that contains a stylesheet, and I am attempting to incorporate it into a parsed HtmlDocument with the help of the Html Agility Pack. Unfortunately, I am unable to modify the InnerText of a style node since it does not have a setter. What ...

What could be causing my customer directive to malfunction?

My main goal is to dynamically display different pages based on whether the user is logged in or logged out <!-- Display this for logged out users --> <ul *appShowAuthed="false" class="nav navbar-nav pull-xs-right&qu ...

Is there a way to assign a keyboard shortcut character to a textless Windows Forms button?

How can I assign a keyboard shortcut to a Windows Forms button that has no text? In my Windows Forms application, I have buttons with images but no text. Typically, the shortcut key for a button is designated using the ampersand character (&). However ...

Accessing URLs directly with the Angular 2 Router

I currently have a file named main.component.ts with the following code: It can be found in: root/ import {Component, OnInit, OnChanges, IterableDiffers} from 'angular2/core'; import {TypeService} from './type/type.service'; import { ...

Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element? For example, I need to calculate the dynamic height of the content. https://i.sstatic.net/2kNk3.png code .html <div class="margin-top-4 ...

How to prevent the 'page' output event from triggering when scrolling in ngx-datatable?

My preference is to avoid infinite scroll pagination; instead, I only want pagination to be triggered by clicking the page numbers in the footer. Since I am using server-side pagination, constantly triggering the 'page' event with every scroll ca ...

What is the best way to store an audio Blob in the repository file system?

Currently, I have set up a system to record user audio through the device's microphone and can successfully download it on the same device. However, my goal now is to store this audio in my database by making an API call. How can I efficiently send th ...

In React Typescript, there is an issue with react-router v4 where the Route component does not pass its props to the specified component

Struggling with React Router v4 and history usage in Browserrouter. Whenever attempting to access this.props.history.push("/"), the error pops up: TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> ...

What steps do I need to follow in order to set the language of the npx bootstrap datepicker to pt

I have been working on a project using Angular 4, where I incorporated ngx bootstrap for date picker functionality. However, I encountered an issue with the date picker being displayed in English. In an attempt to rectify this, I added the following lines ...

Is there a workaround for the React useContext issue in Typescript aside from using <Partial>?

I am currently working on a React app that utilizes the useContext hook, but I am facing challenges with correctly typing my context. Here is the code snippet in question: import React, { useState, createContext } from 'react'; import endpoints f ...

Utilizing Angular to Showcase Nested Properties in a Kendo Grid Column

Question: In my Angular application, I am working with a Kendo Grid and using the generateColumns method to dynamically create columns for the grid. The data is fetched from an API, including a property that contains an array of roles. Below is a snippet ...

At times, SessionManager and Session have been observed to be null without

I have been struggling with this issue for months, and despite researching extensively and trying various solutions, I have not been able to resolve it. I feel like I must be missing something obvious. My problem stems from using a custom SessionManager c ...