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:
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
})
contentType: 'image/jpeg' or contentType: 'image/png'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,
});
}
Answer from @Alphapico works like a charm, just have to return the file:
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,
});
return file;
}
might be case to case scenario
I would use a function like this one instead of trying to guess the filename and type:
function getExtensionFromMimeType(mimeType) {
const mimeToExtension = {
'image/jpeg': 'jpg',
'image/png': 'png',
'image/gif': 'gif',
'image/bmp': 'bmp',
'image/svg+xml': 'svg',
'image/webp': 'webp',
// Add more MIME types and their extensions as needed
};
return mimeToExtension[mimeType] || '';
}
const urlToFile = async (url) => {
const response = await fetch(url);
const blob = await response.blob();
// Get the filename from Content-Disposition
const contentDisposition = response.headers.get('Content-Disposition');
let fileName = contentDisposition?.match(/filename="([^"]+)/)?.[1];
if (!fileName) {
fileName = "image." + getExtensionFromMimeType(blob.type);
}
const file = new File([blob], fileName, { type: blob.type });
return file;
}
FileobjectFileobject