How to convert image source into a JavaScript File object

Question

I have an image URL "https://cdn.shopify.com/s/files/1/0234/8017/2591/products/young-man-in-bright-fashion_925x_f7029e2b-80f0-4a40-a87b-834b9a283c39.jpg", and want to convert it into javaScript File Type object.

: File
   lastModified: 1591250106736
   lastModifiedDate: Thu Jun 04 2020 11:25:06 GMT+0530 (India Standard 
   Time) {}
   name: "7.jpeg"
   size: 369742
   type: "image/jpeg"
   webkitRelativePath: ""

I'm sorry, but I don't get it. You have a path to an image. Ok. What do you want to do with that path? Or with the image. "Convert it to File Type" makes no sense for me. — Torf, Jun 03 '20 at 18:10
@Torf I think the OP wants to get the file as a browser `File` object — thammada.ts, Jun 03 '20 at 18:11
@Torf, i want to convert image source into browser `File` object — Kumar, Jun 04 '20 at 06:35
Maybe that has been answered here: https://stackoverflow.com/questions/43358456/convert-image-uri-into-javascript-file-object — Torf, Jun 04 '20 at 06:45

Kumar · Accepted Answer · 2020-07-16T05:37:28.787

Convert your image src https://cdn.shopify.com/s/files/1/0234/8017/2591/products/young-man-in-bright-fashion_925x_f7029e2b-80f0-4a40-a87b-834b9a283c39.jpg into Base64 ULR format and than convert Base64 URL into javaScript File Object.

***Here is the code for converting "image source" (url) to "Base64".***

let url = 'https://cdn.shopify.com/s/files/1/0234/8017/2591/products/young-man-in-bright-fashion_925x_f7029e2b-80f0-4a40-a87b-834b9a283c39.jpg'
const toDataURL = url => fetch(url)
      .then(response => response.blob())
      .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onloadend = () => resolve(reader.result)
      reader.onerror = reject
      reader.readAsDataURL(blob)
     }))


***Here is code for converting "Base64" to javascript "File Object".***

  function dataURLtoFile(dataurl, filename) {
     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});
  }


*** Calling both function ***

  toDataURL(url)
  .then(dataUrl => {
     console.log('Here is Base64 Url', dataUrl)
     var fileData = dataURLtoFile(dataUrl, "imageName.jpg");
     console.log("Here is JavaScript File Object",fileData)
     fileArr.push(fileData)
   })

thammada.ts · Answer 2 · 2020-06-06T11:26:35.617

14

I'm assuming you want to run this in a browser environment. You can use the native fetch() method, read the response as Blob and convert it to a File object.

contentType should be based on the type of the actual image downloaded.

You can read more about several approaches and browser support to convert a Blob to File here:

Convert blob to file

How to convert Blob to File in JavaScript

const url = 'https://cdn.shopify.com/s/files/1/0234/8017/2591/products/young-man-in-bright-fashion_925x_f7029e2b-80f0-4a40-a87b-834b9a283c39.jpg?v=1572867553'
const fileName = 'myFile.jpg'

fetch(url)
  .then(async response => {
    const contentType = response.headers.get('content-type')
    const blob = await response.blob()
    const file = new File([blob], fileName, { contentType })
    // access file here
  })

edited Jun 06 '20 at 11:26

answered Jun 04 '20 at 07:50

thammada.ts

5,065
2
22
33

any pointers on how to also attach a temporary path for the File object? – Satonamo Feb 23 '22 at 03:12
@thammada.ts When I used this, I got text/html for the file type, and the link was an image.. any idea how to solve this? thanks – user10033434 Dec 31 '22 at 15:32
@user10033434 the content type is sent by the target server. It's possible that the link you are fetching returns an incorrect type in the header. If you are sure about the content type you can used a fixed value like for example `contentType: 'image/jpeg'` or `contentType: 'image/png'` – thammada.ts Jan 02 '23 at 12:44

score 8 · Answer 3 · answered Jul 02 '21 at 08:49

8

For more elegant solution use this

const getUrlExtension = (url) => {
    return url
      .split(/[#?]/)[0]
      .split(".")
      .pop()
      .trim();
  }

const onImageEdit = async (imgUrl) => {
    var imgExt = getUrlExtension(imgUrl);

    const response = await fetch(imgUrl);
    const blob = await response.blob();
    const file = new File([blob], "profileImage." + imgExt, {
      type: blob.type,
    });
}

answered Jul 02 '21 at 08:49

Alphapico

2,893
2
30
29

I received "Failed to fetch" when I gave it an URL of an image on AWS S3. Why is that? the image can be seen on the browser. – user10033434 Dec 26 '22 at 13:06

How to convert image source into a JavaScript File object

3 Answers3

Linked