HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
File Input
A component that extends the native functionality of <input type="file"> to add additional functionality and a hexagon theme
Examples

HTML

<div id="example"></div>

JavaScript

new hx.FileInput('#example')
Api
Change Log
Prototypes
hx.FileInput
A component that extends the native functionality of <input type="file"> to add additional functionality and a hexagon theme
Constructors
hx.FileInputselectorString / HTMLElementoptionsObject
Creates a FileInput using a selector and some options.
Arguments
selectorString / HTMLElement
A CSS selector string which uniquely identifies the element to create the FileInput in, or the Element to create the FileInput in.
options
The options to use when setting up the FileInput
Properties
acceptedExtensionsArray[String]
An array of file extensions, e.g. ['png', 'jpeg']
buttonClassString
The class to use for the button
Default: 'hx-action'
buttonTextString
The text to display on the button. The default text becomes hx.userFacingText('fileInput', 'chooseFiles') when selecting multiple files.
Default: [hx.userFacingText('fileInput', 'chooseFile')]
disabledBoolean
The disabled state to initialise the FileInput in
Default: false
dragEnabledBoolean
Whether the user can drag and drop files to the input to upload
Default: true
filesSelectedTextString
The string to indicate the number of files selected
Default: [hx.userFacingText('fileInput', 'filesSelected')]
fullWidthBoolean
Whether the FileInput should be full width
Default: false
multipleBoolean
Whether multiple files can be selected
Default: false
noFilesTextString
Default: [hx.userFacingText('fileInput', 'noFile')]
Methods
disabledBoolean
A method for getting the disabled state of a FileInput
Returns
Boolean
Whether the FileInput is disavbled
disableddisabledBooleanFileInput
A method for disabling / enabling the FileInput
Arguments
disabledBoolean
Whether or not the FileInput should be disabled
Returns
FileInput
This FileInput
valueArray[File]
A method for returning the currently set array of files
Returns
Array[File]
An array of file objects
valueFileInput
A method for clearing the value of the FileInput.
For security reasons, it is not possible to pass in any value other than undefined
valueUndefined
Undefined must be passed in. For security reasons, it is not possible to set the value of a FileInput, only clear it.
Returns
FileInput
This FileInput
Functions
hx.fileInputoptionsObjectSelection
Creates a new FileInput set up on a detached element, wrapped in a selection
Arguments
options
See the options object for the hx.FileInput prototype constructor for more information on the available options
Returns
Selection
A selection containing an element with an FileInput initialised on it