Uppy

The file uploader that
loves to play fetch

  • won’t chew on your shoes
  • is fully housebroken
  • just wants to play with you
  • doesn’t hump your leg
  • also accepts cat pictures
  • loves you unconditionally
  • you don’t have to keep on a leash
  • won’t pee on your rug
  • loves to play fetch
  • doesn’t bite (hard)
  • won’t bark at the mailman
  • is great with the kids
  • can digest anything, even chocolate cake
  • is always happy to see you
  • isn’t afraid of fireworks
  • is allowed everywhere

Work in progress

Uppy is (going to be) a JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations. It has a plugin-based architecture, first-class support for resumable uploads according to the open standard: tus, and custom encoding backends, making it extensible and robust. Uppy is in the early stages of development and should not be used for anything serious yet.

Open Source

Uppy is brought to you by the people behind Transloadit and as such will have first class support for adding their uploading and encoding backend, but this is opt-in, and you can just as easily roll your own.

Demo

$ npm install uppy --save
api-usage-example.ejsview raw
import Uppy from 'uppy/lib/core'
import Dashboard from 'uppy/lib/plugins/Dashboard'
import Tus10 from 'uppy/lib/plugins/Tus10'
import Informer from 'uppy/lib/plugins/Informer'
import MetaData from 'uppy/lib/plugins/MetaData'
 
const uppy = Uppy({autoProceed: false})
.use(Dashboard, {trigger: '#select-files'})
.use(Informer, {target: Dashboard})
.use(Tus10, {endpoint: '://master.tus.io/files/'})
.use(MetaData, {
fields: [
{ id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },
{ id: 'description', name: 'Description', value: 'none', placeholder: 'describe what the file is for' }
]
})
.run()
 
uppy.on('core:success', (fileCount) => {
console.log(`Upload complete. We uploaded ${fileCount} files!`)
})
Get Started

Design Goals:

  • Lightweight / easy on dependencies
  • ES6, with transpiled ES5 versions available
  • Usable as a bundle straight from a CDN, as well as a module to import
  • Resumable file uploads via the open tus standard
  • Robust: retries for all-the-things, avoid showing ‘weird errors’
  • Themable UI with a beautiful default
  • i18n support: Easily switch languages or supply your own copy
  • Compatible with React (Native)
  • Works great on mobile
  • Small core, modular architecture. Everything is a plugin
  • Works great with Transloadit. Works great without
  • Offering sugared shortcuts for novice users (presets)

Activity Feed

Loading...