I have been trying to impliment the file storage canisters here GitHub - cybrowl/upload-file: uploading file assets for some time now, I got almost everything to work, uploading image assets, querying them and getting the urls, but the problem is the images are not displaying in the component.
The asset url like this http://b77ix-eeaaa-aaaaa-qaada-cai.localhost:8080/asset/6578b03c-d3b-81a-fe4-ed5f09bf0344 should be getting the image from the file storage canister using the http_request but that’s not happening in my project, I am getting this error instead when I access the url directlly
index.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
6578b03c-d3b-81a-fe4-ed5f09bf0344:12 Refused to execute script from 'http://b77ix-eeaaa-aaaaa-qaada-cai.localhost:8080/asset/index.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
or a 200 OK in network tab in the browser dev tools when I use the urls in my component
Request URL:
http://b77ix-eeaaa-aaaaa-qaada-cai.localhost:8080/asset/6578b03c-d3b-81a-fe4-ed5f09bf0344
Request Method:
GET
Status Code:
200 OK
Remote Address:
[::1]:8080
Referrer Policy:
strict-origin-when-cross-origin
Accept-Ranges:
bytes
Connection:
keep-alive
Content-Length:
531
Content-Type:
text/html; charset=utf-8
Date:
Sat, 01 Jul 2023 12:27:28 GMT
Etag:
W/"213-gTno8e38DnkdiahC6XTRkGaAYDw"
Keep-Alive:
timeout=5
Vary:
Accept-Encoding
X-Powered-By:
Express
Accept:
image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding:
gzip, deflate, br
Accept-Language:
en-US,en;q=0.9
Cache-Control:
no-cache
Connection:
keep-alive
Host:
b77ix-eeaaa-aaaaa-qaada-cai.localhost:8080
Pragma:
no-cache
Referer:
http://b77ix-eeaaa-aaaaa-qaada-cai.localhost:8080/chunks
Sec-Ch-Ua:
"Not.A/Brand";v="8", "Chromium";v="114", "Google Chrome";v="114"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"Linux"
Sec-Fetch-Dest:
image
Sec-Fetch-Mode:
no-cors
Sec-Fetch-Site:
same-origin
User-Agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
But the headers are different from those that should be returned by the http_request in the file_storage canister, the Content-Type that shoulde me “image/jpeg” and everything else is different.
There are two project I know that are successfully running this file storage implimentation which I have been learning from, GitHub - cybrowl/static: ui showcasing file-upload scaling and this one GitHub - Kyliux/icblog: Sample Blog app running on the Internet Computer. Backend is written in Motoko programming language and frontend in Svelte compiler., I even got this icblog project to run locally and everything is okay but the only difference is that these 2 projects are both using svelte, I am using React and now I’m wondering if it’s my implimentation that have bugs or maybe React I am using have some small subtle differences that are contributing to the problem?.
If there is someone who is successfully running this file storage implimentation with React please reach out maybe I can see where I am going wrong.
This is my implimentation here: GitHub - iamenochchirima/ic-files-upload
In the component I am displaying the images like this, in the “Chunks” page:
<div key={image.id} className="">
<img
src={image.url}
className="h-[200px] w-[200px]"
alt="Image"
/>
</div>