Skip to content

πŸ“ JavaScript image uploader and editor, no backend required

License

Notifications You must be signed in to change notification settings

hackernoon/uppload

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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 β˜οΈβœ¨β€ β€” Product Hunt

Status
Build GitHub Actions Travis CI Azure Pipelines
Dependencies Dependencies Dev dependencies Vulnerabilities FOSSA Status
Documentation Netlify Website status Uptime Type definitions Articles
Community Contributors Code maintainability Codacy grade Product Hunt #1 of the day
Package npm package version npm downloads GitHub Languages semantic-release

View Uppload demo and docs β†’

⭐ Features

Screenshot of Uppload home Screenshot of local service
Screenshot of Unsplash service Screenshot of filter effects
Screenshot of GIPHY service Screenshot of Instagram effects

πŸ›  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

View Uppload docs β†’

ℹ️ Support

If you need help with using Uppload, check out the Getting started guide and the documentation. If you found a bug or have a feature request, open an issue. If you want to contribute to Uppload, read our Contributing guide.

Your organization can also request a custom build or get professional support. Request a quote for free β†’

πŸ‘₯ Contributors

Uppload is built by El NiΓ±o, a digital development studio in Enschede, the Netherlands, that builds custom web and mobile apps, webstores, and more, backed by 14+ years of experience.

We'd like to thank these wonderful people and teams for contributing (emoji key):

El NiΓ±o
El NiΓ±o

πŸ’Ό πŸ’΅ πŸš‡ πŸ“†
Anand Chowdhary
Anand Chowdhary

πŸ› πŸ’» πŸ“–
Teun Lassche
Teun Lassche

πŸ› πŸ’» πŸ›‘οΈ
Victor
Victor

πŸ’» 🌍 πŸ“–
Rick van Gemert
Rick van Gemert

πŸ› πŸ’»
tomtenvoorde
tomtenvoorde

🎨
Matt
Matt

πŸ› πŸ’»
Rob
Rob

πŸ›
Mihir Chaturvedi
Mihir Chaturvedi

πŸ“–
Kevin Marrec
Kevin Marrec

πŸ“–
Jordan Kniest
Jordan Kniest

🌍
Bram Borggreve
Bram Borggreve

πŸ’» πŸ“¦
Alex Imbrea
Alex Imbrea

πŸ“–
Achim KrΓ€mer
Achim KrΓ€mer

🌍
Nikhil Sahukar
Nikhil Sahukar

🎨
Rohit Bhatia
Rohit Bhatia

πŸ›
Zeke Nierenberg
Zeke Nierenberg

πŸ› πŸ’»
Brian Teeman
Brian Teeman

🌍
Dmitry Ivakhnenko
Dmitry Ivakhnenko

🌍
Orion Lu
Orion Lu

🌍
Nisar Hassan Naqvi
Nisar Hassan Naqvi

πŸ“–
Daan
Daan

🌍
SIGMA Technology
SIGMA Technology

πŸ›
Claudio Eyzaguirre
Claudio Eyzaguirre

🌍
Netlify
Netlify

πŸš‡
Cristiano AP
Cristiano AP

🌍
Richard
Richard

πŸ› πŸ’»
MaximusBaton
MaximusBaton

πŸ›
Quinn (they/them)
Quinn (they/them)

πŸ›

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

πŸ“„ License

About

πŸ“ JavaScript image uploader and editor, no backend required

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 86.6%
  • SCSS 11.8%
  • JavaScript 1.4%
  • Other 0.2%