Is there an alternative for File() constructor for Safari and IE?

Question

I am using the File() constructor for creating file object for uploading a blob file to the server. The following code works fine for Chrome, but fails for Safari and Internet Explorer.

image_url = new File([blob],file_name,{type: mimeString});

The code is breaking at this line and getting this error in console "FileConstructor is not a constructor" (evaluating 'new File([blob],file_name,{type: mimeString})')

Using the FileReader API is an alternative to this but I am not able to fix this issue.

Answer 1

I Suggest to use the blob api, I've found the same problem and I solved like that:

var html = <svg>whatever on svg </svg>
var fileName = "myfile.svg";
var blob = new Blob([html], {type: 'image/svg'});
blob.lastModifiedDate = new Date();
// var blobAttrs = {type: "image/svg"};
// var file = new File([html], fileName, blobAttrs);
var formData = new FormData();
formData.append("file",blob,fileName);

It is not a "file", but you can use it like it was.

Answer 2

According to web "Can I use" Safari does not support the new File() constructor. See this link http://caniuse.com/#feat=fileapi

So I think you have to either use FileReader or maybe use some of the polyfills listed here https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Especially this one could be useful for you https://github.com/mailru/FileAPI (I did not use it myself)

Also have a look at this SO answer What to use instead of FileReader for Safari?

Answer 3

If you can use ES6 classes:

class CustomFile extends Blob
{
    constructor(blobParts, filename, options) {
        super(blobParts, options);
        this.name = filename || "";
        if(options) {
          this.lastModified = options.lastModified;
        }
    }

    lastModified = 0;
    name = "";
}
const blob = new Blob();
const fileObject = new CustomFile([blob],"myfile");

console.log(fileObject);