Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

@maslick/aplouder

1.3.2 • 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

4

version

1.3.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability