primefaces / primefaces/primereact
FileUpload: onRemove does not correctly return the removed file if it has already been uploaded.
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
I was using the FileUpload component in advanced mode when I needed to create a custom method to remove files from the database. I noticed that when trying to remove an already uploaded file, it returned undefined for the "file" key.
Analyzing the component, I found that the method responsible for removing an uploaded file mistakenly selects the array of files that are yet to be uploaded.
Reproducer
No response
System Information
System:
OS: Linux 6.8 Linux Mint 22 (Wilma)
CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
Memory: 43.78 GB / 62.58 GB
Container: Yes
Shell: 5.2.21 - /bin/bash
Binaries:
Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.6.0/bin/yarn
npm: 10.8.2 - ~/.nvm/versions/node/v22.6.0/bin/npm
pnpm: 9.7.1 - ~/.local/share/pnpm/pnpm
Browsers:
Brave Browser: 133.1.75.180
Chrome: 133.0.6943.126
npmPackages:
primereact: ^10.9.2 => 10.9.2
react: ^19.0.0 => 19.0.0
tailwindcss: ^4.0.12 => 4.0.12
Steps to reproduce the behavior
- Add the element file upload in advanced mode
<FileUpload
name="files"
url={`http://localhost:8000/upload`}
accept="application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
mode="advanced"
multiple
onRemove={event => console.log(event)}
ref={uploadFileRef}
/>
- Upload some file and click send button
- When click in remove, notice that the console will display an object, and inside it, you will see the following content:
file: undefined,
originalEvent: original event,
Expected behavior
return the event with the props file with the respective file removed
Object[
file: File,
originalEvent: original event,
]
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the FileUpload component's advanced-mode removal handler and trace how it selects files for the onRemove event. Verify removal of an already uploaded file uses the uploaded-file collection, then check that the emitted event contains the removed File instead of undefined.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100