primefaces / primefaces/primereact
FileUpload:drag & drop does not replace existing file
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’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
- Go to the reproduction example: https://stackblitz.com/edit/tajnbybz?file=src%2FApp.jsx
- Drag and drop an image file into the drop area.
- 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
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 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