I am using the following code to covert a canvas image to blob.
In order to convert the blob to a file/filelist object, I need to pass that filelist to file handler.

Mycode:

var canvas1 = document.getElementById("preview");
var theImage = document.getElementById("blahProfile");
theImage.src = canvas1.toDataURL();
var blob = dataURItoBlob(theImage.src);

Is there any way to convert that blob to a file object?

I am using the following code to covert a canvas image to blob.
In order to convert the blob to a file/filelist object, I need to pass that filelist to file handler.

Mycode:

var canvas1 = document.getElementById("preview");
var theImage = document.getElementById("blahProfile");
theImage.src = canvas1.toDataURL();
var blob = dataURItoBlob(theImage.src);

Is there any way to convert that blob to a file object?

• javascript
• blob
• filelist

Share Improve this question Follow edited Nov 12, 2014 at 7:28 gion_13 41.5k1010 gold badges9898 silver badges111111 bronze badges asked May 29, 2014 at 6:20 madan Vmadan V 84433 gold badges1919 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

File objects contain more information than Blob objects, with properties like lastModifiedDate, and fileName. It doesn't make sense for your image data to have either of those properties, because it's not a file.

I assume you FileList handler users a FileReader to read File objects. However, the FileReader methods can process Blob objects as well (because File is a subclass of Blob). Thus, you can either:

• extract your FileReader code into a separate function that accepts a Blob or File (and possibly a resolution callback function) amd call that function when handling each of your FileList items and when processing your Blob of image data

• if your FileList handler only accesses list items by index (e.g., myFileList[i]) then you could fake a FileList simply by using an array of Blobs. For example, this function works with either a real FileList or array of Blobs:

  function processFileList(list) {
      var reader = new FileReader();
      reader.readAsText(list[0]);
      reader.addEventListener("loadend", function() {
          console.log(reader.result);
      });
  }
  

        // const file = new File([blob], imageFile.name,{
        //     type:imageFile.type,
        //     lastModified: new Date().getTime()
        // }, 'utf-8');
        const newFiles = [File,File...]
        const dataTransfer = new DataTransfer();
        newFiles.forEach(file => {
            dataTransfer.items.add(file)
        });
        // dataTransfer.files => FileList 
        // add the FileList to <input> of typr file
        input.files = dataTransfer.files;