Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/elninotech/uppload

📁 JavaScript image uploader and editor, no backend required
https://github.com/elninotech/uppload

file-upload image javascript plugin uploader widget

Last synced: 22 days ago
JSON representation

📁 JavaScript image uploader and editor, no backend required

Host: GitHub
URL: https://github.com/elninotech/uppload
Owner: elninotech
License: mit
Created: 2018-04-19T14:23:20.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-01-18T04:24:07.000Z (10 months ago)
Last Synced: 2024-10-09T22:33:13.925Z (26 days ago)
Topics: file-upload, image, javascript, plugin, uploader, widget
Language: TypeScript
Homepage: https://uppload.js.org
Size: 43.2 MB
Stars: 1,835
Watchers: 34
Forks: 129
Open Issues: 48
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome - elninotech/uppload - 📁 JavaScript image uploader and editor, no backend required (TypeScript)
my-awesome-list - uppload
awesome-repositories - elninotech/uppload
awesome-github-star - uppload
awesome-starred - elninotech/uppload - 📁 JavaScript image uploader and editor, no backend required (javascript)

README

        [![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) [![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)**

## ℹ️ 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
🐛 💻

      
_MaximusBaton
🐛

    

    

      
_{Quinn (they/them)}
🐛

    

  

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