Skip to content
enhanced multi-file uploader
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.
demo
img
src
.gitignore
README.md
aplouder.min.js
index.js
package-lock.json
package.json

README.md

=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.

You can’t perform that action at this time.