API

Work in progress, API not stable. Last update: 2016-10-21

The Gist

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 MetaData from 'uppy/lib/plugins/MetaData'
 
const uppy = Uppy({autoProceed: false})
.use(Dashboard, {trigger: '#select-files', target: '#upload-form', replaceTargetContent: true})
.use(Tus10, {endpoint: '://master.tus.io/files/'})
uppy.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' }
]
})
uppy.run()
 
uppy.on('core:success', (files) => {
console.log(`Upload complete! We’ve uploaded these files: ${files}`)
})

Methods

uppy.use(plugin)

uppy.use(DragDrop)

uppy.run()

Initializes everything after setup.

uppy.on(‘event’, action)

Subscribe to an event.

Events

Uppy exposes events that you can subscribe to in your app:

core:upload-progress

Fired each time file upload progress is available, data object looks like this:

data = {
id: myimg12321323,
bytesUploaded: 2323254,
bytesTotal
}
uppy.on('core:upload-progress', (data) => {
console.log(data.id, data.bytesUploaded, data.bytesTotal)
})

core:upload-success

Fired when single upload is complete.

uppy.on('core:upload-success', (fileId, url) => {
console.log(url)
var img = new Image()
img.width = 300
img.alt = fileId
img.src = url
document.body.appendChild(img)
})

core:success

Fired when all uploads are complete.

uppy.on('core:success', (fileCount) => {
console.log(fileCount)
})