Uppload

Uppload is a better JavaScript image uploader. It's highly customizable with 30+ plugins, completely free and open-source, and can be used with any file uploading backend.

“This might just be the easiest way to let your users upload content to your site ☁️✨” — <cite><a href="https://twitter.com/ProductHunt/status/1226959275253207040">Product Hunt</a></cite>

| | Status | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Build | | | Dependencies | | | Documentation | | | Community | | | Package | |

View Uppload demo and docs →

⭐ Features

• Drag and drop file or click photo using camera
• Search for pictures and import (Unsplash, Pexels, Pixabay)
• Import image from web services (URL, Instagram, Facebook, etc.)
• Edit photo before uploading (filters, crop, rotate, etc.)
• All file uploading backends supported
• Supports frontend frameworks like Vue.js, React
• Works with all modern browsers (IE 10+)

<table> <tr> <td><img alt="Screenshot of Uppload home" src="https://raw.githubusercontent.com/elninotech/uppload/master/assets/screenshots/home.png"></td> <td><img alt="Screenshot of local service" src="https://raw.githubusercontent.com/elninotech/uppload/master/assets/screenshots/local.png"></td> </tr> <tr> <td><img alt="Screenshot of Unsplash service" src="https://raw.githubusercontent.com/elninotech/uppload/master/assets/screenshots/unsplash.png"></td> <td><img alt="Screenshot of filter effects" src="https://raw.githubusercontent.com/elninotech/uppload/master/assets/screenshots/crop.png"></td> </tr> <tr> <td><img alt="Screenshot of GIPHY service" src="https://raw.githubusercontent.com/elninotech/uppload/master/assets/screenshots/brightness.png"></td> <td><img alt="Screenshot of Instagram effects" src="https://raw.githubusercontent.com/elninotech/uppload/master/assets/screenshots/instagram.png"></td> </tr> </table>

🛠 Getting started

First, install Uppload using your package manager:

npm install uppload

Then, add styles, import Uppload and an uploader along with your language of choice and initialize the class:

import { Uppload, en, xhrUploader } from "uppload";
import "uppload/dist/uppload.css";
import "uppload/dist/themes/light.css";

const profilePicture = new Uppload({
  value: "https://via.placeholder.com/150",
  bind: ".uppload-image",
  call: ".uppload-button",
  lang: en,
  uploader: xhrUploader({
    endpoint: "https://example.com/upload"
  });
});

Finally, choose which services (ways to select a file), effects (ways to manipulate a file), and uploaders (ways to send the file to a server) you want. Then, import these classes and use the Uppload.use() function to create your package:

import { Uppload, en, Local, Unsplash, Crop, Brightness } from "uppload";

profilePicture.use([
  new Local(), // Select file from computer
  new Unsplash("your API key"), // Search and import from Unsplash
  new Crop({ aspectRatio: 16 / 9 }), // Let users crop image to 16:9
  new Brightness(), // Let users apply image filters
]);

💻 Usage Docs

• Getting started
• Browser support (IE 10+)
• Configuration
• Examples
• A-la-carte (treeshaking) plugins
• Uppload API
• Listening to events
• Services (20+ ways to select a file)
• Effects (10+ ways to edit a file)
• [Uploaders](https://uppl