Skip to main content

File input

Collapsed

Only applicable on non-mobile devices (medium and up breakpoints).

Single file mode

When :multiple="false" is set, only one file can be selected at a time.

Hidden input opened via link button

In space-constrained areas, you can allow file upload with just an inline link button by making use of the openFilePicker exposed by the file input. If you put a template ref on the file picker, you'll be able to call openFilePicker from any button's click handler.

Have a file handy? You can to send it to us.

EsFileInput props

Name
uploadUrls
Type
Object
Default
n/a
Description
An array of objects with name, uploadUrl, and additionalFields (optional) as fields.
Name
fileTypes
Type
Array
Default
[]
Description
An array of accepted mime types for a file. If no argument passed, all file types are accepted. These mime types follow the IANA Media Types.
Name
maxFileSize
Type
Number
Default
25
Description
Max file size in MB. This is per file. Any file that exceeds this size will not be uploaded.
Name
collapsed
Type
Boolean
Default
false
Description
In desktop view, determines whether the upload box is horizontally collapsed.
Name
multiple
Type
Boolean
Default
true
Description
When true, allows multiple file selection. When false, restricts to single file selection.

EsFileInput event listeners

Name
@fileSizeError
Payload
String
Descriptions
If a file picked exceeds the max file size defined as a prop, this event is emitted. The payload is the name of the file.
Name
@fileIsAFolderError
Payload
String
Descriptions
If the user tries to upload a folder.
Name
@file
Payload
String
Descriptions
If the file type of a file picked is not in the fileTypes array defined as a prop, this event is emitted. The payload is the name of the file that was not accepted.
Name
@readyToUpload
Payload
Array
Descriptions
If the files picked do not exceed the max file size defined as a prop, this event is emitted. The payload is an array of file objects ready to be uploaded.
Name
@uploadSuccess
Payload
String
Descriptions
If the upload for a given file is successful, this event is emitted. The payload is the name of the file that was successfully uploaded.
Name
@uploadFailure
Payload
Object
Descriptions
If the upload for a given file fails, this event is emitted. The payload is an object with the fields name and message.
Name
@fileDataRead
Payload
Object
Descriptions
Used for a file thumbnail preview. This is the callback for the FileReader onload event (a file has finished being read locally into the browser as an encoded string). The payload is an object with the fields name, size, type, and data.

EsFileInput exposed methods

Name
clear
Arguments
none
Description
Clears the value of the file input.
Name
openFilePicker
Arguments
none
Description
Opens the system file picker dialog.