Class: FileUpload

componyx .UI.FileUpload(id, properties) → {componyx.UI.FileUpload}

new FileUpload(id, properties) → {componyx.UI.FileUpload}

FileUpload class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`ajax.upload`	componyx.UI.base.AjaxMethod	AJAX method used to upload data to the server.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: componyx.UI.FileUpload

Extends

componyx.UI.base.Component

Classes

FileUploadEvents

Members

abortLabel :String

Gets or sets the label displayed when the upload was aborted.

Type:

String

accept :String

Gets or sets the comma-separated list of allowed file extensions (.png, .jpg, .jpeg) or MIME types (image/png or image/*).

Type:

String

cancelButtonId :String

Gets or sets the id of the component from which the settings are cloned for the cancel button.

Type:

String

cancelButtonLabel :String

Gets or sets the label of the cancel button.

Type:

String

cssClassAbort :String

Gets or sets the css class applied to the state container when the upload was aborted.

Type:

String

cssClassCancelButton :String

Gets or sets the css class of the cancel buttons.

Type:

String

cssClassDropzone :String

Gets or sets the css class of the drop-zone.

Type:

String

cssClassError :String

Gets or sets the css class applied to the state container when the upload failed.

Type:

String

cssClassList :String

Gets or sets the css class of the list.

Type:

String

cssClassName :String

Gets or sets the css class of the name container in the list.

Type:

String

cssClassProgressBar :String

Gets or sets the css class of the progress bar.

Type:

String

cssClassSelectButton :String

Gets or sets the css class of the select button.

Type:

String

cssClassState :String

Gets or sets the css class of the list-item state container.

Type:

String

cssClassSuccess :String

Gets or sets the css class applied to the state container when the upload was successful.

Type:

String

cssClassUploadButton :String

Gets or sets the css class of the upload button.

Type:

String

dragAndDrop :Boolean

Gets or sets a value indicating if drag & drop of files is enabled.

Type:

Boolean

dropLabel :String

Gets or sets the label displayed in the drop-zone.

Type:

String

errorLabel :String

Gets or sets the label displayed when the upload failed.

Type:

String

events :componyx.UI.FileUpload.FileUploadEvents

FileUpload events

Type:

componyx.UI.FileUpload.FileUploadEvents

maxFileSize :Number|null

Gets or sets the max allowed file size in KB.

Type:

Number | null

maxFiles :Number|null

Gets or sets the max allowed file count.

Type:

Number | null

preventDuplicates :Boolean

Gets or sets a value indicating if duplicate files (matched by name, size, and last modified date) are prevented from being added again.

Type:

Boolean

rejectedDialogHeader :String

Gets or sets the header label of the rejected files dialog.

Type:

String

rejectedDialogId :String

Gets or sets the id of the component from which the settings are cloned for the rejected files dialog.

Type:

String

selectButtonId :String

Gets or sets the id of the component from which the settings are cloned for the select button.

Type:

String

selectButtonLabel :String

Gets or sets the label of the file select button.

Type:

String

successLabel :String

Gets or sets the label displayed when the upload was successful.

Type:

String

uploadButtonId :String

Gets or sets the id of the component from which the settings are cloned for the upload button.

Type:

String

uploadButtonLabel :String

Gets or sets the label of the upload button.

Type:

String

Methods

cancel(fileopt)

Cancels the upload.

Parameters:

Name	Type	Attributes	Description
`file`	File	<optional>	The file to cancel. All files are canceled if omitted.

clear()

Clears the upload progression info.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

getValue() → {Array.<Object>}

Gets the list of successfully uploaded files. Each entry is either the server response object, or if no JSON data response, an object with the file name.

Returns:

An array of objects holding the uploaded file information.

Type: Array.<Object>

render()

Renders the component.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

upload()

Uploads the selected file(s).

Type Definitions

AcceptEventArgs

Type:

Object

Properties:

Name	Type	Attributes	Default	Description
`file`	File			The file to accept.
`cancel`	Boolean	<optional>	false	A value indicating if the default action of accepting the file should be canceled (reject).

CancelEventArgs

Type:

Object

Properties:

Name	Type	Description
`id`	String	The id of the list item.
`file`	File	The file that was canceled.
`fileIndex`	Number	The index of the file in the file list.

PostUploadFileEventArgs

Type:

Object

Properties:

Name	Type	Description
`fileIndex`	Number	The index of the file that was uploaded.
`xhr`	componyx.library.XhrWrappedResult	The wrapped XHR request for this upload.
`file`	Object	The uploaded file info; either the server response object or an object with the file name.

PreUploadFileEventArgs

Type:

Object

Properties:

Name	Type	Description
`fileIndex`	Number	The index of the file being uploaded.
`formData`	FormData	The form data object used for the upload request.

UploadProgressEventArgs

Type:

Object

Properties:

Name	Type	Description
`fileIndex`	Number	The index of the file being uploaded.
`xhr`	componyx.library.XhrWrappedResult	The wrapped XHR request for this upload.
`percentage`	Number	The upload transfer progress as a percentage (0-100).