FileUpload:drag & drop does not replace existing file
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.