README.md
[](https://uppload.js.org)
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 | [](https://github.com/elninotech/uppload/actions) [](https://travis-ci.org/elninotech/uppload) [](https://dev.azure.com/anandchowdhary0001/Uppload/_build/latest?definitionId=11&branchName=master) |
| Dependencies | [](https://david-dm.org/elninotech/uppload) [](https://david-dm.org/elninotech/uppload)  [](https://app.fossa.com/projects/git%2Bgithub.com%2Felninotech%2Fuppload?ref=badge_shield) |
| Documentation | [](https://app.netlify.com/sites/uppload/deploys) [](https://uppload.js.org) [](https://stats.uptimerobot.com/m29YvtjqOg) [](https://uppload.js.org/typedoc) [](https://uppload.js.org) |
| Community | [](https://github.com/elninotech/uppload/graphs/contributors) [](https://codeclimate.com/github/elninotech/uppload) [](https://www.codacy.com/manual/AnandChowdhary/uppload) [](https://www.producthunt.com/posts/uppload-v2) |
| Package | [](https://www.npmjs.com/package/uppload) [](https://www.npmjs.com/package/uppload) [](https://github.com/elninotech/uppload/blob/master/LICENSE) [](https://github.com/elninotech/uppload/tree/master/src/i18n) [](https://github.com/semantic-release/semantic-release) |
**[View Uppload demo and docs →](https://uppload.js.org)**
## ⭐ Features
- [Drag and drop file or click photo using camera](https://uppload.js.org/services)
- [Search for pictures and import (Unsplash, Pexels, Pixabay)](https://uppload.js.org/services/search-for-images)
- [Import image from web services (URL, Instagram, Facebook, etc.)](https://uppload.js.org/services/import-from-web-service)
- [Edit photo before uploading (filters, crop, rotate, etc.)](https://uppload.js.org/effects)
- [All file uploading backends supported](https://uppload.js.org/uploaders)
- [Supports frontend frameworks like Vue.js, React](https://uppload.js.org/wrappers)
- [Works with all modern browsers (IE 10+)](https://uppload.js.org/browser-support)
<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:
```bash
npm install uppload
```
Then, add styles, import Uppload and an uploader along with your language of choice and initialize the class:
```ts
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](https://uppload.js.org/services) (ways to select a file), [effects](https://uppload.js.org/effects/) (ways to manipulate a file), and [uploaders](https://uppload.js.org/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:
```ts
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](https://uppload.js.org/getting-started)
- [Browser support](https://uppload.js.org/browser-support) (IE 10+)
- [Configuration](https://uppload.js.org/configuration)
- [Examples](https://uppload.js.org/examples)
- [A-la-carte (treeshaking) plugins](https://uppload.js.org/treeshaking)
- [Uppload API](https://uppload.js.org/api)
- [Listening to events](https://uppload.js.org/listening-to-events)
- [Services](https://uppload.js.org/services) (20+ ways to select a file)
- [Effects](https://uppload.js.org/effects) (10+ ways to edit a file)
- [Uploaders](https://uppload.js.org/uploaders) (ways to send a file to the server)
- [Themes](https://uppload.js.org/themes)
- [Backends](https://uppload.js.org/backends)
- [Frontend frameworks](https://uppload.js.org/wrappers)
- [Blog](https://uppload.js.org/blog)
- [Image compression](https://uppload.js.org/compression)
- [Internationalization](https://uppload.js.org/i18n)
- [Using in browsers directly](https://uppload.js.org/browser-usage)
- [Accessibility](https://uppload.js.org/a11y)
- [Compare Uppload](https://uppload.js.org/compare)
- [FAQs](https://uppload.js.org/faq)
**[View Uppload docs →](https://uppload.js.org)**
## ℹ️ Support
If you need help with using Uppload, check out the [Getting started](https://uppload.js.org/getting-started) guide and the documentation. If you found a bug or have a feature request, [open an issue](https://github.com/elninotech/uppload/issues). If you want to contribute to Uppload, read our [Contributing](https://github.com/elninotech/uppload/blob/master/CONTRIBUTING.md) guide.
Your organization can also request a custom build or get professional support. [Request a quote for free →](https://www.elnino.tech/samenwerken)
## 👥 Contributors
Uppload is built by [El Niño](https://www.elnino.tech), 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](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://www.elnino.tech"><img src="https://avatars0.githubusercontent.com/u/2854021?v=4?s=100" width="100px;" alt="El Niño"/><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" valign="top" width="14.28%"><a href="https://anandchowdhary.com/?utm_source=github&utm_campaign=about-link"><img src="https://avatars3.githubusercontent.com/u/2841780?v=4?s=100" width="100px;" alt="Anand Chowdhary"/><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" valign="top" width="14.28%"><a href="http://thlassche.nl"><img src="https://avatars3.githubusercontent.com/u/2959888?v=4?s=100" width="100px;" alt="Teun Lassche"/><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" valign="top" width="14.28%"><a href="https://victorlap.nl"><img src="https://avatars0.githubusercontent.com/u/1645632?v=4?s=100" width="100px;" alt="Victor"/><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" valign="top" width="14.28%"><a href="https://github.com/Rick053"><img src="https://avatars1.githubusercontent.com/u/4579963?v=4?s=100" width="100px;" alt="Rick van Gemert"/><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" valign="top" width="14.28%"><a href="https://github.com/tomtenvoorde"><img src="https://avatars0.githubusercontent.com/u/38886034?v=4?s=100" width="100px;" alt="tomtenvoorde"/><br /><sub><b>tomtenvoorde</b></sub></a><br /><a href="#design-tomtenvoorde" title="Design">🎨</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://pegler.io/"><img src="https://avatars0.githubusercontent.com/u/94491?v=4?s=100" width="100px;" alt="Matt"/><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>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="http://foxego.com"><img src="https://avatars2.githubusercontent.com/u/87010?v=4?s=100" width="100px;" alt="Rob"/><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" valign="top" width="14.28%"><a href="https://mihir.ch"><img src="https://avatars1.githubusercontent.com/u/31861755?v=4?s=100" width="100px;" alt="Mihir Chaturvedi"/><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" valign="top" width="14.28%"><a href="https://marrec.io"><img src="https://avatars2.githubusercontent.com/u/25272043?v=4?s=100" width="100px;" alt="Kevin Marrec"/><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" valign="top" width="14.28%"><a href="https://github.com/jkniest"><img src="https://avatars0.githubusercontent.com/u/15618191?v=4?s=100" width="100px;" alt="Jordan Kniest"/><br /><sub><b>Jordan Kniest</b></sub></a><br /><a href="#translation-jkniest" title="Translation">🌍</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/beeman"><img src="https://avatars3.githubusercontent.com/u/36491?v=4?s=100" width="100px;" alt="Bram Borggreve"/><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" valign="top" width="14.28%"><a href="http://AlexImbrea.com"><img src="https://avatars2.githubusercontent.com/u/4534299?v=4?s=100" width="100px;" alt="Alex Imbrea"/><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" valign="top" width="14.28%"><a href="https://github.com/dingsbams"><img src="https://avatars2.githubusercontent.com/u/16029597?v=4?s=100" width="100px;" alt="Achim Krämer"/><br /><sub><b>Achim Krämer</b></sub></a><br /><a href="#translation-dingsbams" title="Translation">🌍</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/nsahukar"><img src="https://avatars3.githubusercontent.com/u/2324769?v=4?s=100" width="100px;" alt="Nikhil Sahukar"/><br /><sub><b>Nikhil Sahukar</b></sub></a><br /><a href="#design-nsahukar" title="Design">🎨</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/irohitb"><img src="https://avatars0.githubusercontent.com/u/32276134?v=4?s=100" width="100px;" alt="Rohit Bhatia"/><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" valign="top" width="14.28%"><a href="http://zeke.io"><img src="https://avatars2.githubusercontent.com/u/962281?v=4?s=100" width="100px;" alt="Zeke Nierenberg"/><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" valign="top" width="14.28%"><a href="https://brian.teeman.net"><img src="https://avatars3.githubusercontent.com/u/1296369?v=4?s=100" width="100px;" alt="Brian Teeman"/><br /><sub><b>Brian Teeman</b></sub></a><br /><a href="#translation-brianteeman" title="Translation">🌍</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://jeetiss.github.io/"><img src="https://avatars1.githubusercontent.com/u/6726016?v=4?s=100" width="100px;" alt="Dmitry Ivakhnenko"/><br /><sub><b>Dmitry Ivakhnenko</b></sub></a><br /><a href="#translation-jeetiss" title="Translation">🌍</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/orionlu0916"><img src="https://avatars1.githubusercontent.com/u/5774671?v=4?s=100" width="100px;" alt="Orion Lu"/><br /><sub><b>Orion Lu</b></sub></a><br /><a href="#translation-orionlu0916" title="Translation">🌍</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://nisar.dev"><img src="https://avatars3.githubusercontent.com/u/46004116?v=4?s=100" width="100px;" alt="Nisar Hassan Naqvi"/><br /><sub><b>Nisar Hassan Naqvi</b></sub></a><br /><a href="https://github.com/elninotech/uppload/commits?author=nisarhassan12" title="Documentation">📖</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Zaseth"><img src="https://avatars1.githubusercontent.com/u/24899039?v=4?s=100" width="100px;" alt="Daan"/><br /><sub><b>Daan</b></sub></a><br /><a href="#translation-Zaseth" title="Translation">🌍</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://www.sigmatechnology.co.uk"><img src="https://avatars0.githubusercontent.com/u/17182577?v=4?s=100" width="100px;" alt="SIGMA Technology"/><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" valign="top" width="14.28%"><a href="https://github.com/ClaudioEyzaguirre"><img src="https://avatars2.githubusercontent.com/u/13547533?v=4?s=100" width="100px;" alt="Claudio Eyzaguirre"/><br /><sub><b>Claudio Eyzaguirre</b></sub></a><br /><a href="#translation-ClaudioEyzaguirre" title="Translation">🌍</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://www.netlify.com"><img src="https://avatars1.githubusercontent.com/u/7892489?v=4?s=100" width="100px;" alt="Netlify"/><br /><sub><b>Netlify</b></sub></a><br /><a href="#infra-netlify" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/cristianoap"><img src="https://avatars2.githubusercontent.com/u/4174411?v=4?s=100" width="100px;" alt="Cristiano AP"/><br /><sub><b>Cristiano AP</b></sub></a><br /><a href="#translation-cristianoap" title="Translation">🌍</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/RichardJohnn"><img src="https://avatars0.githubusercontent.com/u/1699095?v=4?s=100" width="100px;" alt="Richard"/><br /><sub><b>Richard</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3ARichardJohnn" title="Bug reports">🐛</a> <a href="https://github.com/elninotech/uppload/commits?author=RichardJohnn" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/MaximusBaton"><img src="https://avatars1.githubusercontent.com/u/10597367?v=4?s=100" width="100px;" alt="MaximusBaton"/><br /><sub><b>MaximusBaton</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3AMaximusBaton" title="Bug reports">🐛</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://www.quinn.mx/"><img src="https://avatars3.githubusercontent.com/u/962930?v=4?s=100" width="100px;" alt="Quinn (they/them)"/><br /><sub><b>Quinn (they/them)</b></sub></a><br /><a href="https://github.com/elninotech/uppload/issues?q=author%3Apedantic-git" title="Bug reports">🐛</a></td>
</tr>
</tbody>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## 📄 License
- Code: [MIT](https://github.com/elninotech/uppload/blob/master/LICENSE)
- Logo and assets: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
- Image filter icons: [CC BY 3.0](https://thenounproject.com/nikhilsahukar/collection/image/)