Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

144
Visualizações
Sending and displaying images from Adonis V4.1

How can I send an image from a React App to Adonis, “save” it on the database, and when needed to fetch it to use in the front-end?
Right now, I was only successful in processing an image via Postman, my code would be like this:

const image = request.file('photo', {
  types: ['image'],
  size: '2mb',
});

await image.move(Helpers.tmpPath('uploads'), {
  name: `${Date.now()}-${image.clientName}`,
});

if (image.status !== 'moved') {
  return image.error;
}

/////

const data = {
  username,
  email,
  role,
  photo: image.fileName,
  password,
  access: 1,
};

const user = await User.create(data);

In the first part, I process the image move it to tmp inside the backend, on the next part I use image.fileName and create a User.

And when I need to fetch my user list, I do it like this:

const colaboradoresList = await Database.raw(
  'select * from colaboradores where access = 1'
);
const userList = colaboradoresList[0];
userList.map((i) => (i.url = Helpers.tmpPath(`uploads/${i.photo}`)));

But as you can tell, Helpers.tmpPath('uploads/${i.photo}')) will return the local path to the current image, and I cannot display it on React since I need to use the public folder or download it and import.

Is there a way to do it locally, or the only way would be to create an AWS and use Drive.getUrl() to create a URL and send back to my front end?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Yes the UI cannot display local files, you need to expose a public url for the image. You have two options depending of the scope of this application

  1. If you plan to run this as a professional app, I would highly suggest to use something like AWS S3 to store images.

  2. Otherwise you can probably get away with setting up a route for the React UI to query. Something like /api/image/:id could return the binary or base64 encoded data of the image, which React could then display.

about 4 years ago · Juan Pablo Isaza Relatório

0

instead of

await image.move(Helpers.tmpPath('uploads'), {
  name: `${Date.now()}-${image.clientName}`,
});

I use:

await image.move(Helpers.publicPath('uploads'),
{name: `${Date.now()}-${image.clientName}`})

For that you will need to change the folders to make it store correctly:
folder formation

And then send to the front-end url = '/uploads/${i.photo}', where i.photo is the file name, so I can concatenate in React like so apiBase + url.
The result being your apiUrl + your file path that should be on public folder: result

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda