Rethink `editFile` for `FilesList` and `FilesGrid`

[Murderlon]

Initial checklist

• I understand this is a feature request and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

FilesList and FilesGrid accept an editFile ((file: UppyFile) => {}) prop which renders a "edit" button inside the row for people to implement the editing they want.

<FilesList editFile={openImageEditorModal} />

But what if you only want to support editing of certain file types? You can't conditionally set this prop because file is not in scope to determine if you want to show it or not. You can do this:

function openImageEditorModal(file: UppyFile<any, any>) {
  if (!file.type.startsWith('image/')) return
  // ...
}

But then the "edit" button is always rendered, even if it does nothing.

Solution

drop editFile in favor of actions, which would work something like this:

type Actions = Array<(file: UppyFile) => string | null>

function openImageEditorModal(file: UppyFile<any, any>): string | null {
  if (!file.type.startsWith('image/')) return null  // do not render button
  // ...
  return 'edit' // render this label 
}

<FilesList actions={[openImageEditorModal]} />

Alternatives

Open to suggestions