Uppy: Dashboard event buttons

[davidsonsns]

Does the dashboard plugin have any option to monitor events?
For example a click on the button "Upload all new files"

I think it's interesting, because not necessarily the project will upload the files, but use them on the front.

[arturi]

Hi! Uppy has a lot of events, we are in the process of documenting them here: https://uppy.io/docs/uppy/#Events, some can be found in Core: https://github.com/transloadit/uppy/blob/master/src/core/Core.js#L430-L578.

Dashboard itself has some internal events too, but we haven’t though about exposing strictly-UI events like a button click as a public API.

not necessarily the project will upload the files, but use them on the front

I think for your case, if I understood the question correctly, you could write your own custom uploading/preprocessing plugin that will do what you want with files, like here https://github.com/transloadit/uppy/blob/master/src/plugins/Transloadit/index.js#L266-L309. And @goto-bus-stop please correct me if I’m wrong.

Would help if you provided a more elaborate example of what you are trying to achieve, and we’ll think if there’s something we could do :)

[davidsonsns]

I'll try to express myself better. In one situation, I needed the information from the files without actually uploading to the server.

I used to select and edit the file name. As a quick measure, I did the following:

Using just the Dashboard plugin, I added the onBeforeUpload event, which returns the files to my component via props and closes the modal.

onBeforeUpload: (files, done) => {
    if (this.props.beforeUpload) {
        this.props.beforeUpload(files)
        this.uppy.plugins.orchestrator[0].hideModal()
    }
    return Promise.resolve()
},

[goto-bus-stop]

this.uppy.plugins.orchestrator[0].hideModal()

There's also a getPlugin function that returns a plugin by its name:

this.uppy.getPlugin('DashboardUI').hideModal()

Using that is a bit safer in case we change how plugins are stored internally :)

The "official" way to do this would be to use a custom uploader plugin. Unfortunately we don't really have docs yet on how to do that! There's some boilerplate involved, but it'd look something like this:

const Plugin = require('uppy/lib/plugins/Plugin')

module.exports = class UploadHandler extends Plugin {
  constructor (core, opts) {
    super(core, opts)
    this.id = 'UploadHandler'
    this.type = 'uploader'

    this.handleUpload = this.handleUpload.bind(this)
  }

  handleUpload (fileIDs) {
    const files = fileIDs.map((fileID) => {
      return this.core.getFile(fileID)
    })
    // Mark these files as having been uploaded.
    files.forEach((file) => {
      this.core.emit('core:upload-success', file.id, null)
    })

    this.opts.onUpload(files)

    return Promise.resolve()
  }

  install () {
    if (!this.opts.onUpload) {
      throw new TypeError('Must provide an `onUpload` option')
    }

    this.core.addUploader(this.handleUpload)
  }
  uninstall () {
    this.core.removeUploader(this.handleUpload)
  }
}

Which would be used like:

this.uppy.use(UploadHandler, {
  onUpload: (files) => {
    if (this.props.beforeUpload) {
      this.props.beforeUpload(files)
      this.uppy.getPlugin('DashboardUI').hideModal()
    }
  }
})

So that's very similar to using onBeforeUpload actually, but this also marks the files as uploaded, which can be useful if you're reusing a single Uppy instance. Maybe we can ship a plugin like this with uppy as a simple way to receive files in a callback.

[davidsonsns]

@goto-bus-stop Thank you very much for your resolution, it was really much more "beautiful". I'm really excited about the project. And I will try to contribute in some way

[goto-bus-stop]

Good to hear! 😊 I'll close this out then since the initial question is answered. Thanks!