How to Utilize FormData in IE9 with Angular 5 and TypeScript Without Ajax or jQuery

Within my Angular 5/Typescript application, there is an UploadFile component structured as follows:

component.html

....
<form #formUpload id="formUpload">
   <input type="file" class="input-file-ghost" (change)="onChangeFile($event.target.files)">
</form>
....

component.ts

export class UploadFileComponent implements OnInit {

  @Input() .....;
  @Output() filesAdded = new EventEmitter<File>();
  @ViewChild('formUpload') formUpload: ElementRef;
  ...

  constructor() { .... }

  ngOnInit() { .... }

  onChangeFile(files: File[]) { ..... }
}

Use case

<app-upload-file
        [uploadFileConfig]="...."
        (filesAdded)="....">
 </app-upload-file>

**********

formCvData: FormData = new FormData();
onFileUploaded($event) {
  const uploaded = $event;
  this.formLmData.set('.....', uploaded, uploaded.name);
}

The UploadFile component works seamlessly on Chrome and Mozilla browsers. However, when accessed in IE 9, the following error occurs:

'FormData' is undefined

Despite searching through various resources like git issues and Stackblitz projects, a modern solution to fix this issue without relying on jQuery or Ajax has not been found.

IMPORTANT: Seeking assistance for a resolution that eliminates the use of jQuery or Ajax.

Your support and suggestions are highly appreciated.

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

JavaScript onClick event not functioning properly on iOS devices

I have created a code that can detect when a user clicks on a cell in a table and retrieves the background color set for that cell. Everything works perfectly on my desktop computer, but when I attempt to use my iPad, it does not respond. I attempted to u ...

hyperlink to a page on a website hosted on a local server

I need help creating a hyperlink within my locally-hosted website that links to a specific id on the same page. Here is the code I have been using: <button onclick="location.href='http://127.0.0.1:5500/#projects'" onmouseover=" ...

AngularJS is in need of a properly formatted print layout, as the current

Currently, my code looks like this: <li ng-repeat="items in ferdigheter">{{ items.title}} <div class="circles"> <div class="circle" ng-repeat="a in thisnumber(items.stars)"></div> <div class="empty_circle" ng-repeat="a i ...

How does assigning a checkbox's value as 'undefined' result in the addition of ng-invalid?

I'm facing an issue with a checkbox in my Angular project. The checkbox has a false value of undefined, and even though it's not marked as required, the form doesn't validate when I check and uncheck it. This is because the class ng-invalid ...

Is it possible for ng-model to have undefined values when using empty strings

When passing user input to a controller function, I have encountered the issue that empty strings do not declare object properties. <form> <input type="text" ng-model="data.location" /> <input type="text" ng-model="data.radius" /> ...

What is the best way to keep track of the most recent 100 items?

In Angular, I want to store the last 100 items to display. Currently, I am using an array and inserting items with 'array.push'. If this method is not effective for this scenario, what alternative approach can I take? Here is a snippet of the co ...

Spinning a 3-dimensional vector in THREE.js using dual axes

Apologies for potentially posting a duplicate question. I am working with two 3D vectors: Center: (0, 0, 0) Orb: (0, 0, 100) My goal is to rotate the orb-vector around the center-vector on both the X and Y axes to ensure an object is always in view of ...

Ascending with Progress Indicator Slider

After successfully creating a Bootstrap 5 Carousel with an automated count for each slide (limited to 4) and a corresponding progress bar, I encountered an issue with getting the previous button to function correctly. While clicking the next button works s ...

Using jQuery causes a textarea to post NULL values

I have a form that stores data in a database, and I'm using jQuery to show either success or fail messages before clearing the form. The issue is with my textarea - it posts a NULL value when using jQuery but works fine without it. All other inputs wo ...

Exploring intricate Generics in Typescript with Components

I had a question regarding a more intricate version of this fundamental concept Rel: Can Generic JSX.Elements work in Typescript I distilled it down to the essential Elements: This is Object A that receives parameters from TypeA type TypeA = { label: ...

Trustpilot: The function window.Trustpilot.loadFromElement does not exist in Safari

I am looking to integrate 3 TrustPilots into my Angular application. import { Component, Input, OnInit } from '@angular/core'; declare global { interface Window { Trustpilot: any; } } window.Trustpilot = window.Trustpilot || {}; @Component ...

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Attempting to incorporate some fancy animations into my project, but running into layout issues when using position: absolute for the animation with transform. export function SlideLeft() { return trigger('slideLeft', [ state('void&a ...

AngularJS closes when clicked outside

I've been attempting to add a close on outside click functionality to my code, similar to this example: http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview However, I seem to be overlooking something as it's not working in my implementation. HT ...

What are the reasons behind the inability to import an image file in Next.js?

Having an issue with importing image file in Next.js I'm not sure why I can't import the image file... The image file is located at 'image/images.jpg' In Chrome browser, there are no error messages related to the image, However, in ...

Strange behavior observed when transclusion is used without cloning

During my experimentation with transclusion, I wanted to test whether the transcluded directive could successfully locate its required parent directive controller after being transcluded under it. The directives used in this experiment are as follows: - Th ...

Issues with link behavior when using Angular UI-Router

I am just starting to learn AngularJS and I'm trying to figure out how to pass a parameter using anchor tags within the $stateProvider code. I've been attempting to do so, but it doesn't seem to be working. Can someone guide me on the correc ...

Restrict input to only alphabets in HTML using Angular

Can someone guide me on how to restrict input to only accept alphabet characters in Angular? I am working with reactive forms and currently using a pattern validation which only gets triggered when the form is submitted. However, I need the input field t ...

The compatibility between SmoothState.js and FullPage.js appears to be lacking

I've been struggling for the past 3 hours and seem to be going nowhere. Here is the Javascript code I'm working with: jQuery(document).ready(function($){ 'use strict'; var $page = $('#fullpage'), options = { deb ...

What is the most effective method to guarantee the creation of an object prior to navigating through the code that relies on it?

I recently encountered an issue with my code that utilizes fetch() to retrieve and convert .tiff images into an html5 canvas for display in a browser using tiff.js (https://github.com/seikichi/tiff.js/tree/master). While the functionality mostly works as i ...

Remove input fields that were generated upon clicking a button

I'm facing an issue with my code that allows me to add inputs using @click="addInput()". However, I am struggling to delete specific inputs using @click="deleteInput(). When I try to delete an input with this.inputs.splice(index, 1), on ...