Fetch image and convert to File (axios)

fetchImage.js

// https://stackoverflow.com/questions/48470407/client-side-convert-png-file-stream-into-file-object

// Example src http://localhost:1337/uploads/bbf9e6e15a3841fba491dfd3972da6a4.jpg
// @returns bbf9e6e15a3841fba491dfd3972da6a4
const getImgName = (url) => url.slice(url.lastIndexOf('/') + 1, url.indexOf('.'));

const srcToFile = async (src, fileName = getImgName(src)){
  const response = await axios.get(src, {
    responseType: 'blob'
  });	
  const mimeType = response.headers['content-type'];
  return new File([response.data], fileName, { type: mimeType });
}

Thanks for this.

Here's a fix that works for me:

const getImgName = (url) => url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));

Because my URL was
// Example src http://localenv.test/uploads/bbf9e6e15a3841fba491dfd3972da6a4.jpg

SO I had to edit the getImgName using lastIndexOf to get the file extension.