# uppload-beta
> Uppload is a JavaScript widget for better file uploading on the web.
Latest version **2.0.0-beta.4** (published 2019-11-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install uppload-beta
pnpm add uppload-beta
yarn add uppload-beta
bun add uppload-beta
```
## Health
**Score 40/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 2.0.0-beta.4 |
| Published | 2019-11-21 |
| First published | 2019-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1879 |
| Author | El Niño |
| Maintainers | anandchowdhary |
| Keywords | uppload, typescript, css, scss, el nino, file upload, image upload, crop, uploader, upload, javascript |
## Links
- npm: https://www.npmjs.com/package/uppload-beta
- Repository: https://github.com/elninotech/uppload
- Homepage: https://github.com/elninotech/uppload#readme
- Issues: https://github.com/elninotech/uppload/issues
- npm.io page: https://npm.io/package/uppload-beta
## Dependencies (4)
- [mitt](https://npm.io/package/mitt.md) ^1.2.0
- [cropperjs](https://npm.io/package/cropperjs.md) ^1.5.6
- [show-hide](https://npm.io/package/show-hide.md) ^0.9.0
- [jslib-html5-camera-photo](https://npm.io/package/jslib-html5-camera-photo.md) ^3.1.3
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 2.0.0-beta.4 (latest) — 2019-11-21
- 2.0.0-beta.3 — 2019-11-20
- 2.0.0-beta.2 — 2019-11-16
- 2.0.0-beta.1 — 2019-11-16
## README
# 🖼️ 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](https://github.com/elninotech/uppload/tree/master), 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 | [](https://travis-ci.org/elninotech/uppload) [](https://circleci.com/gh/elninotech/uppload) [](https://dev.azure.com/anandchowdhary0001/Uppload/_build/latest?definitionId=11&branchName=typescript) |
| Dependencies | [](https://david-dm.org/elninotech/uppload) [](https://david-dm.org/elninotech/uppload)  |
| Documentation | [](https://app.netlify.com/sites/uppload/deploys) [](https://uppload.netlify.com) [](https://stats.uptimerobot.com/m29YvtjqOg) [](https://uppload.netlify.com) |
| Community | [](https://github.com/elninotech/uppload/graphs/contributors) [](https://github.com/elninotech/uppload/blob/master/LICENSE)  [](https://www.npmjs.com/package/uppload) |
**[View Uppload 2 docs →](https://uppload.netlify.com)**
**[View live demo →](https://uppload.netlify.com/demo.html)**
## ⭐ 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:
```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 (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:
```ts
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](https://uppload.netlify.com/getting-started)
- [Configuration](https://uppload.netlify.com/configuration)
- [Examples](https://uppload.netlify.com/examples)
- [Building a custom package](https://uppload.netlify.com/custom-package)
- [API](https://uppload.netlify.com/api)
- [Listening to events](https://uppload.netlify.com/listening-to-events)
- [Multiple Uppload instances](https://uppload.netlify.com/multiple-instances)
- [Migrating from Uppload 1.x](https://uppload.netlify.com/migrating-from-1x)
- [Services](https://uppload.netlify.com/services) (20+ ways to select a file)
- [Effects](https://uppload.netlify.com/effects) (10+ ways to edit a file)
- [Uploaders](https://uppload.netlify.com/uploaders) (ways to send a file to the server)
- [Themes](https://uppload.netlify.com/themes)
- [Wrappers](https://uppload.netlify.com/wrappers)
- [Backends](https://uppload.netlify.com/backends)
- [Internationalization](https://uppload.netlify.com/i18n)
**[View Uppload 2 docs →](https://uppload.netlify.com)**
## 🛣️ 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](https://allcontributors.org/docs/en/emoji-key)):
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/)
---
_Source: https://npm.io/package/uppload-beta · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
