XHRUpload (Multipart) Example

Uppy recommends using tus resumable file uploads, but if you want you can also use XHRUpload (Multipart Form) uploads

Simple form with a file input, mounted to a fallback <form> container — works even without JavaScript or when something goes wrong (slow connection, JS errors, old browsers):

Uppy was not loaded — slow connection, unsupported browser, werid JS error on a page — but upload still works, because HTML is cool like that

Console output (latest logs are at the top):

On this page we're using the following HTML snippet:

app.htmlview raw
<!-- Basic Uppy styles -->
<link rel="stylesheet" href="/uppy/uppy.min.css">
<div class="UppyForm">
<form action="//api2.transloadit.com">
<h5>Uppy was not loaded — slow connection, unsupported browser, werid JS error on a page — but upload still works, because HTML is cool like that</h5>
<input type="file" name="files[]" multiple="">
<button type="submit">Dumb Fallback Form Upload</button>
</form>
</div>

Along with this JavaScript:

app.es6view raw
const Uppy = require('uppy/lib/core/Core')
const FileInput = require('uppy/lib/plugins/FileInput')
const XHRUpload = require('uppy/lib/plugins/XHRUpload')
const ProgressBar = require('uppy/lib/plugins/ProgressBar')
const uppy = new Uppy({debug: true, autoProceed: true})
uppy
.use(FileInput)
.use(XHRUpload, {
endpoint: '//api2.transloadit.com',
formData: true,
fieldName: 'files[]'
})
// by default Uppy removes everything inside target container,
// but we surely don’t want to do that in the case of body, so replaceTargetContent: false
.use(ProgressBar, {
target: 'body',
replaceTargetContent: false,
fixed: true
})
.run()
console.log('Uppy with Formtag and XHRUpload is loaded')

Please see documentation for details.

Hey there stranger! Uppy is in the early stages of development and the example section is our playground. Things might not yet work, but we're working hard to improve this.

We're on a monthly release cycle and our latest version is v0.19.0, but the example pages reflect the latest work in our master branch. Here's what changed in master since v0.19.0 in terms of commits, while the CHANGELOG provides a higher level view of this things planned for our next release.

Files from the examples are uploaded to our test servers and deleted daily.