Show uploaded Image

Hey folks,
as I do not find a solution on google or this forum, I just ask it again. How can I show the uploaded image?

Route.post('upload/faction/image', async ({ request, response }) => {
    const factionImage = request.file('image', {
      types: ['image'],
      size: '2mb',
      allowedExtensions: ['jpg', 'png', 'jpeg']
    })
    await factionImage.move(Helpers.publicPath('uploads'), {
      name: factionImage.clientName,
      overwrite: true
    })

    if (!factionImage.moved()) {
      return factionImage.error()
    }
    return response.json({
      status: 200,
      image: factionImage.clientName
    })
  })

this is my code till date.
The Image is stored in public/uploads/ but I can not show the image. Every time I visit domain.com/public/uploads/THE_IMAGE.jpg
I get E_ROUTE_NOT_FOUND: Route not found GET

Dies anybody have a solution for this?

1 Like

Thanks to Romain Lanz!

Showing uploaded images works as follows.
Create a route like
Route.post('image/', 'ImageController.show')
We want to pass the name of the image to a Controller. So let’s create a controller and write the show method.

const Helpers = use('Helpers')

class ImageController {
  show({ request, response }) {
    const path = Helpers.appRoot(
      `uploads/factions/${request.input('imageName')}`
    )

    return response.download(path)
  }
}

Instead of showing the path to the image, we rather should download it, that’s it.

1 Like