🖼️ Uppload

Uppload 1.x

This README is for the upcoming TypeScript rewrite of Uppload, releasing in December 2019.

You can view the README of Uppload 1.x, the current stable version, in the master branch.

Uppload 2

Uppload 2 is the upcoming major update to Uppload, El Niño's JavaScript file uploading widget with 15+ ways to select images. It's written in TypeScript and supports custom builds.

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

View Uppload 2 docs →

View live demo →

⭐ Features

• Drag and drop to upload file
• Import image from web services (URL, Instagram, Facebook, etc.)
• Search for pictures and import (Unsplash, Pexels, Pixabay)
• Edit photo before uploading (filters, crop, rotate, etc.)
• All file uploading backends supported
• Works with all modern browsers (IE 11+)

🛠 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, Filters } from "uppload";

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

💻 Usage Docs

• Getting started
• Configuration
• Examples
• Building a custom package
• API
• Listening to events
• Multiple Uppload instances
• Migrating from Uppload 1.x
• Services (20+ ways to select a file)
• Effects (10+ ways to edit a file)
• Uploaders (ways to send a file to the server)
• Themes
• Wrappers
• Backends
• Internationalization

View Uppload 2 docs →

🛣️ Roadmap

• [ ] Services
  • [ ] Click photo from camera
• [ ] Effects
  • [ ] Instagram-like filters
  • [ ] Rotation, mirror
• [ ] Documentation
  • [ ] TypeDoc for exploring packages and interfaces
  • [ ] Docs to show people how to upload to:
    • [ ] AWS S3 bucket
    • [ ] Firebase
    • [ ] Upload to web service like Imgur
  • [ ] Docs to people how to use Uppload with frameworks:
    • [ ] Vue.js
    • [ ] React
    • [ ] Angular
    • [ ] Ember.js

👥 Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

📄 License

• Code: MIT
• Logo and assets: CC BY 4.0
• Image filter icons: CC BY 3.0