freenowtech / freenowtech/wave

FilePicker onFileChange not triggering when choosing changed file

Open
#298 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
67
Forks
31
Avg merge
1d 8h
Merged PRs (30d)
4

Description

- `@freenow/wave` version: 1.27.0

### What was expected to happen?

When choosing a file with the FilePicker, then changing the file and choosing the same update file again, the onFileChange does not trigger and therefore you don't get the updated file.
With the old FilePicker implementation the file wasn't stored in the component itself, but passed as a prop and there was a possibility to give a callback function for the button that triggers the input, so you could have a remove button like in the attached video.

### Reproduction

You can actually reproduce this in the docs by going to https://wave.free-now.com/components/file-picker choosing something like "text/csv" as accept in the playground, then choosing some file, after that changing the file content and trying to choose the updated file again. In the console it will show logs on the first choosing, but not for the second.

I'm wondering if I'm missing something to allow me to remove the current file before choosing a new one?

https://user-images.githubusercontent.com/9133431/207299706-e76b5873-1669-46ad-8810-8fde2ad5d9c4.mov

### Potential solution idea

One potential way to adapt the component to cover this use case could be to add two optional properties like `onRemove` and `onRemoveButtonText` and if those are given showing a remove button if there is a file already, triggering the callback and removing the file from the state on button click.

Contributor guide

Open the contributing guide

Research direction

Start with the FilePicker implementation and the FilePicker docs playground described in the issue. Reproduce selecting a file, changing it, and selecting it again, then trace the onFileChange behavior; done means the updated selection is reported reliably and the supported way to remove an existing file is clear.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.