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

Category: Form , Javascript , Recommended | January 17, 2020
Author: elninotech
Views Total: 157
Official Page: Go to website
Last Update: January 17, 2020
License: MIT

Preview:

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

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

# 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 a new image uploader instance.

const uploader = new Uppload({
      value: 'path to default image',
      bind: 'set value of these elements',
      call?: 'clicking on these elements should open modal',
      defaultService: 'service here',
      lang: 'en',
      uploader: function(){/*either import an uploader from Uppload or build your own uploader, depending on your server configuration*/},
      inline: false,
      customClass: 'custom class here'
});

5. 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:

2.0.1 (01/17/2019)

  • v2.0.1 stable

2.0.0 (01/02/2019)

  • 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

You Might Be Interested In:


Leave a Reply