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
Related
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 have a node.js server(separate directory) where i am saving files in uploads folder and saving image path in db. I have following directory structure in my node.js server
node_modules
src
uploads
|category-name-folder
|image-name.jpg
|category-name-folder
|image-name.jpg
package.json
i am saving image path in db like this uploads/category-name/image-name.jpg.
Now i want to display all images in angular app. So please guide me how can i display these images to angular app? Should i send image paths to angular app via an Api ? if yes so what complete url should i send to angular app and what url should i bind in angular app img src?
Note : I have a separate directory structure of client app (angular)
In server side(Nodejs), serve the uploads folder statically. To Angular send the image path and give it as a source for images.
<img [src]="imagePath">
The image source should be something like 'YOUR_DOMAIN/uploads/filename'. This is required for your case since you are providing the angular index.html in a separate domain(server).
Use this link if you are using express
Basically, what you need to do is create a GET endpoint in your node server to return the image, something like:
[GET]images/{folder}/{imageName}
And instead of saving the image path, you can save the URL to call that endpoint:
uploadedObj {
url : config.domain + 'images/' + folder + '/image.jpg'
}
Then when you get the data in your angular, you put that value directly in the image src.
<img src="{{ upload.url }}" *ngFor="let upload of uploads"/>
I am new to hosting and it would be of immense help to me if somebody can explain in very detail.
I have following questions:
I have front end using react app and backend using expressjs and mysql. i have a working simple application in my computer . I start backend and front end using local host and they work perfect . when I bought hosting which supports nodejs , I don't know where to place the front end file and backend file .
npm run build - > builds a react app . in cpanel - file manager , which file I should place in public html . front end code or backend express code
I placed html code in public_html but how to start interacting with server.
When I used fetch("http://lcoalhost:30000") to fetch I couldn't get the app.get("/",(req ,resp)) working ..
I am really confused . if somebody can explain in detail how to start uploading both the react and express file and the location to place these files.
Upload your react app build files inside public_html. Don't forget to change the localhost url to your express app to your actual url.
Create a folder outside public_html and upload your express app in it.
Create a nodejs app (using cPanel, if it has). Use the express folder and a url different from home (like /api) during creation.
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 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-