Instantiate File object in Microsoft Edge

Question

I'm trying to create an image file from a blob-object using the File API and then add it to a form to be sent via XHR. Works like a charm in chrome, but crashes the app in Microsoft Edge.

let file = new File([blobContent], "image.png");

let form = new FormData();
form.append("file", file);

Are there any alternatives to the File API or workarounds to attach a file to the form? If I just add the blob to the form it's not recognized as an image.

Thanks!

Answer 1

Currently IE11, and Edge support the FileAPI but not the File constructor.

In the link that you posted to caniuse.com, there are notes for IE and Edge stating that the File constructor is not supported. I encountered the same issue and my work around was to use Blob instead of File, and then set the type of the blob.

var blob = new Blob([blobContent], {type : 'image/jpeg'});

Answer 2

This is what I did and works

// to change Blob to File
private blobToFile(theBlob: Blob, fileName: string): File {
   const b: any = theBlob;
   b.lastModifiedDate = new Date();
   b.name = fileName;
   return b as File;
}

let file;
if (!navigator.msSaveBlob) { // detect if not Edge
   file = new File([b], document.originalName, { type: document.mimeType });
} else {
   file = new Blob([b], { type: document.mimeType });
   file = this.blobToFile(file, document.originalName);
}

Now can continue by variable file as a File in Edge or other browsers.