Image to Base64 with NodeJS (Express)

Question

I'm doing a test, and I need to convert an image to base64 to store in my DB

forget about DB, I just need the base64 as a string.

This is my form:

<form action="/cadastrado" method="POST">
   <! -- other irrelevants inputs -->
   <input type="file" name="input_file" id="input_file" onchange="converterParaBase64()" required><br>
   <button type="submit" onclick="base64()">CADASTRAR</button>
</form>

This is my route after submit the form:

app.post("/cadastrado", (req, res) => {
    const {input_nome, input_telefone, input_cpf, input_email, input_file} = req.body;

    console.log(req);

    return res.json({
      nome: input_nome,
      telefone: input_telefone,
      cpf: input_cpf,
      email: input_email,
      // base64image: input_file.toBase64 (I need something like this)
    });
  });

I'm doing greate about using the strings inputs, like nome, telefone, cpf and email (variables in PT-BR)

But I can't say the same with input_file

When I console.log(req.body) i get this:

{
  input_nome: '1',
  input_telefone: '2',
  input_cpf: '3',
  input_email: '4',
  input_file: 'levia.jpg'
}

I need to convert this levia.png image into base64 as a string.

How I can do it ?

UPDATE 1: Seems like the image in json, is just the file name. It is possible to convert in client-side and after send to server-side ?

check out [this response](https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript), used it myself for a project. You will need to insert the input image as a canvas first though, I don't have enough time to get into the specifics unfortunately. — Victor bvn, Apr 26 '21 at 15:20
Do you need the filename as base64? Or do you need contents of file with this name as base64? — Bronislav Růžička, Apr 26 '21 at 15:20
@BronislavRůžička i need the content image, like a picture of a person encoded to base64 — danielsrod, Apr 26 '21 at 15:31
@Victorbvn I know the canvas, but with canvas, i need to do use DOM elements. NodeJS don't use then. Or, how can I transport the data to a string in another javascript file? my script.js handle the html, and my index is handling my express server. — danielsrod, Apr 26 '21 at 15:33
@danielsrod Sorry I was under the impression that you were asking about frontend since you tagged html — Victor bvn, Apr 26 '21 at 15:39

score 0 · Answer 1 · answered Apr 26 '21 at 15:22

0

Try this

var fs = require('fs');

app.post("/cadastrado", (req, res) => {
    const {input_nome, input_telefone, input_cpf, input_email, input_file} = req.body;

    console.log(req);

var bitmap = fs.readFileSync(input_file);
var base64File = new Buffer(bitmap).toString('base64');

    return res.json({
      nome: input_nome,
      telefone: input_telefone,
      cpf: input_cpf,
      email: input_email,
      base64image: base64File 
    });
  });

answered Apr 26 '21 at 15:22

Suraj Rane

161
4

i get an error. header error: "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined" – danielsrod Apr 26 '21 at 15:44
Also, vscode tells me Buffer is deprecated – danielsrod Apr 26 '21 at 15:45
In req.body do you get the complete file object or just the file name? – Suraj Rane Apr 26 '21 at 16:47
well, i don't know. how can I check this ? if I console.log(req.body), I get this: { input_nome: '1', input_telefone: '2', input_cpf: '3', input_email: '4', input_file: 'levia.jpg' } – danielsrod Apr 26 '21 at 17:58
this levia.png is in qoutes, so can be a string, but im not shure – danielsrod Apr 26 '21 at 17:59
Yes this means you are only receiving the file name at server side and not the actual file. You need to convert file to base64 at client side itself. Can you share some more client side code so that I can help – Suraj Rane Apr 27 '21 at 15:22
I appreciate your help, but I already figured out. Soon I'll be posting my solution. I'm really busy right now. Thanks anyway buddy. – danielsrod Apr 27 '21 at 15:48
No problem. It's great that you figured it out. Happy coding! – Suraj Rane Apr 28 '21 at 11:04

score 0 · Answer 2 · answered Apr 29 '21 at 23:34

so I figured out how to resolve my problem.

Kind of vicarious what I did. I don't know if in future this can result in a problem, so I want to share with you.

Basically I create a input and edit his value in client side. Of course, I don't want a big input with a Base64 code messing with my poor HTML, so I styled with display: none. This input is inside the form, and it is sent to my req.body.

Snippets

index.html page with form:

...
<input type="file" id="input_file" name="input_file" onchange="convBase64()" required />
...

script.js with some logic

...
document.getElementById('input_base64').value = `${stringBase64}`;
...

css to hide the input with encoded image:

#input_base64 {

display: none;

}

This invisible input is inside the form. When the form is submitted, the input value is sent to body of request.

Image to Base64 with NodeJS (Express)

2 Answers2