@maslick/aplouder

    1.3.4 • Public • Published

    =apLouder=

    npm (scoped) npm bundle size (minified) npm no dependencies npm download count License: MIT

    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

    aplouder

    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>
    1. Initialize ApLouder
    <script>
        var aplouder = new Aplouder({
            id: "my-element",
            callback: function (f) {
                console.log(f.src.name);
            }
        });
        aplouder.init();
    </script>

    aplouder

    is identical to:

    aplouder

    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.

    Install

    npm i @maslick/aplouder

    DownloadsWeekly Downloads

    3

    Version

    1.3.4

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • maslick