primefaces / primefaces/primereact

FileUpload: onRemove does not correctly return the removed file if it has already been uploaded.

Open
#7,808 2 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

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
  1. 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}
/>
  1. Upload some file and click send button
  2. 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.