FilePond Pintura Image Editor

Combine FilePond with Pintura and create the perfect image edit and upload experience.

Learn more about Pintura

Image preview

The Image Preview plugin renders a downscaled preview for dropped images.

Combined with the Image EXIF orientation plugin it automatically corrects any mobile rotation information to ensure the image is alway shown correctly.

Dropping really big images might impact performance. Browsers that support createImageBitmap have an advantage as they can render the Bitmap data on a separate thread. Use the imagePreviewMaxFileSize setting to prevent previewing of very large images.

Installation

Using npm

npm i filepond-plugin-image-preview --save

Now we can add the Image Preview plugin to our project like this.

// Import FilePond
import * as FilePond from 'filepond';

// Import the plugin code
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

// Import the plugin styles
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

// Register the plugin
FilePond.registerPlugin(FilePondPluginImagePreview);

If a module bundler ( like Webpack ) is not available, the plugin CSS file will have to be embedded manually.

Using a CDN

<!-- add to document <head> -->
<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"
/>

<!-- add before </body> -->
<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>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImagePreview);

    // ... FilePond initialisation code here
</script>

Manual installation

<!-- add to document <head> -->
<link href="filepond.css" rel="stylesheet" />
<link href="filepond-plugin-image-preview.css" rel="stylesheet" />

<!-- add before </body> -->
<script src="filepond-plugin-image-preview.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginImagePreview);

    // ... FilePond initialisation code here
</script>

Properties

Property Default value Description
allowImagePreview
true
Enable or disable preview mode
imagePreviewMinHeight
44
Minimum image preview height
imagePreviewMaxHeight
256
Maximum image preview height
imagePreviewHeight
null
Fixed image preview height, overrides min and max preview height
imagePreviewMaxFileSize
null
Can be used to prevent loading of large images when createImageBitmap is not supported. By default no maximum file size is defined, expects a string, like 2MB or 500KB.
imagePreviewTransparencyIndicator
null
Set to 'grid' to render a transparency grid behind the image, set to a color value (for example '#f00') to set transparent image background color. Please note that this is only for preview purposes, the background color or grid is not embedded in the output image.
imagePreviewMaxInstantPreviewFileSize
1000000
Maximum file size for images to preview immediately, if files are larger and the browser doesn't support createImageBitmap the preview is queued till FilePond is in rest state.
imagePreviewMarkupShow
true
Set to false to hide image markup in the preview panel.
imagePreviewMarkupFilter
(markupItem) => true
Use to filter markup items, useful to show only certain items and hide others till the image file is generated by the image transform plugin.
imagePreviewFilterItem
(fileItem) => true
Use to filter file items before generating the preview, useful to filter certain image types or names if we do not wish to generate a preview. Receives a file item as the first argument. Return false to skip generating an image preview. (item) => !/svg/.test(item.fileType) will skip generating previews for SVGs.