Image-input-preview NPM

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
});