Image preview upscale?

[Przemek Luniewski]

Hello, I really do enjoy using these components, best fit for my React project 🥇

Is there something I can configure to scale up image thumbnail so it takes full width of the parent? When I inspect the DOM, I think I am looking to have filepond--image-clip taking the full width of filepond--image-preview and aspect ratio preserved.

My config below. Many thanks for any help!

import { FilePond, registerPlugin } from 'react-filepond';
import 'filepond/dist/filepond.min.css';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

registerPlugin(
            FilePondPluginImageExifOrientation, 
            FilePondPluginImageResize, 
            FilePondPluginImagePreview, 
            FilePondPluginFileValidateType, 
            FilePondPluginImageValidateSize
            );

<FilePond 
    allowImageResize={true} 
    imageResizeUpscale={true} 
    stylePanelLayout={'integrated'} 
    acceptedFileTypes={['image/*']} 
    allowMultiple={false} 
    imagePreviewMaxHeight={1024} 
    allowReplace={false} 
    labelIdle={'Drop a picture here or <span class="filepond--label-action"> browse </span>'} 
    ref={ref => this.pond = ref} 
/>

[Rik]

Hmm, it should do that, might be a bug. Will look into this next week.

[Przemek Luniewski]

Ok, I thought this was just not supported, as the docs say preview is being downscaled, and in my case the image file being uploaded may (or may not) be just smaller than the space I have for it. So let me provide a bit more details to help investigate this.

First of all, I am using Preact instead of React. Here's the whole component:

import { Component } from 'preact';

import { FilePond, registerPlugin } from 'react-filepond';
import 'filepond/dist/filepond.min.css';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import '../../../assets/css-overrides/filepond.css';

export default class PPictures extends Component {

    constructor(props) {
        super(props);
        registerPlugin(
            FilePondPluginImageExifOrientation, 
            FilePondPluginImageResize, 
            FilePondPluginImagePreview, 
            FilePondPluginFileValidateType, 
            FilePondPluginImageValidateSize);
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            <div id="fpond-wrapper" class="mb-2">
                <FilePond 
                    allowImageResize={true} 
                    imageResizeUpscale={true} 
                    stylePanelLayout={'integrated'} 
                    acceptedFileTypes={['image/*']} 
                    allowMultiple={false} 
                    imagePreviewMaxHeight={1024} 
                    allowReplace={false} 
                    labelIdle={'Drop a picture here or <span class="filepond--label-action"> browse </span>'} 
                    ref={ref => this.pond = ref} 
                />
            </div>
        );
    }
}

I have recently updated my packages:

 "dependencies": {
    "@sentry/browser": "^4.6.6",
    "bootstrap": "^4.3.1",
    "filepond": "^4.4.0",
    "filepond-plugin-file-validate-type": "^1.2.4",
    "filepond-plugin-image-exif-orientation": "^1.0.6",
    "filepond-plugin-image-preview": "^4.0.8",
    "filepond-plugin-image-resize": "^2.0.4",
    "filepond-plugin-image-validate-size": "^1.2.3",
    "preact": "^8.4.2",
    "react-filepond": "^7.0.1",
    "redux": "^4.0.1",
    "redux-logic": "^2.1.1"
  }

I did override some CSS, looking for a very plain preview experience:

/* Overrides for filepond css */

.filepond--file-info {
    display: none;
}

.filepond--image-preview-overlay {
    display: none;
}

.filepond--image-clip {
    background-color: transparent;
    border-radius: 5px;
}

.filepond--image-preview-wrapper {
    background-color: transparent;
}

.filepond--file {
    background-color: transparent;
}

.filepond--image-preview {
    background-color: transparent;
    
}

Here's an example of what I get on the screen - I would love to see the preview up-scaled so there are no white spaces left and right and aspect ratio is preserved:

[Rik]

@przelu I just published version 4.1.0 of the image preview plugin, it now has a imagePreviewUpscale option. Set it to true to allow upscaling of small images. Should fix the issue.

[Przemek Luniewski]

Hi Rik, my issue is solved. Sorry for late reply, I was off.

[JaysonF]

if someone still stumble on this, here's a quick comment..

the preview won't always have a width equal to the filepond--image-preview as it depends on it's ancestor's width and screen size ...the width of the image preview auto adjust based on the set imagePreviewHeight to keep the aspect ratio...but on the preview the image width is somehow clipped, this is due to filepond--image-clip overflow:hidden,
if you override the css and unset the hidden, it should show the full width of the image in ratio with the set height.