File Uploader
CKEditor add-on
TinyMCE add-on
Bootstrap Editor add-on
JavaScript SDK
Purchase logo
Purchase Lite
Purchase logo
Purchase Full

Advanced files upload using dialog

You can use the UploaderUiFlow class to built virtually any file uploading scenarios. This class is a carcass for programming uploader behaviour. It features a number of event methods a developer can override in the class descendant. Plus, several abstract methods must be overridden obligatory: they specify main uploading settings. During the entire uploader operation, an instance of the class collects and stores various data about the uploading process.

Uploading API functions working with the dialog are, in fact, simple wrappings based on the UploaderUiFlow class.

Note. This class does not allow you to omit showing the dialog. If you want quick uploading bypassing the dialog, please use the quick uploading class: UploaderFlow.

UploadUiFlow class operation flowchart

File Uploader flow using the dialog

UploaderUiFlow class


urlUploader: string
Uploading script URL. Filled in once by calling getUrlUploader on start up.
files: File[]
The list of files to upload. Filled in by calling the getFilesToUpload functions in the beginning of the flow, or after calling the browser selection dialog, but before calling onAfterSelected. The list is used until files are passed to the dialog, then the dialog stores this list independently modifying it as the user adds files using the dialog toolbar button.
presets: PresetData[]
The list of available presets. Formed on start up by calling the getAvailablePresets method.
preset: PresetData
A link to one of available presets that is active at the moment. By default, this field is equal to the available preset whose name is returned by the getDefaultPresetName method. After calling the File Uploader dialog, this property is also updated using the preset selected by the user.
uploadId: string
The unique ID of the transaction. Generated by the server and filled in during uploading initialization (before calling onAfterInit).
serverFilesCommited: ServerFile[]
The list of data about files uploaded to the server and committed. This property is filled after successful commit, between closing the File Uploader dialog and calling onAfterCommited.
errorMessage: string
A localized error message. Filled in upon an error on any of stages, before calling the corresponding error handling method (for example, onFailAfterUpload.


onStart(): void
Called on startup, before any other code is executed.
onAfterSelected(): void
Called after the user selected files in the browser file selection dialog. If you skip file selection by returning `false` from the doOpenSelectDialogOnStart method, this method is also not invoked. Available properties: files.
onAfterInit(): void
Called after uploading initialization. Available properties are those filled in on the previous step and uploadId.
onAfterCommited(): void
Called after all files were successfully uploaded, the user clicked "OK" in the File Uploader dialog and changes were committed to the server.
onFailAfterInit(): void
Called upon an error occurred during uploading initialization. The error message is available in the errorMessage property.
onFailUserCancel(): void
Called if the user cancelled file uploading by clicking "Cancel" in the File Uploader dialog. The error message is available in the errorMessage property.
onAnyFail(): void
Called on any error after a specialized error handling method is called (see above). The error message is available in the errorMessage property).
onAnyFinish(): void
Called when `UploaderFlow` finishes with whatever result. This is the last event available in this particular flow.
abstract getUrlUploader(): string
Returns the upload script URL that handles all requests.
abstract getAvailablePresets(): PresetData[]
Returns an array of available presets. The user can switch between them in the File Uploader dialog and pick a suitable one. If your function returns an array with just one preset, the toolbar of the user will not display preset buttons at all, and he will not be able to select them. If you return more than one preset, the order of buttons on the toolbar is defined by the order of presets in this array.
abstract getDefaultPresetName(): string
Returns the name of the preset that should be used by default (active).
abstract getFilesToUpload(): File[]
Returns the list of files to add to the dialog when it is shown. Works regardless of whether there was a file selection step before or not. The specified files are added in any case.
abstract doOpenSelectDialogOnStart(): boolean
Specifies if the browser file selection dialog should be displayed before the File Uploader dialog.
abstract isSelectMultiple(): boolean
Returns the flag that shows if more than one file can be selected in the file selection dialog and upload to the server more than one file in the dialog.