Convert URL to File or Blob for FileReader readAsDataURL

Question

Reference  FileReader readAsDataURL  Considering the following example   function previewFile file       var reader    new FileReader       reader onloadend   function          console log reader result         reader readAsDataURL file       It states      instanceOfFileReader readAsDataURL blob        blob  The Blob or File from which to read     How can a local file URL like   file    C  path-to root png  be passed to the readAsDataURL      Is FileReader   available in a Firefox Addon

User · Answer

I know this is an expansion off of  tibor-udvari s answer  but for a nicer copy and paste  async function createFile url  type     if  typeof window      undefined   return    make sure we are in the browser   const response   await fetch url    const data   await response blob     const metadata         type  type     video quicktime        return new File  data   url  metadata

User · Answer

Here is my code using async awaits and promises   const getBlobFromUrl    myImageUrl    gt        return new Promise  resolve  reject    gt            let request   new XMLHttpRequest            request open  GET   myImageUrl  true           request responseType    blob           request onload        gt                resolve request response                      request onerror   reject          request send              const getDataFromBlob    myBlob    gt        return new Promise  resolve  reject    gt            let reader   new FileReader            reader onload        gt                resolve reader result                      reader onerror   reject          reader readAsDataURL myBlob             const convertUrlToImageData   async  myImageUrl    gt        try           let myBlob   await getBlobFromUrl myImageUrl           console log myBlob          let myImageData   await getDataFromBlob myBlob           console log myImageData          return myImageData        catch  err            console log err           return null           export default convertUrlToImageData

User · Answer

Add cors mode to prevent files cors blocked  fetch url  mode  cors                         then res   gt  res blob                         then blob   gt                            const file   new File  blob    dot png    type  image png                             console log file

User · Answer

Try this I learned this from  nmaier when I was mucking around with converting to ico  Well i dont really understand what array buffer is but it does what we need   function previewFile file       var reader    new FileReader       reader onloadend   function          console log reader result     this is an ArrayBuffer       reader readAsArrayBuffer file       notice how i just changed your readAsDataURL to readAsArrayBuffer   Here is the example  nmaier gave me  https   stackoverflow com a 24253997 1828637  it has a fiddle  if you want to take this and make a file out of it i would think you would use file-output-stream in the onloadend

User · Answer

The suggested edit queue is full for  tibor-udvari s excellent fetch answer  so I ll post my suggested edits as a new answer  This function gets the content type from the header if returned  otherwise falls back on a settable default type  async function getFileFromUrl url  name  defaultType    image jpeg      const response   await fetch url     const data   await response blob      return new File  data   name        type  response headers get  content-type      defaultType               await  can only be used in an async body  but showing it here for simplicity  const file   await getFileFromUrl  https   example com image jpg    example jpg

User · Answer

This information is outdated as of now  but cannot be deleted    You can create File instances just by specifying a path when your code is chrome-privileged   new File   path to file      File is a sub-class of Blob  so all File instances are also valid Blobs  Please note that this requires a platform path  and not a file URL  Yes  FileReader is available to addons    File and FileReader are available in all windows  If you want to use them in a non-window scope  like bootstrap js or a code module   you may use nsIDOMFile nsIDOMFileReader

User · Answer

To convert a URL to a Blob for FileReader readAsDataURL   do this   var request   new XMLHttpRequest    request open  GET   MY URL  true   request responseType    blob   request onload   function         var reader   new FileReader        reader readAsDataURL request response       reader onload    function e           console log  DataURL    e target result             request send

User · Answer

Expanding on Felix Turner s response  here is how I would use this approach with the fetch API    async function createFile      let response   await fetch  http   127 0 0 1 8080 test jpg      let data   await response blob      let metadata         type   image jpeg         let file   new File  data    test jpg   metadata            do something with the file or return it   createFile

[javascript] Convert URL to File or Blob for FileReader.readAsDataURL

Examples related to javascript

Examples related to firefox-addon

Examples related to firefox-addon-restartless