Filepond sends just one resized image

[m0n9oose]

Hey there.

First of all, thanks a lot for the great tool. I've tried a few uploader but your's far better than any of them.

Having a couple of small problems with Transform plugin: I'd like to use resing of the original image and generate two thumbnails. Here's part of my config:

imageResizeTargetWidth: 720,
imageTransformVariants: {
  thumb_medium_: transforms => {
    transforms.resize.size.width = 300;
    return transforms;
  },
  thumb_small_: transforms => {
    transforms.resize.size.width = 80;
    return transforms;
  }
},

The problem is Filepond sends just the last "thumb_small_x" image. As far as I understood from your blog post on dev.to it's a problem of output type: now, instead of one image, I have three.

1. How to make Filepond add all images to the queue and send them to the backend. As far as I understand, using onpreparefile for sending files is not a good move.
2. The resized original image has resolution 1175 × 720 pixels which means Filepond changed the image size by height instead of width. Am I doing something wrong?

[rikschennink]

Hi, thanks, glad to hear you like it!

1. It won't create three separate files, instead it'll send an array of files to the server for this item. I'd advise to upload them in the server.process callback.

2. Most likely due to the imageResizeMode being set to cover, switch it to contain, and also supply the intended height of the variant.

[m0n9oose]

1. Great, I was using the default sending mechanism, not a custom process callback function, I'll try it today.
2. I was testing resizing of the original image without variants. Because of the problem with one last image instead of a bunch of images, I have disabled variants entirely for some time and use the default resizing strategy. So basically I have set just theimageResizeTargetWidth parameter and got image resized by height instead of width. I'll give it a try with custom resizing strategy too, but still, feel a bit off.

[m0n9oose]

hey @rikschennink

I have implemented custom process function with merging all files into a single request payload, works like a charm! Thanks a lot for the excellent hint.

However, I think I found another interesting thing with resizing:

1. I have tested resizing of the original image on different images and found that imageResizeTargetWidth option works like "the size of the smallest side. If I upload a portrait image, then it makes the height adjustable and width = 720px, but if I upload album-oriented image I got an image with adjustable width and height = 720px. It's still okay for me because I need to make sure I won't pay extra money for storing large images. But I think this could be interesting.
2. I have checked my variants, and I was surprised when I found that both of them have the same size (byte to byte) and resolution which is smaller than original but has nothing to do with my settings.

P.S. Just tried another image and got another result: three identical files: same size, same resolution.

[rikschennink]

1. You can set the outputFit property to 'contain', setting height as well as width is advised.
2. For variants please also set width and height.

[m0n9oose]

@rikschennink thanks for your help and responsiveness! Applied all settings as you advised and now resizing works as I expect!. I'll close the issue now I hope our conversation could be helpful if somebody encounters problems like these