[V5] image upload and resize with sharp

[HappyLDE]

Hi, I need to resize the uploaded file with sharp, but how do I access the file body to give to sharp?

The image object has only the .move() function, do I need to move the file first?

 public async uploadImage(ctx: HttpContextContract) {
    const image = ctx.request.file('file', {
      size: '5mb',
      extnames: ['webp', 'jpg', 'jpeg', 'gif', 'png', 'svg'],
    })

    // here I'm passing the image object to sharp
    // gives "Error: Input file is missing"
    const resizedImageData = await sharp(image).resize(500).toBuffer()
}

What should be done?
Thanks in advance!

[steschwa]

The way i achieve this currently is to use the local file path of the uploaded image:

const image = ctx.request.file(...)
const resizedImageData = await sharp(image.tmpPath).resize(500).toBuffer()

I've tried digging through the @adonisjs/bodyparser package which allows streaming uploaded files directly (without saving to local filesystem before). Unfortunately i didn't try this yet.

[HappyLDE]

This works great for now! Thank you!

[alexhenriquepv]

image.tmpPath was the solution!

[yarapolana]

Has anyone tried with request.multipart.file or request.multipart.onFile

I tried this and both tmpPath and filePath are undefined.

    request.multipart.onFile('upload', {}, async (file) => {
      const resizedImage = await sharp(file.file.tmpPath).resize(300, 300).toBuffer()
    })
    
    await request.multipart.process()

Any help is appreciated.

[thetutlage]

There will be no tmpPath property when working with the stream directly, since you have asked AdonisJS to not touch the incoming stream with multipart data and you want to process it manually yourself.

Is there any reason you opted for manual dealing with streams (do you stream it directly to some 3rd party service like s3) ?

[yarapolana]

Yes, I stream it to s3, I wanted to resize it before uploading. I was going to do this for image and video, although the video part is more complicated.

[thetutlage]

Alright, then there is no way to resize the image as part of the direct upload. Streaming files is like reading a small percentage of bytes at a time and sending it over the wire and most image resizing libraries needs the complete buffer (all bytes).

Now, it depends how big the file uploads are.

• If I am dealing with small file uploads and performance is not a big issue, then I will not use direct upload and instead write the file to the tmp directory, resize it and then move it to s3
• If performance is a huge deal, then I will move my files as it is and instead use a service like https://www.imgix.com/ or cloudinary to do post transformations. ( I use this already in some of client projects )

[alexhenriquepv]

What about request.file('example') @yarapolana ?

[yarapolana]

@thetutlage I will try both options and see what fits best, thank you =)
@alexhenriquepv I chose not to use request.file because of the streaming part.

[marcostaborda]

I made a service provider and included a method for forwarding an avatar.

public async saveAvatar(
    file: MultipartFileContract,
    fileName: string,
  ): Promise<void> {

    const ContentType = `${file.type}/${file.subtype}`

    const resizedImageData = await sharp(file.tmpPath).resize(500).toBuffer()

    await this.client.upload({
      CacheControl: 'public,max-age=290304000',
      Key: fileName,
      Bucket: `${uploadConfig.config.aws.bucket}/${uploadConfig.config.aws.folder}`,
      Body: resizedImageData,
      ACL: 'public-read',
      ContentType,
      ContentDisposition: `inline`,
    }).promise()
  }

[johnhere6754]

Steps to run above code:

Run app.js file using the following command:
node app.js
After executing above command, you will see the following output:

Server Running!
Send a POST request to localhost:3000/upload using Postman. You need to pass “avatar” as KEY and picture as VALUE.
After hitting the request, an image directory will be created with our desired image e.g Deep Wave Wig .png/jpg/webp.