Convert blob to file

Question

I need to convert a blob to file i javascript.

Im using File API

var blob = new Blob(byteArrays, { type: contentType });

This is return from a function reading a cropped images.

The old upload function are using $files as input.

I want to convert that blob to file, and then set the name and type in that object. How do I do this??

http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side — imtheman, Dec 18 '14 at 18:53
How do I set the values of type and name in that file object? — Delete me, Dec 18 '14 at 19:14
I need something like this: FilelastModified: 1371548472000lastModifiedDate: Tue Jun 18 2013 11:41:12 GMT+0200 (Rom, sommertid)name: "IMG_0221.JPG"size: 68764type: "image/jpeg"webkitRelativePath: ""__proto__: File — Delete me, Dec 18 '14 at 19:15
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) — S.Saderi, Oct 21 '20 at 07:16

score 43 · Answer 1 · answered Aug 13 '16 at 19:11

43

It's easy:

var blob = new Blob(byteArrays, { type: contentType });
var file = new File([blob], filename, {type: contentType, lastModified: Date.now()});

or just:

var file = new File([byteArrays], filename, {type: contentType, lastModified: Date.now()});

The code works in Chrome and Firefox, but not IE.

answered Aug 13 '16 at 19:11

cuixiping

24,167
8
82
93

2

Thanks. `new File([blob], "uploaded_file.jpg", { type: "image/jpeg", lastModified: Date.now() })` line works for me – asmmahmud Apr 23 '18 at 10:28
the File constructor is not supported in Edge and Safari mobile – Murhaf Sousli Jun 10 '18 at 21:17
var file = new File([blob], filename, {type: contentType, lastModified: Date.now()}); is not working in typescript or in Angular 5. getting an error as expected 0 argument and got the 3 argument. – Nik Oct 23 '19 at 13:19
@Nik It works well in typescript as my testing. You need update your typescript to new version. – cuixiping Oct 24 '19 at 03:38
This does not work in TypeScript: `Blob is not assignable to type BlobPart` – Loolooii Feb 26 '21 at 11:24

score 14 · Answer 2 · answered Dec 19 '14 at 11:27

I solved the file problem like this:

    function base64ToFile(base64Data, tempfilename, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    var file = new File(byteArrays, tempfilename, { type: contentType });
    return file;
}

Next problem is the format that angular-file-upload is reading the file in..

This is resolved. I droped the $files in angular-file-upload and send the file directly to the server. It works fine! — Delete me, Dec 19 '14 at 12:19

score 5 · Answer 3 · answered Feb 12 '18 at 15:45

5

in Edge and Safari, just use blob structure:

var blob = new Blob(byteArrays, { type: contentType });
blob.lastModifiedDate = new Date();
blob.name = name;

answered Feb 12 '18 at 15:45

Xuejun

51
1
3

Yes it worked. I just used this Blob object in the place of File object. – Anu Shibin Joseph Raj May 21 '18 at 06:12
Note : It wasn't working if I didn't set the blob.name and simply used the Blob object as it is. – Anu Shibin Joseph Raj May 21 '18 at 06:13

score 1 · Answer 4 · answered Jul 31 '18 at 12:43

In IE10 there is no File constructor, but you can use the following in typescript:

private createFile(bytes: string, name: string): File {
    const file: File = <File>Object.assign(new Blob([bytes]), { lastModifiedDate: new Date(), name: name });
    return file;
  }

score 0 · Answer 5 · answered Oct 29 '21 at 15:17

https://stackoverflow.com/a/62227874/13081559

// here file_name will be name of that particular file 

let fileData =  function dataURLtoFile(base64, file_name) {
 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
 bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 while(n--){
 u8arr[n] = bstr.charCodeAt(n);
 }
return new File([u8arr], filename, {type:mime});
}

Convert blob to file

5 Answers5

Linked