在没有Ajax或jQuery的情况下在IE9 / Angular 5 / TypeScript上使用FormData

Question

In my application Angular 5 / Typescript , I have an UploadFile component looks like :

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);
}

Work fine when this component is used on Chrome and Mozilla browsers, but when I go on IE 9 I have this error :

'FormData' is undefined

I looked in the git issues and Stackblitz projects, I have't found anything that can solve the problem with a modern solution.

IMPORTANT : I am looking for a solution that does not use jQuery nor Ajax

Thank you in advance for your help.

Answer 1

FormData is not available in IE9:

https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility

You will have to manually gather and encode the form data yourself.