0

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.

Amerjit
  • 23
  • 4

2 Answers2

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: ""
// }
Amerjit
  • 23
  • 4
0

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.

RuiSiang
  • 154
  • 6
  • How to read image file and get it's baseUrl ? @RuiSiang – Amerjit Jun 29 '22 at 02:32
  • In your case, the "cover" variable that you got from the import statement is the image files url relative to the react app baseurl. – RuiSiang Jun 29 '22 at 02:36
  • Is there is any way to get metadata of file just like we get when we use input of type files for eg `coverImg: File lastModified: 1655965886803 lastModifiedDate: Thu Jun 23 2022 12:01:26 GMT+0530 (India Standard Time) {} name: "1655921371215_eventCover.avif" size: 35518 type: "image/avif" webkitRelativePath: "" [[Prototype]]: File [[Prototype]]: Object ` @RuiSiang – Amerjit Jun 29 '22 at 03:24