How to display a JSON file object?

Question

Using express-fileupload I have a JSON object of a file which I store in my database.

For example:

{
  name: 'bear.jpg',
  data: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff fe 00 3b 43 52 45 41 54 4f 52 3a 20 67 64 2d 6a 70 65 67 20 76 31 2e 30 20 28 75 73 69 ... 15948 more 
bytes>,
  size: 15998,
  encoding: '7bit',
  tempFilePath: '',
  truncated: false,
  mimetype: 'image/jpeg',
  md5: '7505ae720e82ac3b807b3e39483bebab',
  mv: [Function: mv]
}

I am currently using EJS.

How can I display this file in html?

I hope for something like:

<html>
  <body>
    <img src="<%= the-file %>" width="200" height="200">
  </body>
</html>

This is not a duplicate of Convert buffer data to an image as it enquires to techniques for generic files and tags (another example could be a .glb file with a <model-viewer> tag), an image is only used as an example.

I don't think that's JSON. JSON can't contain a buffer (AFAIK). — evolutionxbox, Jan 18 '21 at 12:47
Does this answer your question? [Convert buffer data to an image](https://stackoverflow.com/questions/60443399/convert-buffer-data-to-an-image) — evolutionxbox, Jan 18 '21 at 12:48
Perhaps check the example project to see what you're supposed to do with that "JSON"? https://github.com/richardgirges/express-fileupload/tree/master/example#basic-file-upload — deceze, Jan 18 '21 at 12:49
You are storing images _in_ your database? Why? Why not simply an image file on the file system (hard disk)? — Jeremy Thille, Jan 18 '21 at 12:51
@evolutionxbox Not quite, my question is a bit more generalised, for a generic file type for a generic tag, another case is a 3d file for a `` tag. — Jonathan Woollett-light, Jan 18 '21 at 12:53
@JeremyThille Its a private file which only certain users can access. Is there a better way? I ask this question because I don't know the way. — Jonathan Woollett-light, Jan 18 '21 at 12:59
Well a database is made to store data, not files. An image is always to be stored on a disk, and its _path_ in the database. Whether you decide to serve it to some users and not to others is a different mechanism (authentication) — Jeremy Thille, Jan 18 '21 at 13:13
@JeremyThille A file is data. Consider this file like one in a GIT repo, in this circumstance with what I have read I thought it best to store it in the database please see https://dba.stackexchange.com/a/2448 for a bit of an explanation. — Jonathan Woollett-light, Jan 18 '21 at 13:24
There is no way to "display" any abstract file in HTML. Most files need a dedicated viewer; some of those will not work with a byte array, but only a file or URL. You can output the byte array, but that would probably result in invalid characters. If you have the MIME type of the data, you can make intelligent guesses, but providing a method to convert any MIME type to an appropriate viewer is far too much to ask for from the volunteers who answer questions on Stack Overflow. — Heretic Monkey, Jan 18 '21 at 13:49
@HereticMonkey This is not what I am asking, it is instead, how might one manually implement a technique for any specific `src` type and file object type combination. `.png` for ``, `.glb` for `` and so on. Given a object of a sdpecific file type and a specific tag what steps do you go through to get it to display. — Jonathan Woollett-light, Jan 18 '21 at 14:22

score 0 · Accepted Answer · answered Jan 18 '21 at 14:48

<your-tag src="data:<%= file.mimetype %>;base64,<%= file.data.buffer.toString('base64') %>">

Should work whatever file type.

Since your-tag will likely correspond to a specific file.mimetype you can probably simply hardcode that type like:

<img src="data:image/jpeg;base64,<%= file.data.buffer.toString('base64') %>">

Useful links:

Not sure why this couldn't be simply answered before.

How to display a JSON file object?

1 Answers1