primereact icon indicating copy to clipboard operation
primereact copied to clipboard

FileUpload:drag & drop does not replace existing file

Open lennertVanSever opened this issue 4 months ago • 0 comments

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.

lennertVanSever avatar Aug 26 '25 13:08 lennertVanSever