How to convert Blob to File in JavaScript

Question

I need to upload an image to NodeJS server to some directory  I am using connect-busboy node module for that   I had the dataURL of the image that I converted to blob using the following code   dataURLToBlob  function dataURL        var BASE64 MARKER     base64        if  dataURL indexOf BASE64 MARKER     -1            var parts   dataURL split               var contentType   parts 0  split      1           var raw   decodeURIComponent parts 1            return new Blob  raw    type  contentType              var parts   dataURL split BASE64 MARKER       var contentType   parts 0  split      1       var raw   window atob parts 1        var rawLength   raw length      var uInt8Array   new Uint8Array rawLength       for  var i   0  i  lt  rawLength    i            uInt8Array i    raw charCodeAt i             return new Blob  uInt8Array    type  contentType        I need a way to convert the blob to a file to upload the image   Could somebody help me with it

User · Answer

My modern variant   function blob2file blobData      const fd   new FormData      fd set  a   blobData     return fd get  a

User · Answer

Joshua P Nixon s answer is correct but I had to set last modified date also  so here is the code   var file   new File  blob    file name    lastModified  1534584790000      1534584790000 is an unix timestamp for  GMT  Saturday  August 18  2018 9 33 10 AM

User · Answer

This problem was bugg me for hours  I was using Nextjs and trying to convert canvas to an image file  I just use the other guy s solution but the created file was empty  So if this is your problem you should mention the size property in the file object  new File  Blob    my image  new Date    jpeg       type   quot image jpeg quot     lastModified  new Date      size  2       just add it  the value it s not important

User · Answer

You can use the File constructor   var file   new File  myBlob    name      As per the w3 specification this will append the bytes that the blob contains to the bytes for the new File object  and create the file with the specified name http   www w3 org TR FileAPI  dfn-file

User · Answer

I have used FileSaver js to save the blob as file  This is the repo   https   github com eligrey FileSaver js   Usage   import   saveAs   from  file-saver    var blob   new Blob   quot Hello  world  quot     type   quot text plain charset utf-8 quot     saveAs blob   quot hello world txt quot     saveAs  quot https   httpbin org image quot    quot image jpg quot

User · Answer

Typescript public blobToFile    theBlob  Blob  fileName string   File   gt               return new File  theBlob   fileName    lastModified  new Date   getTime    type  theBlob type       Javascript function blobToFile theBlob  fileName              return new File  theBlob   fileName    lastModified  new Date   getTime    type  theBlob type       Output  File  name   quot fileName quot   lastModified  1597081051454  lastModifiedDate  Mon Aug 10 2020 19 37 31 GMT 0200  Eastern European Standard Time   webkitRelativePath   quot  quot   size  601887       lastModified  1597081051454 lastModifiedDate  Mon Aug 10 2020 19 37 31 GMT 0200  Eastern European Standard Time     name   quot fileName quot  size  601887 type   quot image png quot  webkitRelativePath   quot  quot    proto    File

User · Answer

For me to work I had to explicitly provide the type although it is contained in the blob by doing so   const file   new File  blob    untitled     type  blob type

User · Answer

Use saveAs on FileSaver js github project   FileSaver js implements the saveAs   FileSaver interface in browsers that do not natively support it

User · Answer

This function converts a Blob into a File and it works great for me   Vanilla JavaScript  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      TypeScript  with proper typings   public blobToFile    theBlob  Blob  fileName string   File   gt        var b  any   theBlob        A Blob   is almost a File   - it s just missing the two properties below which we will add     b lastModifiedDate   new Date        b name   fileName         Cast to a File   type     return  lt File gt theBlob      Usage  var myBlob   new Blob       do stuff here to give the blob some data     var myFile   blobToFile myBlob   my-image png

[javascript] How to convert Blob to File in JavaScript

Examples related to javascript

Examples related to node.js

Examples related to file-upload

Examples related to blob