You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Would expect that I can provide a FileList or similar object as a value prop to control the files externally.
Would expect that even if not controlled, if I manually reset the input's files object to an empty FileList (using a ref, getElementById, etc.), then the component would reset to its initial state. This is highly problematic for UIs that use a modal or some other means of completing the file manipulation (upload or whatever). The modal will have a "Close" button and it is normal and expected that when the modal closes, the input should reset.
Actual Behavior
State is apparently managed internally, and the only way to reset the input is to click the "X" button. Actually it is possible to set the input's FileList object to empty manually (using the method shown in code below), but doing so leaves FileInput in an inconsistent state, as the text label still shows the name of the previously selected file, and examining internal state shows that the File object itself (referencing the previous file) is still present.
Operating System and version (desktop or mobile): MacOS Monterey (12.7)
The text was updated successfully, but these errors were encountered:
nateq314
changed the title
FileInput - cannot currently be used as a * controlled * component
FileInput - unable to use as controlled component; unable to reset input state externally
Apr 11, 2024
Expected Behavior
value
prop to control the files externally.files
object to an empty FileList (using a ref, getElementById, etc.), then the component would reset to its initial state. This is highly problematic for UIs that use a modal or some other means of completing the file manipulation (upload or whatever). The modal will have a "Close" button and it is normal and expected that when the modal closes, the input should reset.Actual Behavior
State is apparently managed internally, and the only way to reset the input is to click the "X" button. Actually it is possible to set the input's FileList object to empty manually (using the method shown in code below), but doing so leaves FileInput in an inconsistent state, as the text label still shows the name of the previously selected file, and examining internal state shows that the File object itself (referencing the previous file) is still present.
URL, screen shot, or Codepen exhibiting the issue
Steps to Reproduce
(self explanatory, also see code snippet)
Your Environment
The text was updated successfully, but these errors were encountered: