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
Related
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
I work on an webapp which use REACT JS (with NODE, port 3000) and an API (with NODE JS, port 3100).
All requests made by client passing throught my API.
In this app, client could be able to listen mp3s downloaded and stored into my API. I made different schemas but I don't know which one can work.
SCHEMA 1.
REACT send parameters to API
API download the file and store it on a temporary directory
API send the URL (like : http://localhost:3100/sound/exemple.mp3) to REACT
REACT use that URL in 'src' of the AudioPlayer
Temporary files are delete with a CRON setting up on API server
I tried that solution but I have an error when I want to play the sound
(error: Can't GET /URL)
SCHEMA 2.
REACT send parameters to API
API download the file and store it on a temporary directory
REACT download the file from API and store it into public directory (by using express static)
REACT use that URL in 'src' of the AudioPlayer
Delete the file twice (API and REACT)
Another solution is to download the file directly from my source on REACT. But I need to hide the URL of the source (that why I pass throught my API).
Maybe there are others solutions ?
I'm having a backend nodejs server and a frontend angular web applicantion both are in different folders and running on different ports (Nodejs server: 8000 and angular client:4200). I'm storing images on nodejs server's directory in "uploads folder" using api and then storing the image path in the database. Then retrieving the image path using api to display it. I'm getting the image path like this (http://localhost:8000/uploads/030312-1618.jpg) but the image is not displaying.
Assuming that you are using ExpressJS, have you set up the serving of static files as follows.
app.use(express.static('uploads'))
Source : http://expressjs.com/en/starter/static-files.html
(Can help you further if you add more details such as any errors that you get, more information about the tech stack you use, etc.)
At last I was able to upload the images from vue cli in the frontend and pass them with axios to my backend server, but once there I do not know what to do to show them
... translated whith Google
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-