@maslick/aplouder

=apLouder=

enhanced multi-file uploader

Features

• enhances the standard HTML input type="file" element
• adds an image gallery with thumbnails
• shows size/filename on mouse hover
• on-click image preview (use left/right/esc keys to navigate through the gallery)
• 100% JavaScript
• works perfectly on desktop, mobile and tablet
• support for non-image files
• no extra dependencies (jquery, etc.)
• small size (minified ~6 Kb)
• browser and Node.js friendly

Demo

Live demo can be found here.

Installation

<link rel="stylesheet" href="aplouder.css">
<script src="aplouder.js"></script>

Usage

1. Define your input file element:

<input type="file" id="my-element" multiple>

2. Initialize ApLouder

<script>
    var aplouder = new Aplouder({
        id: "my-element",
        callback: function (f) {
            console.log(f.src.name);
        }
    });
    aplouder.init();
</script>

is identical to:

Node.js environment

import Aplouder from "@maslick/aplouder";

const aplouder = new Aplouder({
    id: "el-1",
    callback: function (f) {
        console.log(f.src.name);
    }
});

For a React.js example see this project.

License

This project is licenced under the MIT License.