-1

I am working on a real-time chat application, and I want to allow users to upload their own images to use as avatars. When a user uploads an image, the backend displays the following URL: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg. When I log in to the app and check the console, however, I am greeted by the following message: Not allowed to load local resource: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg. I was testing, and I then decided to change the input type from file to URL, and I then pasted the random address of a google image, and then when I loaded it back into the app the image had disappeared. Is there any way to allow for user-uploaded images to be displayed? I am using stream-chat API if that also helps, as well as Heroku and nodejs.

Ali
  • 131
  • 1
  • 3
  • 12
Jecs
  • 7
  • 6
  • please add some code to your request , like that it's too dificult too know where the problem is – Code Scooper Jun 26 '22 at 01:20
  • It's not quite clear but I guess you are saving the files in your file system. If that is the case React can't access a remote file system like that. That would be a major security issue. What you need to do is read the file inside Node.js and send it to React as a blob or base64 string. If everything you do is local, then use a FileReader inside React to read properly the image but this won't work on production. – George Makroglou Jun 26 '22 at 05:02

1 Answers1

0

Keep the input as type="file". The user is picking a file from their disk. It won't have a URL.

fakepath comes from trying to treat the file input as a string instead of as a file. If you are using JavaScript, don't use the value property of the field as it is only useful for informational and debugging purposes. If you are submitting a form then it needs to be able to handle file inputs (and the default enctype doesn't).

Upload the image to a server. How you do this depends on your approach, if it is with a form then the enctype attribute needs to be set to multipart/form-data, if it is with Ajax then you should start with a FormData object.

On the server, parse the request (the specifics depend on your server side environment) and save the file somewhere.

Give the file a URL (either by saving it to a place that static files are served from or by having another server side process read the file (from wherever you saved it) on demand).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335