Elegant Image Uploader With Resize/Crop Support – uppload.js

Preview:

Description:

uppload.js is a modern JavaScript library created to improve the image upload experience.

The library provides an elegant file selection interface that enables the user to select images from the local via drag-drop.

It also allows you to import images from any data source such as URL, camera, Instagram post, Facebook public post, etc.

You’re also allowed to crop, resize, rotate the images on the client-side before it is uploaded to the server.

Compatible with Vanilla JavaScript and React/Vue frameworks.

Basic usage:

1. Install & import the uppload.js modules.

# Yarn
$ yarn add uppload
# NPM
$ npm install uppload --save

import { Uppload, en, Local, Unsplash, Crop, Filters, xhrUploader, MORE COMPONENTS } from "uppload";

2. Import the core stylesheet and a theme CSS.

import "uppload/dist/uppload.css";
import "uppload/dist/themes/light.css";
import "uppload/dist/themes/dark.css";

3. Or directly include the compiled JavaScript in the document.

<!-- For Modern Browsers -->
<script src="https://cdn.jsdelivr.net/npm/uppload/dist/uppload.no-polyfills.min.js"></script>
<!-- For Legacy Browsers -->
<script src="https://cdn.jsdelivr.net/npm/uppload/dist/uppload.min.js"></script>

4. Create an empty img tag where the image preview will be placed here.

<img alt="Profile picture" class="profile-pic">

5. Create a button to toggle the Uppload interface.

<button class="pic-btn">Change picture</button>

6. Create a new image uploader instance.

const uploader = new Uppload({
      lang: en,
      uploader: xhrUploader({
        endpoint: "https://example.com/upload"
      }),
      bind: document.querySelector("img.profile-pic"),
      call: document.querySelector("button.pic-btn")
});
uploader.use([new Local(), new Instagram()]);

7. You can also open/close the Uppload interface with the following methods.

uppload.open();
uppload.close();

8. All possible options to customize the Uppload.

const uploader = new Uppload({
      // Default/current image URL
      value: '',
      // String (e.g., a query selector like ".image")
      // String[] (e.g., a query selector array like [".image", ".img"])
      // Element (e.g., a DOM element like document.getElementById("img"))
      // Element[] (e.g., a DOM element array like [document.createElement("div")])
      // An array consisting Strings and DOM elements
      bind: IElements,
      // Element to toggle the Uppload interface
      call: IElements,
      // Default service to open Uppload on
      defaultService: '',
      // Language
      lang: {},
      // Function to upload files
      uploader: xhrUploader({
        endpoint: "https://example.com/upload"
      }),
      // Show Uppload inline instead of modal
      inline: false,
      // Additional class
      customClass: '',
      // Allows multiple files
      multiple: true,
      // Compress image with this factor (0-1)
      compression: 0,
      // mime type
      compressionMime: 'image/jpeg',
      // max width/height
      maxWidth: '',
      maxHeight: '',
      maxSize: [width, height],
      // Function to compress files
      compressor: (file: Blob) => {
        return new Promise((resolve, reject) => {
          // Perform your compression here
          resolve(file);
        });
      }
      
});

9. API methods.

// toggle
uppload.open();
uppload.close();
uppload.toggle();
// check if is open
const isOpen = uppload.modalOpen();
// navigate to a specific service
uppload.navigate("local");
// upload a file
const file = new Blob();
uppload.upload(file)
  .then(url => {
    console.log("Uploaded URL", url);
  }).catch(error => {
    console.error("ERR", error);
  });
// update options
uppload.updateSettings({
  // options here
});
// remove a plugin
uppload.remove("instagram");
uppload.remove("crop");
// remove all plugins
uppload.updatePlugins(plugins => []);
// update plugins
uppload.updatePlugins(plugins => plugins.filter(plugin => {
  plugin.name === "instagram"
}));
uppload.updatePlugins(plugins => {
  const result = plugins.length > 4 ? [] : plugins;
  result.push(new Crop(), new Unsplash());
  return result;
});

10. Event listeners.

uploader.on("ready", () => {
  // ready
});
uploader.on("bind", (value) => {
  // on bind
});
uploader.on("open", () => {
  // on open
});
uploader.on("close", () => {
  // on close
});
uploader.on("before-upload", () => {
  // on before upload
});
uploader.on("upload", (url) => {
  console.log(`The URL of the uploaded file is: ${url}`);
});
uploader.on("error",  (error) => {
  console.log("The error message is", error);
});

Changelog:

3.2.1 (06/14/2020)

• Fix emitter “off” returning “on”

3.2.0 (05/09/2020)

• Allow disable modal click close

3.1.0 (04/14/2020)

• v3.1.0 stable

3.0.3 (03/26/2020)

• v3.0.3 stable

3.0.1 (03/24/2020)

• v3.0.1 stable

2.7.4 (03/22/2020)

• v2.7.4 stable

2.7.3 (03/21/2020)

• v2.7.3 stable

2.7.2 (03/18/2020)

• v2.7.2 stable

2.6.1 (03/09/2020)

• v2.6.1 stable

2.6.0 (02/23/2020)

• v2.6.0 stable

2.5.0 (02/23/2020)

• v2.5.0 stable

2.4.0 (02/21/2020)

• v2.4.0 stable

2.3.1 (02/12/2020)

• v2.3.1 stable

2.3.0 (02/05/2020)

• v2.3.0 stable

2.2.0 (01/27/2020)

• v2.1.0 stable

2.1.0 (01/25/2020)

• v2.1.0 stable

01/18/2020

• Fixed download link. Thanks to Adamko.

2.0.1 (01/17/2020)

• v2.0.1 stable

2.0.0 (01/02/2020)

• v2 stable

2.0.0-beta.20 (12/23/2019)

• Add supports for filter effect

2.0.0-beta.19 (12/20/2019)

• Updated

2.0.0-beta.16 (12/12/2019)

• Hide help on plugin open
• Add help loading state
• Rename “we-heart-it” to “weheartit”
• Hide help on error
• Add help translations

2.0.0-beta.15 (12/11/2019)

• Add help icon to other services
• Show help
• Upload file directly when no effect
• Move “?” icon to bottom
• Add styling for show/hide help
• Add help iframe and button
• Add “Need help?” icon
• Update image branch URLs

2.0.0-beta.14 (12/09/2019)

• Add rotate
• Add Edge support to toBlob
• Add a/an helper
• Add canvasToBlob helper
• Add string.includes polyfill
• Make i18n slimmer
• Use errors object
• Hide camera on mobile

2.0.0-beta.9 (11/27/2019)

• Add native polyfills

2.0.0-beta.6 (11/23/2019)

• Scroll to active element
• Support for file compression
• Support for files
• Add built-in polyfills
• Add browser support check
• Only scroll from default service
• Add focus on update
• Add play icon to try button
• Use NodeList.forEach
• Make modal height responsive
• Remove change camera button for now
• Responsive modal
• Remove unrequired dependencies

2.0.0-beta.4 (11/22/2019)

• Added: Dynamically size effects tab
• Added: Changed Use session storage instead of local
• Added: cache TTL to cachedFetch
• Fixed: flash of image size using opacity

2.0.0-beta.2 (11/16/2019)

• Support for inline Uppload
• Add fetch uploader
• Add XHR uploader
• Add 6 new microlink services
• Support for shared codebase in search