Typescript file creation result in empty type despite type specification

I am attempting to create a mocked File for testing an Angular unit test, and I am encountering some challenges.

Below is the code snippet from the spec file:

let content = "Hello Zip";
let data = new Blob([content], { type: 'application/zip' });
let arrayOfBlob = new Array<Blob>();
arrayOfBlob.push(data);
let applicationZip = new File(arrayOfBlob, "Mock.zip");

When I try to output applicationZip:

console.log(applicationZip);

The resulting object includes:

lastModified: 1492785142174

lastModifiedDate: Fri Apr 21 2017 10:32:22 GMT-0400

name:"Mock.zip"

size:9

type: ""

webkitRelativePath:""

proto: File

One of the methods that I need to test involves verifying the validity of the file's mime type.

However, in my current implementation, the type property always remains null. Even when attempting to set it to plain/text, there is no change in behavior.

It seems like there might be an issue with how I'm creating the mock File, but I can't identify the error.

angulartypescript

Answer №1

You can define the file type within the File constructor by providing a third parameter. Inside the File constructor, you have the option to specify the type of file like so:

let applicationZip = new File(arrayOfBlob, "Mock.zip", { type: 'application/zip' });

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

Converting an array of arguments into tuples within the range of <T extends Tuple> is denoted by [T, (...args: NonNullArray<T>) => any], where each tuple represents the argument of a

Let's start with a simple function that takes a tuple as its first argument and a function whose arguments are elements of the tuple that are not null as its second argument: let first: number | null | undefined; let last: number | null | undefined; l ...

typescripttuplestypescript-typingstypescript-genericsunions

Error encountered: The database is not found during the migration creation process in MikroORM

Attempting to create migrations with mikroORM has been a challenge as I am unable to generate the table itself. The error message indicating that the database "crm" does not exist leaves me puzzled about what steps I may have missed. Here is the code snip ...

typescriptconfigurationmikro-orm

Steps to validate Radio Buttons using ReactiveFormsModule in angularJS2:

Currently, I am a beginner in the world of AngularJS2 and I am focused on mastering validation within an AngularJS2 form using ReactiveFormsModule. However, my progression has hit a roadblock as I am uncertain about how to correctly validate a Radio button ...

validationangular

Troubleshooting npm install failure for firebase packages in Angular

Attempting to replicate the Angular project on my local machine: 1) Clone the project from Version Control 2) Run npm install 3) Installation fails Suspecting an issue with npm itself, I attempt to clear the cache using npm cache clear --force, but it ...

angularfirebasenpmnpm-install

How do I connect with the global error handling in Vue?

Within my Vue2 application, I am seeking a method to capture global Vue errors and transmit them to a logging or monitoring service such as Sentry. After attempting to overwrite the global error handler of Vue, I noticed that console logs were no longer a ...

typescriptvue.jsvuejs2

Controlling the webRTC stream state within a React/Redux application

In the process of developing a video chat application using react and employing redux for state management. Presently, utilizing agora for webRTC. Relevant webRTC events occur (such as stream additions, removals, and more), necessitating updates to the sta ...

reactjstypescriptreduxwebrtcagora-web-sdk-ng

Trouble installing TypeScript on MacBook - Terminal Glitch

I recently got Visual Studio Code on my Mac and wanted to add TypeScript for Angular. I believe I already installed Node.js or Git in the past. However, when I tried running this command from the TypeScript website in the Mac Terminal to install TypeScript ...

macosvisual-studiotypescriptnpmterminal

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Concealing the value of 'Zero' in an input field with TypeScript and Angular 2

<input type="text" class="form-control" id="transactionAmount" maxlength="10" HideZero="true" [(ngModel)]="userBalance.transactionAmount" ...

htmlangulartypescript

Retrieve parameters from the typeOf ngrx effects

I am currently dealing with the following code snippets: ngOnInit() { this.store.dispatch(new TutorialActions.GetTutorials(1, 20)); } export class GetTutorials implements Action { readonly type = GET_TUTORIALS constructor(public number: number, publ ...

angularrxjsobservablengrx

What is the process for uploading a single file to a server using Angular?

Looking to upload a single file to a server using Angular? Check out this resource for attaching and uploading one file: You can also view the code snippet here: https://stackblitz.com/edit/angularizjqax?file=src%2Fapp%2Fupload%2Fdialog%2Fdialog.componen ...

javascriptangularfile-upload

Utilizando Typescript com Ionic 2 e AngularJS para autenticar através de um método de post na requisição HTTP e

Greetings and good afternoon to everyone. I hope you all are doing well. I am a beginner in AngularJS, currently using Visual Studio, Ionic 2, and TypeScript. I have successfully connected my app to a REST API in .NET and have implemented a token for tes ...

angularjshttptypescriptionic2token

Angular is not displaying the data from the dynamically injected component in the main component

I have encountered an issue where I am attempting to showcase a component's HTML view within another component in a chatbot scenario. Let's refer to them as the chat component and component 2. Essentially, the chat component – responsible for r ...

htmlangulartypescriptangular-dynamic-componentsng-component-outlet

Angular 6 is throwing an error stating that the 'publish' property is not found on the type Observable<string>

Currently, I am working on my initial Angular project using Angular 6. To streamline the process of handling errors in one central location, I have decided to incorporate Error Handling by referencing this insightful article on Medium From the code snipp ...

angularrxjsangular6

Can I access the component attributes in Vuetify using Typescript?

For example, within a v-data-table component, the headers object contains a specific structure in the API: https://i.stack.imgur.com/4m8WA.png Is there a way to access this headers type in Typescript for reusability? Or do I have to define my own interfac ...

typescriptvue.jsvuetify.js

Generate iframes dynamically in Angular Fire by retrieving data from a database query, dealing with the unsafe value using DOM Sanitization

Currently, I am using Ionic and Angular with Firebase to develop a daily readings application that dynamically displays an iframe for embedded YouTube videos based on the date. Everything works fine until I try to use data bindings in the source URL for th ...

angulartypescriptiframedata-bindingxss

Exploring the capabilities of nested functions in Jasmine testing framework

I am trying to run a test in my project on a nested function within the code. The specific function I want to test has functions within other functions. Here is an example of the function: ngOnInit() { this.getMenu() } This is how I have set up ...

angularjasmine

Create forms that can be dragged and drop to your desired location, with the ability to

I am trying to implement drag and drop functionality to this https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg project and save the data to a JSON file. I have been using Angular CDK but I am facing an issue with the following function: o ...

angularangular-cdkangular-cdk-drag-drop

When attempting to parse a file name using a regular expression in TypeScript (or even plain Node.js), the unexpected outcome is a

Looking to extract language information from a filename? Check out this simple construct: The structure of my language.ts model is as follows: export interface Language { language?: string; region?: string; } The function designed for parsing the fi ...

node.jsregextypescript

Angular2 Edit form does not have radio button selected according to the value

When editing a form, the radio button does not appear checked according to the value retrieved. I was able to retrieve the last name from the database, but when trying to bind the gender with the radio button, it does not show as checked. <div clas ...

angular