primefaces / primefaces/primereact

FileUpload:drag & drop does not replace existing file

Open
#8,249 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

I’m using the <FileUpload> component like this:

<FileUpload
  name="demo[]"
  url="/api/upload"
  accept="image/*"
  maxFileSize={1000000}
  emptyTemplate={
    <p className="m-0">Drag and drop files here to upload.</p>
  }
/>

When I select a file using the choose button, everything works as expected: if I pick a new file, it replaces the old one.

However, drag & drop behaves differently. If a file is already selected and I drag a new file in, nothing happens — the old file stays in place instead of being replaced by the new one.

Here’s a minimal example on StackBlitz:
https://stackblitz.com/edit/tajnbybz?file=src%2FApp.jsx

Reproducer

No response

System Information
System:
    OS: macOS 15.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 86.77 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.3 - ~/.nvm/versions/node/v20.18.3/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.3/bin/npm
    pnpm: 10.2.0 - /usr/local/bin/pnpm


primereact 10.9.7
"react": "19.1.0",
"tailwindcss": "~4.1.12",
Steps to reproduce the behavior
  1. Go to the reproduction example: https://stackblitz.com/edit/tajnbybz?file=src%2FApp.jsx
  2. Drag and drop an image file into the drop area.
  3. Drag and drop a different image file into the drop area again.

Result: Nothing happens — the original file remains selected.
Expected: The new file should replace the previously selected one, just like when using the choose button.

Expected behavior

When dragging and dropping a new file into the drop area, it should replace the previously selected file, the same way it does when choosing a file through the button.

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 and reproduce the behavior using the linked StackBlitz example: select one image, then drag in another. Trace the drag-and-drop handling and verify that the selected file is replaced consistently with the choose-button path; confirm the expected replacement behavior with a regression test if the component's tests are available.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.