[![Uppload](https://raw.githubusercontent.com/elninotech/uppload/master/assets/icon-ph.svg?sanitize=true)](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 ☁️✨” > — Product Hunt | | Status | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Build | [![GitHub Actions](https://github.com/elninotech/uppload/workflows/Node%20CI/badge.svg)](https://github.com/elninotech/uppload/actions) [![Travis CI](https://img.shields.io/travis/elninotech/uppload?label=Travis%20CI)](https://travis-ci.org/elninotech/uppload) [![Circle CI](https://img.shields.io/circleci/build/github/elninotech/uppload?label=Circle%20CI)](https://circleci.com/gh/elninotech/uppload) [![Azure Pipelines](https://dev.azure.com/anandchowdhary0001/Uppload/_apis/build/status/elninotech.uppload?branchName=master)](https://dev.azure.com/anandchowdhary0001/Uppload/_build/latest?definitionId=11&branchName=master) | | Dependencies | [![Dependencies](https://img.shields.io/david/elninotech/uppload.svg)](https://david-dm.org/elninotech/uppload) [![Dev dependencies](https://img.shields.io/david/dev/elninotech/uppload.svg)](https://david-dm.org/elninotech/uppload) ![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/elninotech/uppload.svg) [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Felninotech%2Fuppload.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Felninotech%2Fuppload?ref=badge_shield) | | Documentation | [![Netlify](https://img.shields.io/netlify/5e92d02d-b96b-4b42-8197-804f72a147cf)](https://app.netlify.com/sites/uppload/deploys) [![Website status](https://img.shields.io/website?down_color=red&down_message=down&up_color=brightgreen&up_message=online&url=https%3A%2F%2Fuppload.js.org)](https://uppload.js.org) [![Uptime](https://img.shields.io/uptimerobot/ratio/7/m783785688-048a2237d8844210960a6a76)](https://stats.uptimerobot.com/m29YvtjqOg) [![Type definitions](https://img.shields.io/badge/types-TypeScript-blue.svg)](https://uppload.js.org/typedoc) [![Articles](https://img.shields.io/endpoint?url=https%3A%2F%2Fuppload.js.org%2Fshield-schema%2Fall.json)](https://uppload.js.org) | | Community | [![Contributors](https://img.shields.io/github/contributors/elninotech/uppload.svg)](https://github.com/elninotech/uppload/graphs/contributors) [![Code maintainability](https://img.shields.io/codeclimate/maintainability/elninotech/uppload)](https://codeclimate.com/github/elninotech/uppload) [![Codacy grade](https://img.shields.io/codacy/grade/403c8644e13e47df878156f3658220ce)](https://www.codacy.com/manual/AnandChowdhary/uppload) [![Product Hunt #1 of the day](https://img.shields.io/badge/product%20hunt-%231%20day%2C%20%234%20week-orange)](https://www.producthunt.com/posts/uppload-v2) | | Package | [![npm package version](https://img.shields.io/npm/v/uppload)](https://www.npmjs.com/package/uppload) [![npm downloads](https://img.shields.io/npm/dm/uppload)](https://www.npmjs.com/package/uppload) [![GitHub](https://img.shields.io/github/license/elninotech/uppload.svg)](https://github.com/elninotech/uppload/blob/master/LICENSE) [![Languages](https://img.shields.io/endpoint?url=https%3A%2F%2Fservices.anandchowdhary.now.sh%2Fapi%2Fgithub-files%3Frepo%3Delninotech%2Fuppload%26path%3Dsrc%2Fi18n%26subtract%3D1%26label%3Di18n%26message%3D%25241%2524%2520language%2524S%2524%26color%3Dblueviolet)](https://github.com/elninotech/uppload/tree/master/src/i18n) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](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)

## 🛠 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)** ### Uppload 1.x Uppload v2 is rewritten from the group up in TypeScript. You can [view the README of Uppload 1.x](https://github.com/elninotech/uppload/tree/1fe2caf2d0a0d4e34a10bef1b4870a823277ce21), the deprecated version, or the [migration guide](https://uppload.js.org/migrating-from-1x). ## ℹ️ 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)):

_{El Niño} 💼 💵 🚇 📆	_{Anand Chowdhary} 🐛 💻 📖	_{Teun Lassche} 🐛 💻 🛡️	_Victor 💻 🌍 📖	_{Rick van Gemert} 🐛 💻	_tomtenvoorde 🎨	_Matt 🐛 💻
_Rob 🐛	_{Mihir Chaturvedi} 📖	_{Kevin Marrec} 📖	_{Jordan Kniest} 🌍	_{Bram Borggreve} 💻 📦	_{Alex Imbrea} 📖	_{Achim Krämer} 🌍
_{Nikhil Sahukar} 🎨	_{Rohit Bhatia} 🐛	_{Zeke Nierenberg} 🐛 💻	_{Brian Teeman} 🌍	_{Dmitry Ivakhnenko} 🌍	_{Orion Lu} 🌍	_{Nisar Hassan Naqvi} 📖
_Daan 🌍	_{SIGMA Technology} 🐛	_{Claudio Eyzaguirre} 🌍	_Netlify 🚇	_{Cristiano AP} 🌍	_Richard 🐛

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/)

@flowjs/ngx-flow vs angular-material-fileupload vs ngx-uploadx vs uppload

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past