How to instantiate a File object in JavaScript

Question

There s a File object in JavaScript   I want to instantiate one for testing purposes   I have tried new File    but I get an  Illegal constructor  error   Is it possible to create a File object      File Object reference   https   developer mozilla org en DOM File

User · Answer

The idea    To create a File object  api  in javaScript for images already present in the DOM     lt img src     img Products fijRKjhudDjiokDhg1524164151 jpg  gt   var file   new File   fijRKjhudDjiokDhg1524164151                             img Products fijRKjhudDjiokDhg1524164151 jpg                          type  image jpg         created object file console log file     Don t do that        but I did it anyway   -  the console give a result similar as an Object File    File 0   name   fijRKjokDhgfsKtG1527053050 jpg   lastModified  1527053530715  lastModifiedDate  Wed May 23 2018 07 32 10 GMT 0200  Paris  Madrid  heure d     t      webkitRelativePath      size  0       lastModified 1527053530715 lastModifiedDate Wed May 23 2018 07 32 10 GMT 0200  Paris  Madrid  heure d     t        name  fijRKjokDhgfsKtG1527053050 jpg  size 0 type  image jpg  webkitRelativePath     proto   File   But the size of the object is wrong      Why i need to do that    For example to retransmit  an image form already uploaded  during a product update  along with additional images added during the update

User · Answer

According to the W3C File API specification  the File constructor requires 2  or 3  parameters   So to create a empty file do   var f   new File        filename       The first argument is the data provided as an array of lines of text  The second argument is the filename   The third argument looks like   var f   new File        filename txt    type   text plain   lastModified  date      It works in FireFox  Chrome and Opera  but not in Safari or IE Edge

User · Answer

Because this is javascript and dynamic you could define your own class that matches the File interface and use that instead   I had to do just that with dropzone js because I wanted to simulate a file upload and it works on File objects

User · Answer

Now you can    x000D   x000D  var parts     x000D    new Blob   you construct a file        type   text plain     x000D      Same way as you do with blob   x000D    new Uint16Array  33   x000D     x000D   x000D     Construct a file x000D  var file   new File parts   sample txt     x000D      lastModified  new Date 0      optional - default   now x000D      type   overide mimetype     optional - default      x000D      x000D   x000D  var fr   new FileReader    x000D   x000D  fr onload   function evt   x000D     document body innerHTML   evt target result     lt br gt  lt a href   URL createObjectURL file    download     file name     gt Download     file name     lt  a gt  lt br gt type    file type   lt br gt last modified     file lastModifiedDate x000D    x000D   x000D  fr readAsText file   x000D   x000D   x000D

User · Answer

Now it s possible and supported by all major browsers  https   developer mozilla org en-US docs Web API File File  var file   new File   foo     foo txt       type   text plain

User · Answer

Update      BlobBuilder has been obsoleted see how you go using it  if you re using it for testing purposes       Otherwise apply the below with migration strategies of going to Blob  such as the answers to this question    Use a Blob instead  As an alternative there is a Blob that you can use in place of File as it is what File interface derives from as per W3C spec   interface File   Blob       readonly attribute DOMString name      readonly attribute Date lastModifiedDate          The File interface is based on Blob  inheriting blob functionality and expanding it to support files on the user s system    Create the Blob  Using the BlobBuilder like this on an existing JavaScript method that takes a File to upload via XMLHttpRequest and supplying a Blob to it works fine like this   var BlobBuilder   window MozBlobBuilder    window WebKitBlobBuilder  var bb   new BlobBuilder     var xhr   new XMLHttpRequest    xhr open  GET    http   jsfiddle net img logo png   true    xhr responseType    arraybuffer    bb append this response      Note  not xhr responseText    at this point you have the equivalent of  new File   var blob   bb getBlob  image png        more setup code    xhr send blob     Extended example  The rest of the sample is up on jsFiddle in a more complete fashion but will not successfully upload as I can t expose the upload logic in a long term fashion

[javascript] How to instantiate a File object in JavaScript?

Examples related to javascript

Examples related to file-upload

Examples related to upload