[FileUploader]: [Cannot fire OnChange when reselect same file after resetting fileUploaderRef.current.value ]

[kushalkaranjkar]

Describe the bug

We have file uploader which is inside the dialog and has ref pass to it. If you select a file and then use FileUploaderRef to reset the value of FileUploader. And Then Again try to select same file, It won't fire fileUploader OnChange event ? e.g. fileUploaderRef.current.value = "abc.txt" We have 'cancel' button on Dialog, and we are trying to reset value of fileUploader if user hit cancel. which is working as expected. But once cancel, if user reselect same file , onchange event won't fire and we cannot select same file.

Code Example:

const skillsFileName = "abc.docx". <FileUploader ref={fileUploaderRef} data-testid="resumeFileUploader" accept=".doc,.docx,.pdf,.txt,.rtf" onChange={onFileChange} disabled={busy} value={skillsFileName ? "${skillsFileName}" : ""}

BROWSE

Isolated Example

No response

Reproduction steps

1. Create FileUploader using following snippet const skillsFileName = "abc.docx". <FileUploader ref={fileUploaderRef} data-testid="resumeFileUploader" accept=".doc,.docx,.pdf,.txt,.rtf" onChange={onFileChange} disabled={busy} value={skillsFileName ? "${skillsFileName}" : ""}

   BROWSE

2. Upload a file - e.g."abc.txt"
3. Upload another file - "new_abc.txt"
4. reset fileUploader value using - fileUploaderRef.current.value = "abc.txt"
5. Again, try to upload previous file - "new_abc.txt"

Issue == File Uploader onChange event don't get fire ? ...

Expected Behaviour

Even after fileUploaderRef.current.value is reset, previous file to upload should be allowed .

Screenshots or Videos

https://github.com/user-attachments/assets/bca0c536-15c9-47c7-aa05-94a630d940ad

UI5 Web Components for React Version

1.29

UI5 Web Components Version

1.24

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Organization

SAP successfactors

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @kushalkaranjkar

I wasn't able to reproduce this behavior. Please add an isolated example, preferably by leveraging this StackBlitz template.

Additionally, if you're resetting the value using a React ref, meaning directly via the attribute or property of the element, it's happening outside of React's lifecycle. This means React doesn't "know" that the element has changed, which is not recommended if you want to control the value in some other way.

[kushalkaranjkar]

Hi Lukas, We have a usecase where we need to use grandparent component to modify and sync with grandChild. Hence, passing reference is necessary for fileUploader.

Please try this https://stackblitz.com/edit/ui5wcr-v1-xb7jhg?file=src%2FApp.tsx , I made small modification. Steps -

0. FileUploader will show with "abc.txt" (default value) in input.
1. Select any file e.g. "newfile.txt" in the fileuploader. - You will see selected file "newfile.txt" in input of fileUploader
2. Hit Reset
3. Select previous selected file "newfile.txt". - You will not see "newfile.txt" in input of fileUploader.

[Lukas742]

Hi @kushalkaranjkar

Due to security reasons, it's not possible to set a value (a path) on native file inputs (<input type="file">). The only manipulation allowed is clearing the input by setting the value to an empty string. This likely explains the behavior you've described. However, since the FileUploader is developed by the ui5-webcomponents team, I'll forward this issue to their repo so they can clarify what the intended behavior should be.

---

Hi Colleagues,

Here you can find a StackBlitz example of the described issue, without our wrapper or React: https://stackblitz.com/edit/github-1eft2j?file=index.html,main.js,package.json