FileInput is a very simple wrapper for a
<input type="file" />
to gain the styles of the
Button component. All of the styling props on a button are
available on the
FileUpload component is a wrapper of the
FileInput that has some additional hooks
for handling uploading a file to a browser, not a server.
This example shows how you can hook into the upload progress props to display a progress bar and optional abort the upload. This will really only be effect if you choose big files since it is pretty fast to upload small files to the browser.
This example shows how you can use the
FileUpload component along with
FormData to "upload"
a file to my documentation server.
FileInput is a simple wrapper of the
<input type="file" /> element, this means that the native
behavior is enabled by default. Once a user selects a file, they will not be able to select that file again
immediately. They will need to select a different file and then select the file again if they want to upload/select
it again. This is because the file input stores the path of the files as its value and does not trigger the
This behavior can be overridden by enabling the
allowDuplicates prop to never store the
value of the file's path
and triggering the
onChange event every time a file is selected.
The current value of the input would be: