How to manually trigger imageEditor on file add

Uppy
1

I’m trying to initialize imageEditor when the file is added. Below is the code that I tried but not getting the desired result. Any helps would be appreciated.

uppy.on('file-added', (file) => {
        // uppy.emit("file-editor:start", (file) => {
        // });
        // uppy.getPlugin('Dashboard').openFileEditor(file)
        // uppy.openFileEditor(file)
        console.log('Added file', file)
})
2

From what I can tell, the file editor emits the event itself, and isn’t listening for it:

I have to look a little more into what you’d need to do in order to open it yourself

- Andrew

3

Solved this by triggering two methods after adding file:
.on(‘file-added’, (file) => {
this.uppy.getPlugin(‘Dashboard’).toggleFileCard(file.id);
this.uppy.getPlugin(‘Dashboard’).openFileEditor(file);
})

4

Hmm, seems like this should work, but for react:Dashboard it doesn’t.
I’ve had to change this.uppy.getPlugin('Dashboard') to uppy.getPlugin('react:Dashboard') which allows me to access toggleFileCard and openFileEditor (the latter appears to take two parameters now, a boolean and the file).

Still doesn’t proceed to load the editor though.

5

That seems abnormal. Using it with React should look something like this:

.on('file-added', file => {
  const dashboard = this.uppy.getPlugin('react:Dashboard')
  dashboard.toggleFileCard(true, file.id)
  dashboard.openFileEditor(file)
})

Is there any error, or is it just not showing the editor?

6

It’s not showing the editor

7

Try this

    uppy.on('file-added', (file) => {
      console.log('Added file', file)
      uppy.getPlugin('Dashboard').toggleFileCard(true, file.id)
      uppy.getPlugin('react:Dashboard').openFileEditor(file)
    })