I am working on my first ever MERN stack web app. I finished development and trying to host in VPS.
Everything working fine. But, I am not able to view the uploaded images. I share you the few details about the project structure.
React app is build for production and kept in public folder.
Upload folder is created where user uploaded images are kept and its location is stored in DB. (ex: /uploads/user1/img1.jpg). Using Multer to handle image upload.
This is the folder structure of my Express server which also servers static files.
-MAIN_EXPRESS_APP_FOLDER
------Routes
------Public
------Uploads
------package.json
To make public and upload static, following codes are added in Server.js file:
app.use(express.static(path.join(__dirname,'/public')));
app.get('/*',(req,res)=>{
res.sendfile(path.join(__dirname='public/index.html'));
})
app.use('/uploads', express.static('uploads'))
I am able to access my web app and also i can insert data in DB. Image upload is working as expected. But, Express not serving uploaded images.
What could be problem?
As for static content you set the folder to be public now what i think is you should move your uploads folder inside public and try to access the images hope they will be served currently your application is not allowing to server data else then public directory hope it will help you
Related
I'm working on a project. I'm using node and express for the rest api and next js for the front-end.
I have form where users can add new products.
Where should I store the uploaded images?
Should I create a folder uploads in the website folder root or upload images in client/public/assets/img/?
If I create a folder uploads in root how should I access those images in the front-end?
I know how to upload images or files. I just want to know what is best location to store them
This my project structure
Website
--------
client
-------
components
pages
public
styles
...
server
------
config
controllers
middlewares
models
routes
utils
server.js
You have to be create a Upload folder in backend directory. When client upload an image you have move that image in Upload folder with specific name and that name should save in database.
Please check this one uploadFile
Alternatively, you can use a storage service like AWS S3 to store files as at some point, your server's storage will be full.
To implement you can use AWS's js SDK with multer and multer s3 uploader to get it working.
I have a Node.js backend that sends an icon image to a React frontend. Initially, I encode this image as a Base64 string and store it directly in the database. I created an api that returns this string to the frontend. However, I read that it is bad to store it in the database, so I re-wrote the api to store this string in the server as a json file and now my api returns the absolute path to this json file. However, how is the React frontend supposed to retrieve the file? Is it possible to use the absolute path or do I have to create another api to return a file object ? If so, how do I do that?
I'm a newbie at both react and node.js so any help is appreciated.Thanks.
EDIT: I stored the file path as __dirname of where my code resides + filename.I'm getting cors error when accessing that url
Use Express to share out that folder as such-and-such.
Suppose you keep your files in a folder called files, just off the root. And suppose your server structure looks roughly like this:
- backend
- app.js
- frontend
- Components
- Routes
- public
- dev
- index.html (your template file)
- files
- myimage.png
In your root js file (app.js? server.js? index.js?):
const app = express()
app.use('/static', express.static('public'));
app.use('/files', express.static('public/files'));
Then, in the frontend code:
<img src='/files/myimage.png' />
By the way, there is no problem storing images as base64 in your database... but every database backup will also backup those images. If you have a small database, no worries. However, if you have a LOT of images, especially very large images, this will make your database (and backups) unnecessarily large and unwieldy.
Everything depends on your use case.
Hi I implemented an image upload system on my website but now I don't know how to link to that image.
My root directory has a client folder, for my vuejs app, and a server folder, for the back end logic.
When users upload a file, the file goes to a public folder under the server folder. This is where I got stuck.
How do I then link to that uploaded image from my vuejs app that is in the client folder.
Keep in mind that my express app is running on port 5000 while my vuejs app is running on port 8080.
In my img tags I tried linking to the image by using "http://localhost:5000/public/image/imagename" and "http://localhost:5000/image/imagename" but no luck
In your express.js logic you should expose your public folder
app.use('/public', express.static(`${__dirname}/public/`));
I'm supposing your express entry point is in the same backend folder as '/public/ folder.
And then you can just access it like you've tried before on: http://localhost:5000/public/image/imagename
I am creating an react app using create-react-app for school management system. I had used node js for creating api end point. I am able to store student detail and can fetch it back to display in react.
I had created an endpoint for uploading student images, which is also working perfect.
I had stored the image on node js server public folder. I know it should be on client public folder but if another application for example android or angular or vue application tries to call the same image will not get as it will be stored in react public folder.
So how could I solve the image problem?
You've done all the logic right, just add image URL to user profile, for example :
imageUrl: 'https://{your API URL}'
or the better way to upload all images on file server like S3 or Google Cloud Storage, and save only link to image on user profile
I am building an app using angular2 and I want to keep a folder named as 'uploads' at the root of my application. However since in angular the current root is 'src' it does not let me access images inside the uploads folder.
If I try to keep 'uploads' directory inside the src folder then everytime I upload a file to it, it rebuilds the application and refreshes the page. I would want to keep it in suchaway that angular cli doesnt refresh the application in case file upload happens.
I want to access the url like : http://localhost:4200/uploads/xyz.jpg in angular2 app
Thank you
The angular app is a front-end app. It is not meant to be used as file storage. The file storage should be done by a back-end app that will serve the uploaded files to the front-end app.
Using your Front-end
Angular-cli does not compile any folder outside app or assets, so, you need to place the folder inside app or assets.
To access directly, place inside assets and access like localhost:4200/assets/uploads/xyz.jpg.
Remember that you need to be careful because if you use a git versioning system, when you make a pull in your production env, every file uploaded inside assets/uploads will be overwritten by the new version.
Using your Back-end
Put the upload file outside the angular app so when you build or update the angular app nothing will be lost. And use a back-end to serve the files.
You should place the upload folder outside the angular app and serve it using your nodeJs app. Use the static feature of expressJs to serve your file in some endpoint like localhost/uploads/xyz.jpg (if your nodejs is in localhost). So, you don't touch the angular-