There is no such property as formData.delete()

When I am using a FormData object to upload a file, I want to add functionality to delete the file from FormData. However, I encountered an error stating that the delete property does not exist on the FormData object.

formData.delete(fileName)

Code

upload(){
    let formData = new FormData();
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
     let files: FileList = inputEl.files;
    formData.append('uploadFile', files, files.name);
}

delete(fileName){
    formData.delete(fileName);
}

Answer №1

Sharing variables between methods is not possible in JavaScript, so you have to use a property or retrieve the method's result instead.

The code snippet below demonstrates storing the formData in a private property and accessing it within each method using this.formData.

private formData: FormData;

upload() {
    this.formData = new FormData();
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
    let files: FileList = inputEl.files;
    this.formData.append('uploadFile', files, files.name);
}

delete(fileName){
    this.formData.delete(fileName);
}

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

Integrating Angular 2 code into an existing JSF web application

I have a web application developed using JSF and Maven. Currently, the UI is built using JSF and I would like to add new screens using Angular 2 code within the same application while making REST calls. I am unsure about where to integrate the Angular co ...

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

Encountering difficulty retrieving host component within a directive while working with Angular 12

After upgrading our project from Angular 8 to Angular 12, I've been facing an issue with accessing the host component reference in the directive. Here is the original Angular 8 directive code: export class CardNumberMaskingDirective implements OnInit ...

Displaying a random element from the state array in React Native

I'm attempting to display a random item from the state array, with the possibility of it changing each time the page reloads. Here's what I have tried so far, any suggestions or ideas are welcome! This is my current state: state = { randomIt ...

Tips for making unique Angular Material mat-menu-items from scratch

Is there a way to fully customize how menu items appear, including displaying multiple lines of text with different font sizes and colors? Currently, it seems that only the first line of text is being shown. For example: <mat-menu> <div mat-menu ...

Setting up the 'nativescript-stripe' plugin in your NativeScript Vue project for seamless integration

Trying to integrate the «nativescript-stripe» plugin into my Nativescript Vue app has been a challenge. The documentation and demos on the plugin's GitHub are geared towards Angular and TypeScript, making it difficult to adapt for Vue. Can anyone pr ...

Using the setupFiles option to set up files and execute code prior to running tests

I need to ensure that some code is executed before all tests are run. My jest.config.js setup: // truncated... setupFilesAfterEnv: [ "./jest.setup.ts" ] The content of jest.setup.ts: async function setUp() { const first = new Prom ...

Troubleshooting issue with Angular-CLI and Cordova plugin integration

While attempting to build an Angular 4 app using ng-build, I encountered an error when trying to access device.uuid: /navigation.component.ts (14,5): Cannot find name 'device'. Every plugin referenced in TS files is triggering this error. I a ...

Guide on transitioning Angular 2 RC 1 (or an earlier version) Forms to the new Forms in Angular 2 RC 2 / RC 4

I am currently in the process of upgrading my Angular 2 RC 1 app to Angular 2 RC 4, and part of this update involves migrating my existing forms to Angular 2 RC 4 New Forms. Could someone provide guidance on how to successfully update my existing forms to ...

The Express API controller is unexpectedly receiving empty strings

I am encountering an issue where my API is receiving an empty string instead of the expected data when I send post requests with a single string in the body. Below are the client, server, and controller components involved: Function call (client): const ...

What is the process for connecting custom transformers to a compiler host?

My custom TypeScript watcher is set up like this: const compilerHost = typescript.createWatchCompilerHost(config.fileNames, config.options, typescript.sys, undefined, reportDiagnostic) typescript.createWatchProgram(compilerHost) I am trying to integrate ...

Having trouble showcasing the response data from a service in Angular onto the HTML view

I am facing an issue in my Angular2 application where I am trying to utilize a GitHub service to display returned data on the UI. Initially, I encountered an error stating "Cannot find a differ supporting object '[object Object]' of type 'o ...

Customizing hover color with tailwind CSS

How can I change the color of an icon on mouseover using Tailwind CSS? I have tried to go from this https://i.sstatic.net/ObW6C.png to this https://i.sstatic.net/Tagp3.png, but it's not working. .btn { @apply agt-h-10 agt-w-10 agt-bg-zinc-100 agt- ...

Troubleshooting Error with Jasmine and Karma in Ionic 2: Resolving Issue with 'ng test' Command

I was trying to follow a tutorial on unit testing with Ionic 2, which can be found at the following link: However, when I ran the command "ng test," I encountered the following error message: C:\xampp\htdocs\AppFineMobile>ng test 27 03 ...

Exploring the world of Vue and Pinia: managing and accessing data like

While delving into Vue and Pinia, I encountered a data management issue on the user side. On my main page, I showcase categories and auction items. However, upon navigating to a specific category in the catalog, the data for auction items remains in the st ...

Enhance Vuetify functionality using TypeScript for custom components

I'm facing a challenge with extending a Vuetify component and setting default props in TypeScript. While I had success doing this in JavaScript, I am struggling to do the same in TS. Below is an example of how the Component was implemented in JS: imp ...

Having difficulty specifying the class type in Typescript

I am currently working on defining a 'Definition' type in Typescript. In this case, a Definition could be either a class constructor or an object. Here is the code snippet that illustrates my approach: if (this._isConstructor(definition)) { r ...

Tips for testing nested subscribe methods in Angular unit testing

FunctionToTest() { this.someService.method1().subscribe((response) => { if (response.Success) { this.someService.method2().subscribe((res) => { this.anotherService.method3(); }) } }); } Consider the following scenario. ...

Is it possible to utilize the returned value of a function within an if statement?

Is there a way to return the result of a function without needing to declare a variable? Can you return the result of a function in a single line? How can you return the result of a function inside an if statement? Is it possible to use a function's ...

Typescript - optional type when a generic is not given

I am hoping for optionalFields to be of type OptionalFieldsByTopic<Topic> if a generic is not provided, or else OptionalFieldsByTopic<T>. Thank you in advance for the assistance. export interface ICreateItem<T extends Topic = never> { // ...