Uploading files with HTML form via “Uppy”

[emresaracoglu]

Uppy, a great javascript file upload library but I was unable to upload images with HTML form.

Javascript Code:

 var uppy = Uppy.Core();
 uppy.use(Form, {
   target: '#upload',
   getMetaFromForm: true,
   addResultToForm: true,
   resultName: 'uppyResult',
   triggerUploadOnSubmit: false,
   submitOnSuccess: false
 });

HTML Code:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="text" class="form-control" id="exampleInputEmail1">
  </div>
  <div class="form-group">
    <label>Images Upload</label>
    <div class="upload">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

on JSFiddle demo

The upload area does not appear. What could be the reason?

Question on the Stackoverflow

[kvz]

I’d have to double check the docs but isn’t target on the form plugin supposed to be the css selector of the form? You point it to #upload now but the form does not have id=upload? What am I missing?

[emresaracoglu]

Yes you are right. I've done a little typo, I've fixed it, but it still upload area does not appear.
cc @kvz

[emresaracoglu]

Any help? :)

[goto-bus-stop]

Sorry for the wait! The problem is that the Form plugin only handles metadata, it doesn't actually let you do any uploads on its own.

The Form's target should be set to the form element:

uppy.use(Form, {
  target: 'form'
})

Then you can add a source plugin like @uppy/file-input to show an input element:

uppy.use(FileInput, {
  target: '#upload'
})

You'll also need an uploader plugin like XHRUpload to actually send the files somewhere once they've been selected.

uppy.use(XHRUpload, {
  endpoint: '/url/to/upload/to'
})

There is some boilerplate involved with Uppy, because everything is configurable :)

[arturi]

Please let us know if you need more help with this!