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: ""
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)
})
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
})
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,
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With