I have a simple use case for an application; a user can upload images to server where they are stored in a directory, and a user can view all images uploaded and stored in this directory.
The functionality for the first criteria is working, and the application persists uploaded images to the image directory.
The next step is to return all images. For the front end, i will use some kind of tile gallery to render images to the user. However, my question is related to how best to return "all images" to the end user, through express js.
Essentially, I am hoping to do a directory dump, but am confused as to an elegant (read: any!) solution on how to do this. Any advice or suggestion most appreciated.
Edit: to clarify, the route should return all images when hit. As future implementations will filter images based on certain criteria.
example:
// return the view page for register
app.get('/gallery',function(req,res){
// return images here
res.send();
});
If I understood you correctly, all you need to do is to statically serve a folder. For that, you can use
app.use('/images', express.static('path/to/images'))
Related
Just to inform that backend is in NodeJS and frontend in ReactJS.
[enter image description here][1]
[1]: https://i.stack.imgur.com/ifklU.png
I have added how my structure of project look like in image. When client save image/file it saves under backend in folder named uploadedData. Consider that I already know the name of photo and of course directory also. Can someone explain me how can I get image from
uploadedData directory from backend and show on frontend with the help of
components/Products.js which is part of frontend. Since I am newbie it would be good if I get little detailed answer.
Note: I have achieved this thing with really poor approach:
Writing this line of code
app.use('/uploadedData', express.static(__dirname + '/uploadedData'))
allow me to see image directly on the browser at http://localhost:8081/uploadedData/artikles/1222222.jpg and if I write the same url equal to src in the <img> tag I have achieved the goal but I want to get better approach.
I am trying to send an image to client in nodejs/expressjs REST API. What I am trying to do is saving that image url in mongo db database. When user make a get request, I send all the necessary data alongside the image which is basically avatar. Now on the client side I am not able to receive that image. I am keep getting below responses.
in console tab of chrome dev tools I am getting below.
When I see in the network tab I get below response which also has the link to avatar. Everything is perfect here.
Now when I check my uploads folder I do have the image. Check below:
After all this I am still getting these errors and still not sure where exactly am I making mistake. One thing is that maybe the client is trying to make a request to /uploads/image end point which I do not want. I simply want that image to be displayed using the url I am getting on response.
As we do not see the configuration of static files in express, this might be the problem.
To serve static files in your /uploads folder you need to add this line
app.use('/uploads', express.static('uploads'));
The 'uploads' directory will not be accessible from the frontend.
In node, move the uploaded file in to a subdirectory of the public directory of the node app, and set a relative path from there ans the image path.
I have a multiplayer game where a server connects two clients to play against each other. It works well. However, now I want to add a welcome page where they add their username. I need to send this username to the server. However, the problem is, when loading the welcome page it makes a connection to the server (which is good). But, when i want to load the next page using
location.href = "index.html"
it is not working. In fact, it disconnects from the server and does not reconnect. How do I load multiple files after a player hits a button? And how do I keep these files under the same "client" instance? (without disconnecting). Thank you.
Since you have no code, let me take a stab at it. To expand on what #anderson said, Make sure you have your static files available to your app via something like
const staticCont = express.static(__dirname + "/public");
Where "public" is, is the folder directory of all your static files. This way, any link in your app(on the front end) that requires loading of whatever files, will be available to you.
Next, assuming this was done, also, assuming your game is on a singular page, lets say "mygame.html", if you want to load another html or other content into this page without losing/navigating away from "mygame.html", then on the users button press you are going to need AJAX to load in content.
as an example:
Create a dummy div that will hold your loaded content, lets call it
<div id="usrBioWrapper"></div>
Then say you have a button on your app that fetches a users bio.
Lets call this button
<button id="usrBio">Get user bio</button>
and the html you want to load is called usrBioPage.html, then you'd need something like:
$('#usrBio').on('click', function(){
$('#usrBioWrapper').load(' usrBioPage.html ');
});
Thats it. When the user clicks the button, it will load your content in that div. BUT remember, you must set the public directory in your app.js(backend node side) else it wont work.
hope this helps
Did you public your index.html file in Node js, to make sure your browser can access the file?
I'm using fine uploader to upload images. After I upload an image, I need to be able to upload another image to replace the uploaded image before and only allow one image at one time. Is there any options for that or should I delete the upladed image before I start uploading the new one?
This is what I would do:
Set the multiple configuration option to false. This will be most helpful if you are using the UI built into the Fine Uploader library (and not a custom UI or React Fine Uploader. In that case, after a file has been submitted, subsequent files will "replace" that initial file in the UI.
Remove/replace the item on your server when handling the upload request if a file for that user already exists.
This is making a lot of assumptions as you have provided very little information about your situation or setup. This should get you started down the right path though.
End up deleting the uploaded images before uploading a new one:
onValidate: function() {
this.deleteFile(avatar_id);
}
In my express.js project, I am serving up the dist folder of my project like so:
server.use(express.static('dist'))
In my dist folder, I have an img/fileicons folder that contains PNG files that represent various file types, e.g. 'txt.png', 'html.png', 'pdf.png', etc. In case an image doesn't exist for a given file type, I want to set up a default route that would serve up 'blank.png' with a generic file image. For example, if the URL '/img/fileicons/[doesn't exist].png' is hit, then 'blank.png' is returned. However, if I navigate to another path that doesn't exist, like '/html/[doesn't exist].html', then I don't want the 'blank.png' file served up.
How can I set up my express.js routing to accommodate this need?
At the bottom of the routes, make a default one:
app.get('/dist/img/fileicons/*', function(req, res) {
res.sendfile('path/to/blank.png')
});
All you need to do is put some middleware at the bottom of your stack and use res.sendfile(). Don't forget to use res.statusCode(404) so that crawlers don't think they're hitting a real resource.