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.

Hey @Johny me, I found that lot of people helped my answer, would you accept it as correct? — BrunoLoops, Mar 23 '21 at 16:52

score 21 · Accepted Answer · answered Apr 01 '16 at 18:04

21

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.

answered Apr 01 '16 at 18:04

BrunoLoops

554
5
20

Thanks for saving my day! – Jaison James Dec 07 '17 at 12:00
1

2 years later this saved me supporting ios 9.3. – resting Sep 05 '18 at 07:55

score 4 · Answer 2 · edited May 23 '17 at 12:34

4

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?

edited May 23 '17 at 12:34

Community

1
1

answered Nov 20 '15 at 08:10

David Votrubec

3,968
3
33
44

Thanks!! let me give a try to these possible solutions. – Prabhjot Kaur Nov 20 '15 at 08:24
1

Well I am using https://github.com/danialfarid/ng-file-upload directive, and using the shim file and have mentioned the code as mentioned in the Cross-browser support part, but I am not able to upload a file on Safari. – Prabhjot Kaur Nov 20 '15 at 12:19
Yes the same error "FileConstructor is not a constructor (evaluating 'new File([blob],file_name,{type: mimeString})')" – Prabhjot Kaur Nov 20 '15 at 12:51
The docs says `on demand flash FileAPI shim loading no extra load for html5 browsers.` so my guess is that perhaps you forgot to load/call that FileAPI shim? – David Votrubec Nov 20 '15 at 12:55
` ` – David Votrubec Nov 20 '15 at 12:56
'ng-file-upload-shim.min.js' this is the file that I have included in the project – Prabhjot Kaur Nov 20 '15 at 12:58
Yes I have included this file in my project. – Prabhjot Kaur Nov 20 '15 at 13:00
Try call `new File()` in dev console. If it produces error, then the shim is probably not loaded. Also have a look at this SO answer http://stackoverflow.com/questions/30727052/file-constructor-in-ie-and-safari – David Votrubec Nov 20 '15 at 13:08

score 0 · Answer 3 · answered Aug 12 '19 at 12:29

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

score 0 · Answer 4 · answered Oct 14 '20 at 01:51

There is a File ponyfill on npm which works with modern module imports. This makes usage simple but you do need to import it in every module where you use new File().

import File from '@tanker/file-ponyfill';

const myFile = new File(['somefiledata'], 'example.txt', { type: 'text/plain'});

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

4 Answers4

Linked