primefaces / primefaces/primereact

FileUpload Templated: Inconsistency in getFiles() and totalSize calculation during onSelect and onRemove events

Open
#8,393 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.