Search code examples
javascripthtmlcssfilepond

Filepond gridlayout conflicting with image resize

Now that I'm using the file pond, I'd like to scale the photos to fill the target dimensions unless they're all various sizes, which is why I added the image resize function. Its image resize function works.  However the image resize function does not work when I use the grid layout to show the pictures side by side.

  .filepond--root {
    max-width:30em;
}
.filepond--item {
    width: calc(50% - 0.5em);
}
body {
    padding: 2em;
}

img {
    margin: 1em 2em 0 0;
    border-radius: .25em;
    box-shadow: 0 .125em .5em rgba(0,0,0,0.25);
}
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

<input type="file"
       class="filepond"
       accept="image/*"
       name="filepond"
       multiple
       data-max-file-size="3MB"
       data-max-files="6"/>

<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
    
    FilePond.registerPlugin(
        FilePondPluginImageResize,
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview
    );

    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement, {
        imageCropAspectRatio: 1,
        imageResizeTargetWidth: 256,
        imageResizeMode: 'contain'
    });

</script>

enter image description here

enter image description here

Solution 

  • .filepond--root {
    max-width:20em;
}

.filepond--item {
    width: calc(50% - 0.5em);
}

body {
    padding: 2em;
}

img {
    margin: 1em 2em 0 0;
    border-radius: .25em;
    box-shadow: 0 .125em .5em rgba(0,0,0,.25);
}
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

<input type="file" 
       accept="image/*"
       class="filepond"
       name="filepond"
       multiple
       data-max-file-size="2MB"
       data-max-files="6"/>

<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
    
    FilePond.registerPlugin(
        FilePondPluginImageCrop,
        FilePondPluginImagePreview,
        FilePondPluginImageResize,
        FilePondPluginFileValidateType
    );

    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement, {
        imageCropAspectRatio: 1,
        imageResizeTargetWidth: 256,
        imageResizeMode: 'contain',
        onaddfile: (err, fileItem) => {
            console.log(err, fileItem.getMetadata('resize'));
        },
        onpreparefile: (fileItem, outputFiles) => {
            outputFiles.forEach(output => {
                const img = new Image();
                img.src = URL.createObjectURL(output.file);
                document.body.appendChild(img);
            })
        }
    });
</script>