freenowtech / freenowtech/wave
FilePicker onFileChange not triggering when choosing changed file
- 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
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