File Inputs

The FileInput component is just a simple styling of the <input type="file" /> element by making it display as a button. When you want to do in-browser uploads, you can use the additional FileUpload component to hook into the API. Unfortunately the uploading to a server is not built in to the component since there are many different ways to upload and it didn't seem worth implementing all the logic for one way. However, there is an example below of using the fetch API and FormData to upload files to my documentation server as a guideline.

The FileInput is a very simple wrapper for a <label> and <input type="file" /> to gain the styles of the Button component. All of the styling props on a button are available on the FileInput.

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.


Since the 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 onChange event again.

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:

""