Node.js store images. Get those images in front-end

Question

I have never done anything similar to this and after investigating for a while I didn't find what I wanted. If that exists I was probably too stupid to notice / understand it.

Admin side:

In the website I am developing (in an admin page) I have a form which was just a simple text based form. I could send the form information to the server via ajax. I now need to send image files which are uploaded by me. I was wondering if I can send in the same call both the text info and the image (one form only)? If yes, how? (below is part of my ajax config). I also get the form info by its id.

$.ajax({
    url: 'http://localhost:8080'+url,
    type: type,
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(object),
    success: callback     
}

Server side:

When it was only text I received the information in "req.body". I believe I should receive files with "req.files". To do so I have heard of Multer. I didn't understand ,however, how could I receive both infos in the same "app.post". If possible that's what I would like. What I pretend with all this is to store the images from the admin page in a non-public server folder and then retrieve all the images that are to be accessed by a client in the front page. (related to that: is storing on a private folder and retrieve them from there the best solution and keeping the path stored in the database?)

Something similar to this:

 // receive images and text 
 app.post("/admin_info",function(req,res) {

   var text_info = req.body;
   (...take care of text_info ...)

   var image_file = req.file;
   var images = "/images";
   // then save image_file in images and also save the image path in database to access it later

 });

 // retrieve specific images
 app.get('/', function (req,res) {

    var images = ["/images/img1.jpg","/images/img2.jpg",...];

    // get actual image files 

    res.send(image_files);

 });

Client Side: Images are loaded and placed in specific places.

Answer 1

Yes you can do this.

Here is the example

<form id="test" enctype="multipart/form-data"> <input type="text" name="name" ><br> <input type="file" name="poster" id="poster" multiple><br> <input type="submit" value="POST"> </form>

JS Code

$("#test").on('submit', function(e){ e.preventDefault(); var form_data = new FormData(this); $.ajax({ type: 'post', url: '/test/all', data: form_data, cache: false, contentType: false, processData: false, success: function(answ){ console.log("Done"); } }) });

On server side you need to use multer with following configs(dont forget body parser). All this before routes.

const multer = require('multer');

app.use(multer({ dest: './temp/'}).any());

And not in route you just do like this

app.post("/test/all", function(req,res){
    console.log(req.body); //has name property
    console.log(req.files); //has all files that you upload
    //now just read files array and save files where you want
});

Hope this helps.