How to use imageTransformVariants?

[matejmajzel]

imageTransformVariants doesn't send multiple files to the controller as It supposes to. Is there anything I missed?

[rahulhaque]

TLDR: At first change the input name from single to array. For example, name="avatar" to name="avatar[]". The first variant of the file is stored for you. Try manually posting the rest of the variants one by one and append the response from the server as hidden input by leveraging onpreparefile event mentioned here. I would do something like this

FilePond.create(input, {
    imageTransformVariants: {
        ...
    },
    onpreparefile: (file, output) => {
        output.forEach(file => {
            // Post the file to the backend
            // Append the response as hidden input with the same name as input
            // In this scenario <input name="avatar[]" value="{response}"/>
        });
    },
});

Then when you submit the form, you will get all the variants as a multiple uploaded files.
.
Here comes the explanation. I haven't used this plugin before. After going through the internals, I found that the imageTransformVariants does send multiple files to the backend but in one call. The philosophy behind filepond upload was to send one file at a time and append the response one at a time which my library does well - read here. But posting multiple files in one call seems conflicting with the current philosophy and it makes it harder for the backend to validate the files properly. I will try implementing support for this plugin but needs testing for numerious use cases. Till then you can try out the above approach.

[matejmajzel]

Thank you for your explanation. Makes sense, I still can resize to thumbnail in the backend, but I would rather leave the resizing on the client's side. So I'll give it a try as you recommended.