FileInput
An input to select one or more files to upload.The <FileInput /> is used to select one or more files to upload to a specific location.
Below is an example of a file input for context.
User can upload a single file or multiple files based on the maxFileCount prop.
Provides the ability to limit the file upload to one item only. When a file has been selected, the file target is disabled. The user will need to delete the uploaded file before they can upload a new file.
Provides the ability to upload multiple files. For each new file the user uploads, a new cell is added to the top of the list. If an attempt is made to select more files than allowed, a critical toast will pop up to notify the user.
File limitations should be communicated to the user up front, to help avoid errors like uploading an incompatible file type or one that’s too large.
The file input will automatically generate a helper text to clearly communicate the limitations to the user, based on the values passed to the maxFileCount, maxFileSize and acceptedFileTypes props.
The <FileInput /> component allows users to define a file upload handler through the onFilesUpload handler. This handler should return an array of either FailedFile or UploadedFile objects. If the handler itself throws an error, all uploading items will fail and inherit that error.
In the following example the first item in the array of the files to be uploaded will always become a failed item. There is also a 50% chance that the entire upload will fail.
The <FileInput /> component allows users to define a file delete handler through the onFileDelete handler. Note, that this is a singular file as opposed to the multi nature of the onFilesUpload handler.
This handler takes in a file object and should delete it from the server. If the handler itself throws an error, the item in deletion will fail and inherit that error.
In the following example each item has a 50% chance of failing to be deleted.
It can be used when you want user to access the component as view only but can’t interact with the component.
The <FileInput /> component can receive an isInvalid flag from the Field component when the value of the input fails validation as part of a form. This can happen in cases like when the field is required but no files have been uploaded.
See an interactive code example of using the FileInput with react-hook-form and yup validation in the Forms pattern.
Max width for the filename is 25 chars, if the filename length exceed the limit than truncate the name in the middle so that the extension is always visible. Tooltip can be used to reveal the full filename on hover.