The File input control allows to get one or more files from the user. This control is quite useful because not only allows the user to choose an existing file, but also to capture a new one by using the device camera, for example. There are other specific input controls like the Email input, Phone input, Color input, etc.
This control has a default style, and, some control JavaScript properties (see below), can also changes the control style, not to mention the Classes property, that you can use to establish one or more CSS classes to be applied to the control.
In addition to that style, you can also set custom CSS rules for the control by using the IDE controls style inspector. If this is not enough, you can include any number of CSS stylesheets in the app by using the app files manager.
If you want to use CSS stylesheets, you need to know how to refer to the control, so take a look at the Runtime selectors help topic.
The File input control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.
The File input control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.
The File input control put at your disposition the below events handlers:
Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.
Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.
Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.
Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.
Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.
Runtime. String variable. The Name control property stores the name of the File input control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "file1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.
Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.
Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.
Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.
Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).
Runtime. Boolean variable. The Disabled control property determines if the control appear disabled to the user or not. Set to "true" to disable the control, or to "false" to enable the control (by default).
Runtime. Boolean variable. The Multiple control property determines if the user can choose one or more files using the provided browser or platform file picker dialog. By defaut Multiple is "false", which means that the user can only choose one file. Set this variable to "true" in order to allow the user to choose more than one files.
It's no possible to determine the maximum number of files to be choosed, but we can take a look at the Value property inside the Change event to determine the number of files that the user has been choose, as well information about the choosed files.
Runtime. String variable. The Accept control property allows to filter the type of files that we expect to be selected using the input control.
This property can be set with:
The Accept property takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:
Runtime. String variable. The Capture control property specifies which camera to use for capture of image or video data, if the Accept property indicates that the input should be of one of those types. A value of "user" indicates that the user-facing camera and/or microphone should be used. A value of "environment" specifies that the outward-facing camera and/or microphone should be used.
Runtime. FileList array variable. The Value control property is "null" by default and stores a FileList array variable when the user choose one or more files (depending on the Multiple property) using the input control. This property is available inside the control Change event.
Every File item in the FileList array contain the below properties:
| Name | Type | Description |
|---|---|---|
| lastModified | Number | A timestamp value with the last modified date of the selected file. |
| name | String | The name of the selected file, including the file extension. |
| size | Number | The size in bytes of the selected file. |
| type | String | The MIME type of the selected file, for example, "image/png". |
Take a look at the control Change event for a sample of use of the Value property.
Runtime. String variable. The Size control property determines the size of the control. By default the File input have the "sm" (small) size, and, you can use the available app constansts "app.size.*" to set this variable, for example:
Runtime. Number variable. The TabIndex control property determines how the browser / platform must deal with the control when the user press the TAB key. The default value for this variable is "0" (zero), which means that the control should be focusable in sequential keyboard navigation, but its order is defined by the document's order.
You can set this variable to a value of "-1", which means that the element should not be reachable via sequential keyboard navigation, but could be focused with JavaScript or visually. It's mostly useful to create accessible widgets with JavaScript.
A positive value for this variable means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" would be focused before tabindex="5", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source.
The Change event handler is fired when the select one or more files using the input control. The control Value property stores the seleced file or files. See also the available events variables.
The Focus event handler is fired when the when the File input control receive the user focus. This event is the partner of the Blur event that you can see below. See also the available events variables.
The Blur event handler is fired when the when the File input control loss the user focus. This event is the partner of the Focus event that you can see above. See also the available events variables.
The Click event handler is fired when the user click or tap into the File input control. See also the available events variables.
The DblClick (Double Click) event handler is fired when the user double click or double tap into the File input control. See also the available events variables.
The MouseUp event handler is fired when the user up the mouse into the File input control. See also the available events variables.
The MouseDown event handler is fired when the user down the mouse into the File input control. See also the available events variables.
The MouseMove event handler is fired when the user move the mouse into the File input control. See also the available events variables.
The MouseEnter event handler is fired when the user enter the mouse into the File input control. See also the available events variables.
The MouseLeave event handler is fired when the user leave the mouse from the File input control. See also the available events variables.
The ContextMenu event handler is fired when the browser must shown the context menu of the the File input control, which occur when the user click with the right mouse button into the File input control. See also the available events variables.
The below JavaScript variables are available in all the referred File input control events handlers:
| Name | Type | Description |
|---|---|---|
| event | Mixed | This variable is received in almost all control events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more. |
| self | Object | Stores the control object. This is a shortcut to the control variable, and it's available since we are talking about specific control events. |
| view | Object |
Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName". |
| views | Object | Stores all the loaded app views. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls. |
| frames | Object | Stores all the app frames. You can use this variable to access to all the app frames and their controls. |
| dialogs | Object | Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls. |
| app | Object | Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods. |