autoOpenFileEditor with multiple files

Uppy
1

Hi!
I’ve set up Uppy (v2.3.3) dashboard with the image-editor plugin.

I’m passing autoOpenFileEditor: true and it works fine, but in case of multiple files it opens the editor for the first one only and then goes back to the dashboard view.

Is there a way to have the editor open for all images in sequence and go back to the dashboard only once it’s done?

Thanks!

2

Hi, this is indeed a bit of strange flow for users. We don’t support doing it in sequence unfortunately.

3

Thanks for the reply! I’ll try setting up a solution myself then

4

I’ve put together a quick prototype solution. I’m posting it here so maybe it can be useful to others. I haven’t tested it yet and it’s still a bit rough, so copy/paste with care:


const getNextFile = (canEditFile, files, filePosition) => {
  const newFile = files[filePosition + 1]
  if (!newFile) return null
  if (canEditFile(newFile)) return newFile
  return getNextFile(canEditFile, files, filePosition + 1)
}

uppy.on('files-added', () => {
  hasNewFiles = true // This could be a react component's state for example
}

uppy.on('file-editor:complete', file => {
  if (hasNewFiles) {
    const dashboard = uppy.getPlugin('Dashboard')
    const files = uppy.getFiles()
    const currentFilePosition = files.findIndex(f => f.id == file.id)
    
    const nextFile = getNextFile(dashboard.canEditFile, files, currentFilePosition)
    if (!nextFile) {
      hasNewFiles = false
    } else {
      dashboard.openFileEditor(nextFile)
    }
  }
}
1 Like