primefaces / primefaces/primereact
FileUpload Templated: Inconsistency in getFiles() and totalSize calculation during onSelect and onRemove events
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
When utilizing the FileUpload component with custom templates (headerTemplate, itemTemplate), managing the total file size state (totalSize) externally becomes inconsistent. The onSelect and onRemove events appear to fire asynchronously relative to the component's internal file list update.
Reproducer
No response
System Information
"react": "18.3.1",
"react-dom": "18.3.1",
"primereact": "^10.9.7",
Steps to reproduce the behavior
Steps to Reproduce:
Create a FileUpload component using the App Router in Next.js (client-side) with headerTemplate to display an external totalSize state managed by useState.
Implement onSelect and onRemove handlers that attempt to use fileUploadRef.current.getFiles() to accurately calculate the current total size.
Select a single file (File A). The displayed total size is incorrect (often 0 or delayed).
Select a second file (File B). The total size calculation often incorrectly duplicates the size of File A plus the size of File B (e.g., A + A + B), or only shows the size of File A.
Deleting File B sometimes synchronizes the size correctly, sometimes no
Expected behavior
fileUploadRef.current.getFiles() should reliably and synchronously reflect the updated list of files immediately after the onSelect or onRemove events have fired, allowing external state management to remain synchronized without requiring workarounds.
Current Workaround:
The only reliable way to achieve synchronization is by using setTimeout(syncTotalSize, 0) within the onSelect and onRemove handlers to defer the state update to the next event loop tick.
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 with the FileUpload component's onSelect and onRemove event flow and the getFiles() behavior when using headerTemplate or itemTemplate. Reproduce the issue with React 18.3.1 and PrimeReact 10.9.7, then verify that getFiles() reflects the updated file list synchronously and that totalSize calculations no longer require setTimeout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100