How to to get Image file metadata from it's path

Question

I want to upload a image file from Reactjs which is in my project folder ("../assets.cover.png") without using input, when I'm trying import cover from "../assets.cover.png" it's giving me file path but what I need is file metadata to upload it.

Basically my final intention is to upload that image file and calculate user upload speed.

Answer 1

I was able to resolve it after reading after reading this documentation

import cover from "../assets/cover.png"; // importing img file

let blob = await fetch(cover).then((r) => r.blob()); //creating blob object

const file = new File([blob], "cover.png", {
  type: "image/png",
});

console.log(file);

// output
// {
//   lastModified: 1656486792733
//   lastModifiedDate: Wed Jun 29 2022 12:43:12 GMT+0530 (India Standard Time) {}
//   name: "cover.png"
//   size: 1446458
//   type: "image/png"
//   webkitRelativePath: ""
// }

Answer 2

The imported image is just a file path relative to the base url for use on properties, you'll have to read the file to do what you are attempting.