Skip to content

fix(web-components/file-input): cannot re‑upload same image after failed upload #421

@saraparsa13

Description

@saraparsa13

Description:

After the upload API call fails and error={true}, users are prevented from selecting the same file again to retry. The onInput handler does not fire when re‑selecting the identical file, although selecting a different file works as expected.

To Reproduce:

  1. Render your file-input:
<TapsiFileInput
 label="upload the image"
 hideLabel
 placeholder="upload the image"
 accept="image/*"
 disabled={isPending}
 loading={isPending}
 onInput={handleUploadFile}
 error={isError}
 errorText="error on uploading the image, please try again!"
/>
  1. Select image A to trigger handleUploadFile, simulate a failed API call, and set isError = true.
  2. Try selecting image A again — nothing happens (no new upload attempt).
  3. Select image B instead — onInput fires, and upload is retried.

Expected behavior:

When error={true} (upload failed), the component should reset its internal file value so that selecting the same file again retriggers the upload flow. Users shouldn’t have to pick a different file just to retry.

Desktop:

  • OS: macOS 14.4.1
  • Browser: Chrome 135
  • @tapsioss/web‑components: v0.11.1

Additional context:

Note that this issue can also occur even when uploads succeed: because the file input’s value remains the same, selecting the same image immediately after a successful upload also won’t fire onInput. This makes it even more important to reset the input’s value, especially in the failed state where users are most likely to retry with the same file.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions