I have a code that allows me to send files to server folder uploads using multer from react client side the process of sending data to server works perfectly and also getting back the file from server works perfectly.
The client side is running under 3000 and the server is running under 4000 .
the problem that I'm facing right now is displaying the file on the front part for ex an img
<img
src={`http:\\localhost:4000\\server\\${text}`}
className="messageText colorWhite"
alt="img"
/>
the image of the error is below
the text contains uploads/image1.jpg
when I inspect the content I found this
which mean that the image is well called from server side
Could it be possible to help me on this?
Best Regards,
The upload folder which contains the files is not being served up by the server at localhost:4000.
You must server the files in the uploads folder first. For eg in an express server you can access the files by specifying this route
app.get('/uploads/:filename', (req, res) => {
res.sendFile(req.params.filename, {root: path.join(__dirname, '/uploads')});
})
Now setting src=http://localhost:4000\uploads\img.png would get the image img.png stored in the uploads folder
As an alternative solution, you can server up the entire uploads folder by
app.use(express.static("uploads"));
Make sure you specify the full path in "uploads"
Related
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´m building an app with NodeJs and Angular
The server runs on http://localhost:9000
And the app runs on http://localhost:4200
I have an endpoint whose looks like this http://localhost:9000/users
I use this to retrive all users
The set returned has a key like this { photo: myphoto.jpg }
When I loop the set of data, I want to render the image as this way
<img src="{{ url }}/uploads/users/{{ user.photo }}" alt="{{ user.name }} {{ user.last_name }}"
class="img-fluid shadow-sm avatar100 ml-auto mr-auto d-block rounded-circle">
Where url is http://localhost:9000 and user.photo is myphoto.jpg
The complete route is http://localhost:9000/uploads/users/myfoto.jpg
There is the photo hosted, but the server is throwing an error
Cannot GET /uploads/users/myfoto.jpg
I think, the server is interpreting the URL as API route, and obviously is not declared on routes file.
I want to only retrive the image, how could I do that?
I don´t know what part of my code I can show here. Routes? Front-end? Project structure? Tell me what do you need
With Express, you have to create a route that will handle your image URLs. By default, Express (or the built-in node.js web server) does not serve ANY files. So, it will only serve a file if you create a handler for that specific URL and program that handler to deliver the desired file.
If your images are directly in the file system where the URL base filename matches the actual filename in your server file system, you could use express.static() to create a single route that would serve all your images.
For example, you could use express.static like this:
app.use("/uploads/users", express.static("/uploads/users"));
This would allow a URL requested from:
http://localhost:9000/uploads/users/myphoto.jpg
to be automatically served from the server-side file system at
/uploads/users/myphoto.jpg
It would similarly work for any other matching name in that same directory (or even sub-directories of that directory if the sub-directory was also in the URL).
In general, you don't want to surface internal path names such as /uploads/users all the way back to the user's HTML pages. So, you could do this instead in the HTML page:
<img src="/images/myphoto.jpg">
And, this on the server:
app.use("/images", express.static("/uploads/users"));
This will take any http requests that start with a path of /images and look for the matching filename in /uploads/users on the server, thus not exposing the internals of your server directory structure to the client. It creates the notion of an abstract /images URL that your server can then process and get the images from wherever they happen to be stored on the server.
$ npm i multer
and server add
app.use("/public", express.static("public")); //The folder where the file is located
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 working on an application using Angular 5 as a front-end and Node.js as a back-end which uploads images to the server.
The problem is that after I upload an image to the server I cannot display it in angular.
My folder structure is like this:
AppName/client/src/app/app.component.html <- Here I want to display
the images; AppName/server/public/images <- Is the place
where the images are stored
Does anyone have any idee?
You have to configure your server in order to serve the right image when required. The problem is not about Angular.
If you are using express, you can add the following rule before serving the webapp:
app.use(express.static('server/public/images'));
Fix the above code with your relative path.
In this way, when your web server will receive a request, he will firsty see if it's an image contained in your folder, otherwise it will serve Angular.
Note
In this way, if you try accessing a not existent image, you will receive a text/HTML result with your webpage as content and 200 as status code.
You may need checking the extension of the file, if it is jpg, jpeg, png or gif you search in the folder, if the image exists you send it as response and if it doesn't exist you send 404 status code.
If the extension is not one of the above, then you serve the webapp in any case.
app.use(express.static('server/public/images'));
app.get(/\.(jpg|jpeg|png|gif)$/, function(req, res) {
res.status(404).send('Not found');
});