30

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??

4
  • 1
    updates.html5rocks.com/2011/08/…
    – imtheman
    Commented Dec 18, 2014 at 18:53
  • 1
    How do I set the values of type and name in that file object?
    – Delete me
    Commented Dec 18, 2014 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
    Commented Dec 18, 2014 at 19:15
  • Does this answer your question? How to convert Blob to File in JavaScript
    – S.Saderi
    Commented Oct 21, 2020 at 7:16

5 Answers 5

44

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.

5
  • 2
    Thanks. new File([blob], "uploaded_file.jpg", { type: "image/jpeg", lastModified: Date.now() }) line works for me
    – asmmahmud
    Commented Apr 23, 2018 at 10:28
  • the File constructor is not supported in Edge and Safari mobile Commented Jun 10, 2018 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
    Commented Oct 23, 2019 at 13:19
  • @Nik It works well in typescript as my testing. You need update your typescript to new version.
    – cuixiping
    Commented Oct 24, 2019 at 3:38
  • 1
    This does not work in TypeScript: Blob is not assignable to type BlobPart
    – Loolooii
    Commented Feb 26, 2021 at 11:24
14

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..

1
  • This is resolved. I droped the $files in angular-file-upload and send the file directly to the server. It works fine!
    – Delete me
    Commented Dec 19, 2014 at 12:19
5

in Edge and Safari, just use blob structure:

var blob = new Blob(byteArrays, { type: contentType });
blob.lastModifiedDate = new Date();
blob.name = name;
2
  • Yes it worked. I just used this Blob object in the place of File object. Commented May 21, 2018 at 6:12
  • Note : It wasn't working if I didn't set the blob.name and simply used the Blob object as it is. Commented May 21, 2018 at 6:13
1

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;
  }
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.