Converting a Blob object into a File, for Ms Edge

Question

I have a Blob Object, which is an image and I am trying to convert into a file object, But it shows errors in MS edge version 41. I am using formdata in 1st two attempts for the same

Attempt 1

fd.set('file', blobObj, fileName);
return (fd.get('file'));

This resulted in an error

object doesn't support this property or method 'set'

Attempt 2

I replaced set with append and then I got this

object doesn't support this property or method 'get'

Attempt 3

I replaced formdata entirely with a new logic which looked like this

  let fileObject = new File([u8arr], fileName, { type: mime });

and I got an error saying

object doesn't support this action

Is there any other method that can be used? Can I directly use blob as a file?

in my limited testing, `new FormData()` on Edge does support the `.set`, `.append` and `.get` methods. — TKoL, Nov 25 '19 at 10:02
@TKol it supports on the new 44 version, in 41 and 42 version it gives me the error — Thanny, Nov 25 '19 at 10:14
Why are you trying to `get` it anyway? Have you tried submitting the formData to a post endpoint? — TKoL, Nov 25 '19 at 11:35
Does this answer your question? [How to convert Blob to File in JavaScript](https://stackoverflow.com/questions/27159179/how-to-convert-blob-to-file-in-javascript) — TKoL, Nov 25 '19 at 11:37
@TKol sending formData directly to server will make it recieve as formdata too, not as a file — Thanny, Nov 28 '19 at 10:30

redhatvicky · Answer 1 · 2019-11-26T05:10:24.660

0

AFAIK, Your third approach seems to be working ,

Try once by hard-coding the mime type to "image/jpeg" / "image/png" and include the date modeified and then verify once

var fileInstance  = new File([blob], "FileName",{type:"image/jpeg", lastModified:new Date()})

If you are displaying it in javascript you should use something like this:

var URL = window.URL || window.webkitURL;
var url_instance = URL.createObjectURL(blob);
var image_source = new Image();
image_source.src = url_instance;
document.body.appendChild(image_source);

edited Nov 26 '19 at 05:10

answered Nov 26 '19 at 04:58

redhatvicky

1,912
9
8

That didnt work as file constructor is not supported in MS edge in 41,42 versions – Thanny Nov 28 '19 at 06:15

score 0 · Answer 2 · answered Nov 26 '19 at 07:07

A File object is a specific kind of a Blob, it's just missing the two properties: lastModifiedDate and name(file name property).

So, you could convert the blob object to file object using the following code:

    var blobtoFile = function blobToFile(theBlob, fileName) {
        //A Blob() is almost a File() - it's just missing the two properties below which we will add
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
    }

    var file = blobtoFile(blob, "test.png");

More detail information about using the above code, please check this sample.

Besides, please check the FormData Method Browser compatibility, from it we can see most of the methods support Microsoft Edge 44+(EdgeHTML 18+, more detail, please check this article).

So, if you want to use FormData set or get method, please try to upgrade the Windows version(Microsoft Edge is part of the operating system and can't be updated separately. It receives updates through Windows Update, like the rest of the operating system.). Otherwise, you could use a JavaScript Object to store the blob or file object.

Detail updated steps as below: Select Start > Settings > Update & Security > Windows Update , then select Check for updates and install any available updates.

Browser reads this as a file, but I have to send it to a server for further processing. When I send it to the server It reads it as a blob. I tried changing __proto_ to File's prototype, that didnt work as well. — Thanny, Nov 28 '19 at 09:56

Converting a Blob object into a File, for Ms Edge

2 Answers2