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 |
|
| Dependencies |
|
| Documentation |
|
| Community |
|
| Package |
|
View Uppload demo and docs →⭐ Features
<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>
|
<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>
|
<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>
|
🛠 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 →Uppload 1.x
Uppload v2 is rewritten from the group up in TypeScript. You can view the README of Uppload 1.x, the deprecated version, or the
migration guide.
ℹ️ 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):
<td align="center"><a href="https://www.elnino.tech"><img src="https://avatars0.githubusercontent.com/u/2854021?v=4" width="100px;" alt=""/><br /><sub><b>El Niño</b></sub></a><br /><a href="#business-elnino-ict" title="Business development">💼</a> <a href="#financial-elnino-ict" title="Financial">💵</a> <a href="#infra-elnino-ict" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#projectManagement-elnino-ict" title="Project Management">📆</a></td>
<td align="center"><a href="https://anandchowdhary.com/?utm_source=github&utm_campaign=about-link"><img src="https://avatars3.githubusercontent.com/u/2841780?v=4" width="100px;" alt=""/><br /><sub><b>Anand Chowdhary</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3AAnandChowdhary" title="Bug reports">🐛</a> <a href="https://github.com/elninotech/uppload/commits?author=AnandChowdhary" title="Code">💻</a> <a href="https://github.com/elninotech/uppload/commits?author=AnandChowdhary" title="Documentation">📖</a></td>
<td align="center"><a href="http://thlassche.nl"><img src="https://avatars3.githubusercontent.com/u/2959888?v=4" width="100px;" alt=""/><br /><sub><b>Teun Lassche</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3Athlassche" title="Bug reports">🐛</a> <a href="https://github.com/elninotech/uppload/commits?author=thlassche" title="Code">💻</a> <a href="#security-thlassche" title="Security">🛡️</a></td>
<td align="center"><a href="https://victorlap.nl"><img src="https://avatars0.githubusercontent.com/u/1645632?v=4" width="100px;" alt=""/><br /><sub><b>Victor</b></sub></a><br /><a href="https://github.com/elninotech/uppload/commits?author=victorlap" title="Code">💻</a> <a href="#translation-victorlap" title="Translation">🌍</a> <a href="https://github.com/elninotech/uppload/commits?author=victorlap" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/Rick053"><img src="https://avatars1.githubusercontent.com/u/4579963?v=4" width="100px;" alt=""/><br /><sub><b>Rick van Gemert</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3ARick053" title="Bug reports">🐛</a> <a href="https://github.com/elninotech/uppload/commits?author=Rick053" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/tomtenvoorde"><img src="https://avatars0.githubusercontent.com/u/38886034?v=4" width="100px;" alt=""/><br /><sub><b>tomtenvoorde</b></sub></a><br /><a href="#design-tomtenvoorde" title="Design">🎨</a></td>
<td align="center"><a href="https://pegler.io/"><img src="https://avatars0.githubusercontent.com/u/94491?v=4" width="100px;" alt=""/><br /><sub><b>Matt</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3Apegler" title="Bug reports">🐛</a> <a href="https://github.com/elninotech/uppload/commits?author=pegler" title="Code">💻</a></td>
|
<td align="center"><a href="http://foxego.com"><img src="https://avatars2.githubusercontent.com/u/87010?v=4" width="100px;" alt=""/><br /><sub><b>Rob</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3Arobisaks" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://mihir.ch"><img src="https://avatars1.githubusercontent.com/u/31861755?v=4" width="100px;" alt=""/><br /><sub><b>Mihir Chaturvedi</b></sub></a><br /><a href="https://github.com/elninotech/uppload/commits?author=plibither8" title="Documentation">📖</a></td>
<td align="center"><a href="https://marrec.io"><img src="https://avatars2.githubusercontent.com/u/25272043?v=4" width="100px;" alt=""/><br /><sub><b>Kevin Marrec</b></sub></a><br /><a href="https://github.com/elninotech/uppload/commits?author=kevinmarrec" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/jkniest"><img src="https://avatars0.githubusercontent.com/u/15618191?v=4" width="100px;" alt=""/><br /><sub><b>Jordan Kniest</b></sub></a><br /><a href="#translation-jkniest" title="Translation">🌍</a></td>
<td align="center"><a href="https://github.com/beeman"><img src="https://avatars3.githubusercontent.com/u/36491?v=4" width="100px;" alt=""/><br /><sub><b>Bram Borggreve</b></sub></a><br /><a href="https://github.com/elninotech/uppload/commits?author=beeman" title="Code">💻</a> <a href="#platform-beeman" title="Packaging/porting to new platform">📦</a></td>
<td align="center"><a href="http://AlexImbrea.com"><img src="https://avatars2.githubusercontent.com/u/4534299?v=4" width="100px;" alt=""/><br /><sub><b>Alex Imbrea</b></sub></a><br /><a href="https://github.com/elninotech/uppload/commits?author=AlexImb" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/dingsbams"><img src="https://avatars2.githubusercontent.com/u/16029597?v=4" width="100px;" alt=""/><br /><sub><b>Achim Krämer</b></sub></a><br /><a href="#translation-dingsbams" title="Translation">🌍</a></td>
|
<td align="center"><a href="https://github.com/nsahukar"><img src="https://avatars3.githubusercontent.com/u/2324769?v=4" width="100px;" alt=""/><br /><sub><b>Nikhil Sahukar</b></sub></a><br /><a href="#design-nsahukar" title="Design">🎨</a></td>
<td align="center"><a href="https://github.com/irohitb"><img src="https://avatars0.githubusercontent.com/u/32276134?v=4" width="100px;" alt=""/><br /><sub><b>Rohit Bhatia</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3Airohitb" title="Bug reports">🐛</a></td>
<td align="center"><a href="http://zeke.io"><img src="https://avatars2.githubusercontent.com/u/962281?v=4" width="100px;" alt=""/><br /><sub><b>Zeke Nierenberg</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3Azekenie" title="Bug reports">🐛</a> <a href="https://github.com/elninotech/uppload/commits?author=zekenie" title="Code">💻</a></td>
<td align="center"><a href="https://brian.teeman.net"><img src="https://avatars3.githubusercontent.com/u/1296369?v=4" width="100px;" alt=""/><br /><sub><b>Brian Teeman</b></sub></a><br /><a href="#translation-brianteeman" title="Translation">🌍</a></td>
<td align="center"><a href="https://jeetiss.github.io/"><img src="https://avatars1.githubusercontent.com/u/6726016?v=4" width="100px;" alt=""/><br /><sub><b>Dmitry Ivakhnenko</b></sub></a><br /><a href="#translation-jeetiss" title="Translation">🌍</a></td>
<td align="center"><a href="https://github.com/orionlu0916"><img src="https://avatars1.githubusercontent.com/u/5774671?v=4" width="100px;" alt=""/><br /><sub><b>Orion Lu</b></sub></a><br /><a href="#translation-orionlu0916" title="Translation">🌍</a></td>
<td align="center"><a href="https://nisar.dev"><img src="https://avatars3.githubusercontent.com/u/46004116?v=4" width="100px;" alt=""/><br /><sub><b>Nisar Hassan Naqvi</b></sub></a><br /><a href="https://github.com/elninotech/uppload/commits?author=nisarhassan12" title="Documentation">📖</a></td>
|
<td align="center"><a href="https://github.com/Zaseth"><img src="https://avatars1.githubusercontent.com/u/24899039?v=4" width="100px;" alt=""/><br /><sub><b>Daan</b></sub></a><br /><a href="#translation-Zaseth" title="Translation">🌍</a></td>
<td align="center"><a href="https://www.sigmatechnology.co.uk"><img src="https://avatars0.githubusercontent.com/u/17182577?v=4" width="100px;" alt=""/><br /><sub><b>SIGMA Technology</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3Asigma-technology" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://github.com/ClaudioEyzaguirre"><img src="https://avatars2.githubusercontent.com/u/13547533?v=4" width="100px;" alt=""/><br /><sub><b>Claudio Eyzaguirre</b></sub></a><br /><a href="#translation-ClaudioEyzaguirre" title="Translation">🌍</a></td>
<td align="center"><a href="https://www.netlify.com"><img src="https://avatars1.githubusercontent.com/u/7892489?v=4" width="100px;" alt=""/><br /><sub><b>Netlify</b></sub></a><br /><a href="#infra-netlify" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
<td align="center"><a href="https://github.com/cristianoap"><img src="https://avatars2.githubusercontent.com/u/4174411?v=4" width="100px;" alt=""/><br /><sub><b>Cristiano AP</b></sub></a><br /><a href="#translation-cristianoap" title="Translation">🌍</a></td>
<td align="center"><a href="https://github.com/RichardJohnn"><img src="https://avatars0.githubusercontent.com/u/1699095?v=4" width="100px;" alt=""/><br /><sub><b>Richard</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3ARichardJohnn" title="Bug reports">🐛</a></td>
|
This project follows the
all-contributors specification. Contributions of any kind welcome!
📄 License
