Express JS send array of files and json as response

Question

I am trying to send back to the client an array of files, and a few more properties which are in json format as one response when a route is hit. I am relatively new to Node and Express but I have not found anyway to handle this. I know (and have successfully tried) sending one file back to the client. The kind of response I want to send back should look like this

res.send([
          {
            name:'Floral dresses',
            date_added:'2016-10-11 06:52:39',
            designer:'Victoria',
            cover_photo: path.join(__dirname, '/images', '/clothes', '/cloth1.jpg'),
            photos: [
              path.join(__dirname, '/images', '/clothes', '/cloth1.jpg'),
              path.join(__dirname, '/images', '/clothes', '/cloth2.jpg'),
              path.join(__dirname, '/images', '/clothes', '/cloth3.jpg')
            ]
          },
          {
            name:'Vintage Dresses',
            date_added:'2016-02-08 18:12:09',
            designer:'Victoria',
            cover_photo: path.join(__dirname, '/images', '/clothes', '/cloth1.jpg'),
            photos: [
              path.join(__dirname, '/images', '/clothes', '/cloth1.jpg'),
              path.join(__dirname, '/images', '/clothes', '/cloth2.jpg'),
              path.join(__dirname, '/images', '/clothes', '/cloth3.jpg')
            ]
          }
        ];

cover_photo and photos are images saved on the file system.

How can I achieve this in Node JS?

JSON isn't meant to transfer binary data. You'd have to encode it with Base64 or something, and the JSON will become large. Can't you offer the client URL's that point to the image files, so they can be retrieved with separate HTTP requests? — robertklep, Sep 03 '16 at 17:16
@robertklep I know json cannot be used to send binary data, what I meant was that the other properties(except the files) are in json format. Your suggestions are good, any tutorials I can look at? — Dennis Wanyonyi, Sep 03 '16 at 17:22
if it is just an image, then u can convert to base64 and send inside the json — Iceman, Sep 03 '16 at 17:25

score 4 · Accepted Answer · answered Sep 03 '16 at 17:38

4

Since JSON isn't great to transfer (a lot of) binary data, I would suggest returning URL's to the image files, and having them served by Express.

Taking your directory setup, you'd add a static file handler:

app.use('/images', express.static(path.join(__dirname, 'images')));

For your JSON, the easiest then would be to pass the paths (relative to the website's root) to the image files, so the client can download them (or build a full URL and serve them in HTML).

For instance:

cover_photo: '/images/clothes/cloth1.jpg'

answered Sep 03 '16 at 17:38

robertklep

198,204
35
394
381

I have a question, my router is on a folder `routes`, I want to set a mount point `static`. Should I hard code the path to the folder containing the images like this `"/static/clothes/cloth1.jpg"` or should I use path.join like this `path.join(__dirname, '../static/clothes', 'cloth.jpg')` ? – Dennis Wanyonyi Sep 03 '16 at 18:56
Best to use `path.join()`. – robertklep Sep 03 '16 at 19:59
`path.join` prints the fully qualified file starting from the `home` folder in ubuntu instead of the parent directory of the executing script – Dennis Wanyonyi Sep 03 '16 at 20:32
1

@DennisWanyonyi sorry, I thought you meant for the configuration of `express.static()`. If you mean the paths to use in the JSON, they should be `/static/clothes/...` (basically, replace `images` in my answer by `static`). – robertklep Sep 03 '16 at 20:35
Should I assign the path like this `cover_photo: /static/clothes/cloth1.jpg` and then in my html use is like this ``? where `image` is the variable I use in the `ng-repeat` statement? – Dennis Wanyonyi Sep 03 '16 at 21:48
Whatever suits you best, to be honest. – robertklep Sep 04 '16 at 07:07

Express JS send array of files and json as response

1 Answers1