Skip to content

Renders uploaded images in full size using an overlay inside the FilePond plugin

License

Notifications You must be signed in to change notification settings

zbcjackson/filepond-plugin-image-overlay

 
 

Repository files navigation

Image Overlay plugin for FilePond

License: MIT npm version

The Image Overlay plugin will add a tiny 'eye' icon in front of the filename to allow opening the uploaded image in a large overlay. In case the Image Preview plugin is used, the preview itself will be made clickable as well.

Quick Start

Install using npm:

npm install filepond-plugin-image-overlay

Then import in your project:

import * as FilePond from 'filepond';
import FilePondPluginImageOverlay from 'filepond-plugin-image-overlay';

Also, don't forget to import the belonging styles:

import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.css'

Register the plugin:

FilePond.registerPlugin(FilePondPluginImageOverlay);

Create a new FilePond instance as normal.

const pond = FilePond.create({
    name: 'filepond'
});

// Add it to the DOM
document.body.appendChild(pond.element);

The functionality will become active when uploading an image.

Configuration

The label of the image overlay icon can be adjusted as follows:

const pond = FilePond.create({
    name: 'filepond',
    labelButtonImageOverlay: 'custom label' // by default 'Open image in overlay file'
});

Demo

View the demo

About

Renders uploaded images in full size using an overlay inside the FilePond plugin

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 67.1%
  • HTML 18.5%
  • SCSS 14.4%