16

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!

mottosson
  • 3,283
  • 4
  • 35
  • 73
  • Same problem. I want to create a File with a string content and name. This works fine in every other browser but throws Function expected in EDGE: `filename='a';data='b';new File(new Blob([data]))` – masterxilo Oct 24 '19 at 08:42

2 Answers2

20

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'});
robbert229
  • 464
  • 5
  • 12
  • 3
    In addition, if you then set `blob.name = "image.png"`, the browser will treat it in the same way as a `File` – morloch Aug 08 '18 at 02:47
  • Good solution, but how would you test if the type of your variable is a file in this case? And I also need to differentiate between blobs and files... – Tony Bogdanov Sep 08 '21 at 17:25
13

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.

Farzad.Kamali
  • 553
  • 4
  • 10