After multile files are uploaded using multer, it gives me paths of each files like:
"photo" : [
"public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png",
...
],
And this is accessible in a url, "http://localhost:3000/public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png".
But in React (or any frontend), I have to put slash to the front of this url, like (please assume imageUrl has value "public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png":
<div>
<img src={"/" + imageUrl} />
</div>
If I don't put "/" to front, path is referred as relative path.
if I use that imageUrl without "/" at the head in http://localhost:3000/product, then it will try to get the file from "http://localhost:3000/product/public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png", where the file doesn't exists.
So my question is how can I add "/" to the filepath that multer always return after the upload is finished? or is there any better solution?
I don't think multer will allow you to do this. If there was a / at the beginning of that path, that would indicate the file was stored at the root of your system, it would be an absolute path at that point.
You might be better off writing a function to make sure that your image src is always in the format you need.
Closing this issue as it's not something multer can/should handle.
So my question is how can I add "/" to the filepath that multer always return after the upload is finished? or is there any better solution?
@swham-ai a better solution is to prepend a "/" if needed elsewhere in your code. Potentially in another part of your node app or in your client application.