Filename is lost after transform

[pqina]

Filename is lost after transform

[rikschennink]

Can you try turning the file param into an actual file object.

file = new File([file], file.name);

More info here: https://pqina.nl/blog/rename-a-file-with-javascript/

[rolandorojas]

Adding new File([file], file.name); solves the issue. Thanks!

[rikschennink]

Are you uploading async using server prop, or using the file-encode plugin? Are you using a custom server.process method?

[rolandorojas]

I am using the server.process method to a sync upload the files. I am not using the file-encode plugin.

[rikschennink]

Are you using a custom process method or URL?

[rolandorojas]

Yes, I am using Laravel Livewire to side load the images as soon as they are selected. This process works perfectly unless I try to resize the image.

Below is the exact code I am using. If I set allowImageTransform to false everything works. Otherwise, the file name is lost.

FilePond.registerPlugin(FilePondPluginImageResize);
        FilePond.registerPlugin(FilePondPluginImageTransform);

        pond = FilePond.create($refs.input, {
            allowMultiple: true,
            imageResizeMode: 'contain',
            imageResizeTargetWidth: 1500,
            imageResizeTargetHeight: 1500,
            imageTransformOutputMimeType: 'image/jpeg',
            allowImageTransform: true,
            server: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    window.livewire.find('BnwoZyS7sjEJORZmqBFL').upload('images', file, load, error, progress)
                },
                revert: (filename, load) => {
                    window.livewire.find('BnwoZyS7sjEJORZmqBFL').removeUpload('images', filename, load)
                },
            },
        });