How to get compressed/resized image?

[weiliank]

How to get the result of image after uploading process?

I tried the codes below:

$('.filepond').on('FilePond:processfile', function(e) {
            if (e.detail.error) {
                console.log('Oh no');
                return;
            }
            console.log('File processed', e.detail.file);
        });

but when i inspect back the image size or dimension is still the same as original file.

[rikschennink]

@weiliank Have you added the image-transform plugin?

[weiliank]

Hi @rikschennink

Yes, I did included the plugin library and also I have registered the plugin

FilePond.registerPlugin(
            // encodes the file as base64 data
            FilePondPluginFileEncode,
            // validates the size of the file
            FilePondPluginFileValidateSize,
            // corrects mobile image orientation
            FilePondPluginImageExifOrientation,
            // previews dropped images
            FilePondPluginImagePreview,
            FilePondPluginFileValidateType,
            FilePondPluginImageTransform
        );

I am wondering how to get the compressed/resized image upload to the server (localhost/cloud).

Thanks!

[rikschennink]

@weiliank If you're uploading using XMLHttpRequest ( the server config property ) you can leave out the File Encode plugin. How have you configured the server property?

[weiliank]

Hi @rikschennink,

I configured it as below:

const inputElement = document.querySelector('.filepond');
        const pond = FilePond.create(inputElement, {
            labelIdle: 'Drag & Drop your picture or <span class="filepond--label-action">Browse Your PC</span>',
            imagePreviewHeight: 400,
            imageCropAspectRatio: '1:1',
            imageResizeTargetWidth: 300,
            imageResizeTargetHeight: 300,
            imageResizeMode: 'cover',
            instantUpload: true,
            allowFileEncode: true,
            allowImageTransform: true,
            server: {
                url: '<?php echo base_url()?>', // http://localhost/wine/
                timeout: 7000,
                process: {
                    url: 'products/azure',
                    method: 'POST'
                }
            }
        });

Is this correct?

[rikschennink]

@weiliank Looks okay to me. You can remove these lines allowFileEncode: true and allowImageTransform: true as plugins are enabled by default. It looks okay otherwise.

Just took a look at the registerPlugin snippet for the second time, it seems the Image Crop and Image Resize plugins are not loaded.

[rikschennink]

@weiliank Will close for now as the issue is probably related to the Image Crop and Image Resize plugins not being loaded.