Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add callbacks to Upload itemRender function #27179

Open
1 task done
BenoitHiller opened this issue Oct 15, 2020 · 0 comments
Open
1 task done

Add callbacks to Upload itemRender function #27179

BenoitHiller opened this issue Oct 15, 2020 · 0 comments
Labels

Comments

@BenoitHiller
Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Our use case for this is to offer a file uploader with a "replace" button that does remove add at once(we have restricted the file uploader to only a single file for this use case).

In addition we are looking to combine this and the download and remove buttons into a dropdown menu with the full names of each operation written out. This also has problems from the same source.

It is not currently possible to use the Upload itemRender prop for this if you need to be able to manipulate the fileList after adding files to it.

There are workarounds such as:

  1. Extracting the handlers by inspecting the props of the returned item
  2. Replicate the fileList manipulation logic.

Both of these are comparable work to just building a file list from scratch.

What does the proposed API look like?

The solution is to expose the bound file actions to the renderer. The following is the proposed type changes:

interface UploadFileActions {
  download(): void
  preview(): void
  remove(): void
}

interface UploadProps<T = any> {
  // ...
  itemRender?: (
    originNode: React.ReactElement,
    file: UploadFile,
    fileList?: Array<UploadFile<T>>,
    actions: UploadFileActions
  ) => React.ReactNode;
  // ...
}

Note: this API isn't the easiest to work with given the 4 arguments, however there aren't that many options that don't violate the contract of the existing API. Some alternatives that would also work:

  • Put the methods on the file objects in the code that calls itemRender (this is pretty expensive and may cause issues for existing implementations that rely on the object identity being stable)
  • Allow you to pass in a Component instead of a render function and use different logic in that case.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants