Skip to content
Display a preview for your image inputs
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
.gitignore
ImageInputPreview.js
ImageInputPreview.less
ImageInputPreview.min.css
ImageInputPreview.min.js
LICENSE
README.md
package.json

README.md

Image Input Preview (Demo)

Display a preview for your image inputs easily

Doc

  • Installation

Simply import image-input-preview into your HTML.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/image-input-preview@0.0.10/ImageInputPreview.min.css">
<script src="https://unpkg.com/image-input-preview@0.0.10/ImageInputPreview.min.js"></script>
  • Documentation

See the offical documentation for more in-depth informations.

  • How to use

You can either use data attributes or the ImageInputAttribute class to initialyze your inputs:

<input type="file" accept="image/*" data-preview="https://link.to.your.preview.net">
// OR
let preview = new ImageInputPreview(input, {
  preview: 'https://link.to.your/preview.png',        // Optional | Preview displayed
  uploadIcon: 'https://link.to.your.upload/icon.png', // Optional | Icon used when no preview is displayed
  lang: 'en',                                         // Optional | Language used
  dictionary: null                                    // Optional | Allow for custom language
});
  • Methods

See the documentation for the method definitions.

  • Example

See this JSFiddle for a working example

Authors

You can’t perform that action at this time.