FileUpload JAVASCRIPT UI Component API

FileUpload Javascript API

Class

FileUpload

FileUpload

FileUpload provides an easy and integrated way for users to upload multiple files.

Selector

smart-file-upload

Properties

AacceptSets or gets the file types that can be submitted to the server via the element. This property corresponds to the 'accept' attribute of the hidden file input which is submitted to the URL specified by the uploadUrl property.
AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AappendToAppends the list with selected files to a new custom container specified by the user. If the value of the property is a string it must represent a valid id of an HTML element inside the DOM that will be used as the new container for the uploaded files list.
AautoUploadSets or gets whether files will be automatically uploaded after selection.
DdirectoryAllows to upload a directory. Files in all subfolders will be uploaded also. This option is supported only in Firefox and Chrome.
DdisabledEnables or disables the element.
DdropZoneDefines a custom container that will be used as the new drop zone for file uploads. The dropped files will be added in the fileUpload's list. If 'dropZone' property set to true, the default drop zone inside the element will be used instead. If set to certain id of an HTML element inside the DOM then it will be used as the drop zone.
HhideFooterHides the footer element and it's contents (Upload All, Pause All and Close All buttons).
IitemTemplateApplies a custom template to the file items that represent the uploaded files.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmessagesSets the various text values used in the widget. Useful for localization. The localization object has the following fields: browse, pauseFile, cancelFile, uploadFile, pauseAll, cancelAll, uploadAll. It's recommended these messages to be set before element's initialization.
MmultipleSets or gets whether multiple item uploads are allowed.
NnameSets or gets the name attribute of the hidden file input which is submitted to the URL specified by the uploadUrl property.
RreadonlyIf the element is readonly, users cannot interact with it.
RresponseHandlerCallback that can used to handle various server responses and error codes.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SsetHeadersCallback function, used to change the headers of the file upload's XHR request.
SshowProgressDisplays a progress bar at the bottom of each uploaded item to show the progress of the uploading process.
TthemeDetermines the theme. Theme defines the look of the element
UuploadUrlSets or gets the upload URL. This property corresponds to the upload form's action attribute. For example, the uploadUrl property can point to a PHP file, which handles the upload operation on the server-side.
UunfocusableIf is set to true, the element cannot be focused.
RremoveUrlSets or gets the remove URL. This property corresponds to the form's action attribute. For example, the removeUrl property can point to a PHP file, which handles the remove operation on the server-side.
VvalueGets the file upload value.
VvalidateFileCallback used to validate the files immediatelly after their selection. Retuns a boolean value. If the returned value is false, the file is removed from list and a 'validationError is fired.

Events

FfileSelectedThis event is triggered when a file has been selected.
UuploadCanceledThis event is triggered when a file upload operation is canceled.
UuploadCompletedThis event is triggered when a file upload operation is completed.
UuploadErrorThis event is triggered when during the file upload process something happens and upload fails.
UuploadPausedThis event is triggered when a file upload operation is paused.
UuploadStartedThis event is triggered when a file upload operation is started.
VvalidationErrorThis event is triggered if the validation of a user defined 'validateFile' callback fails.

Methods

BbrowseOpens a popup to browse for a file.
CcancelAllCancels all selected files. The files are removed from the list and their uploading is prevented.
CcancelFileCancels a selected file. The file is removed from the file list and it's uploading is prevented.
PpauseAllPauses the uploading of all files. File upload is prevented but the files remain in the file list.
PpauseFilePauses upload of a file with particular index. File upload is prevented but file ramains in the file list.
UuploadAllUploads all selected files.
UuploadFileUploads a selected file.

Properties

acceptstring | null

Sets or gets the file types that can be submitted to the server via the element. This property corresponds to the 'accept' attribute of the hidden file input which is submitted to the URL specified by the uploadUrl property.

Try a demo showcasing the accept property.

Example

Set the accept property. 

 <smart-file-upload accept='.img'></smart-file-upload>

Set the accept property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.accept = '.pdf';

Get the accept property. 

 const fileupload = document.querySelector('smart-file-upload');
 let accept = fileupload.accept;

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-file-upload animation='none'></smart-file-upload>

Set the animation property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.animation = 'simple';

Get the animation property. 

 const fileupload = document.querySelector('smart-file-upload');
 let animation = fileupload.animation;

appendTostring

Appends the list with selected files to a new custom container specified by the user. If the value of the property is a string it must represent a valid id of an HTML element inside the DOM that will be used as the new container for the uploaded files list.

Default value

"null"
Try a demo showcasing the appendTo property.

Example

Set the appendTo property. 

 <smart-file-upload append-to='div1'></smart-file-upload>

Set the appendTo property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.appendTo = ''div2'';

Get the appendTo property. 

 const fileupload = document.querySelector('smart-file-upload');
 let appendTo = fileupload.appendTo;

autoUploadboolean

Sets or gets whether files will be automatically uploaded after selection.

Default value

false

Example

Set the autoUpload property. 

 <smart-file-upload auto-upload></smart-file-upload>

Set the autoUpload property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.autoUpload = false;

Get the autoUpload property. 

 const fileupload = document.querySelector('smart-file-upload');
 let autoUpload = fileupload.autoUpload;

directoryboolean

Allows to upload a directory. Files in all subfolders will be uploaded also. This option is supported only in Firefox and Chrome.

Default value

false
Try a demo showcasing the directory property.

Example

Set the directory property. 

 <smart-file-upload directory></smart-file-upload>

Set the directory property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.directory = false;

Get the directory property. 

 const fileupload = document.querySelector('smart-file-upload');
 let directory = fileupload.directory;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property. 

 <smart-file-upload disabled></smart-file-upload>

Set the disabled property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.disabled = false;

Get the disabled property. 

 const fileupload = document.querySelector('smart-file-upload');
 let disabled = fileupload.disabled;

dropZoneany

Defines a custom container that will be used as the new drop zone for file uploads. The dropped files will be added in the fileUpload's list. If 'dropZone' property set to true, the default drop zone inside the element will be used instead. If set to certain id of an HTML element inside the DOM then it will be used as the drop zone.

Try a demo showcasing the dropZone property.

Example

Set the dropZone property. 

 <smart-file-upload drop-zone='div1'></smart-file-upload>

Set the dropZone property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.dropZone = 'div2';

Get the dropZone property. 

 const fileupload = document.querySelector('smart-file-upload');
 let dropZone = fileupload.dropZone;

hideFooterboolean

Hides the footer element and it's contents (Upload All, Pause All and Close All buttons).

Default value

false

Example

Set the hideFooter property. 

 <smart-file-upload hide-footer></smart-file-upload>

Set the hideFooter property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.hideFooter = false;

Get the hideFooter property. 

 const fileupload = document.querySelector('smart-file-upload');
 let hideFooter = fileupload.hideFooter;

itemTemplateany

Applies a custom template to the file items that represent the uploaded files.

Try a demo showcasing the itemTemplate property.

Example

Set the itemTemplate property. 

 <smart-file-upload item-template='div1'></smart-file-upload>

Set the itemTemplate property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.itemTemplate = 'div2';

Get the itemTemplate property. 

 const fileupload = document.querySelector('smart-file-upload');
 let itemTemplate = fileupload.itemTemplate;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"
Try a demo showcasing the locale property.

Example

Set the locale property. 

 <smart-file-upload locale='de'></smart-file-upload>

Set the locale property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.locale = 'fr';

Get the locale property. 

 const fileupload = document.querySelector('smart-file-upload');
 let locale = fileupload.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

 <smart-file-upload localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-file-upload>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const fileupload = document.querySelector('smart-file-upload');
 let localizeFormatFunction = fileupload.localizeFormatFunction;

messagesobject

Sets the various text values used in the widget. Useful for localization. The localization object has the following fields: browse, pauseFile, cancelFile, uploadFile, pauseAll, cancelAll, uploadAll. It's recommended these messages to be set before element's initialization.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"browse": "Browse",

"uploadFile": "Upload File",

"cancelFile": "Cancel File",

"pauseFile": "Pause File",

"uploadAll": "Upload All",

"cancelAll": "Cancel All",

"pauseAll": "Pause All",

"totalFiles": "Total files: ",

"connectionError": "{{elementType}}: File Upload requires connection to the server.",

"wrongItemIndex": "{{elementType}}: There is no file with such an index in the list of uploaded files.",

"tooLongFileName": "{{elementType}}: File name is too long."

}

Try a demo showcasing the messages property.

Example

Set the messages property. 

 <smart-file-upload messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","browse":"Durchsuche","uploadFile":"Datei hochladen","cancelFile":"Datei abbrechen","pauseFile":"Datei anhalten","uploadAll":"Alles hochladen","cancelAll":"Alle Absagen","pauseAll":"Alles pausieren","totalFiles":"Gesamtdateien:","connectionError":"{{elementType}}: Der Datei-Upload erfordert eine Verbindung zum Server.","wrongItemIndex":"{{elementType}}: Es gibt keine Datei mit einem solchen Index in der Liste der hochgeladenen Dateien.","tooLongFileName":"{{elementType}}: Dateiname ist zu lang."}}'></smart-file-upload>

Set the messages property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","browse":"Browse","uploadFile":"Upload File","cancelFile":"Cancel File","pauseFile":"Pause File","uploadAll":"Upload All","cancelAll":"Cancel All","pauseAll":"Pause All","totalFiles":"Total files: ","connectionError":"{{elementType}}: File Upload requires connection to the server.","wrongItemIndex":"{{elementType}}: There is no file with such an index in the list of uploaded files.","tooLongFileName":"{{elementType}}: File name is too long."}};

Get the messages property. 

 const fileupload = document.querySelector('smart-file-upload');
 let messages = fileupload.messages;

multipleboolean

Sets or gets whether multiple item uploads are allowed.

Default value

false
Try a demo showcasing the multiple property.

Example

Set the multiple property. 

 <smart-file-upload multiple></smart-file-upload>

Set the multiple property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.multiple = false;

Get the multiple property. 

 const fileupload = document.querySelector('smart-file-upload');
 let multiple = fileupload.multiple;

namestring

Sets or gets the name attribute of the hidden file input which is submitted to the URL specified by the uploadUrl property.

Default value

""

Example

Set the name property. 

 <smart-file-upload name='fileUploadName'></smart-file-upload>

Set the name property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.name = 'fileUploadNewName';

Get the name property. 

 const fileupload = document.querySelector('smart-file-upload');
 let name = fileupload.name;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property. 

 <smart-file-upload readonly></smart-file-upload>

Set the readonly property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.readonly = true;

Get the readonly property. 

 const fileupload = document.querySelector('smart-file-upload');
 let readonly = fileupload.readonly;

responseHandlerfunction | null

Callback that can used to handle various server responses and error codes.

Example

Set the responseHandler property. 

 <smart-file-upload response-handler='function(xhr){ if(xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}}'></smart-file-upload>

Set the responseHandler property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.responseHandler = function(xhr){ if(xhr.status === 404) {console.log('Not Found');}};

Get the responseHandler property. 

 const fileupload = document.querySelector('smart-file-upload');
 let responseHandler = fileupload.responseHandler;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-file-upload right-to-left></smart-file-upload>

Set the rightToLeft property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.rightToLeft = true;

Get the rightToLeft property. 

 const fileupload = document.querySelector('smart-file-upload');
 let rightToLeft = fileupload.rightToLeft;

setHeadersfunction | null

Callback function, used to change the headers of the file upload's XHR request.

Example

Set the setHeaders property. 

 <smart-file-upload set-headers='function(xhr, file){ xhr.setRequestHeader("Cache-Control", "no-cache"); }}'></smart-file-upload>

Set the setHeaders property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.setHeaders = function(xhr, file){ xhr.setRequestHeader("X-File-Name", file.fileName); }};

Get the setHeaders property. 

 const fileupload = document.querySelector('smart-file-upload');
 let setHeaders = fileupload.setHeaders;

showProgressboolean

Displays a progress bar at the bottom of each uploaded item to show the progress of the uploading process.

Default value

false
Try a demo showcasing the showProgress property.

Example

Set the showProgress property. 

 <smart-file-upload show-progress></smart-file-upload>

Set the showProgress property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.showProgress = false;

Get the showProgress property. 

 const fileupload = document.querySelector('smart-file-upload');
 let showProgress = fileupload.showProgress;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-file-upload theme='blue'></smart-file-upload>

Set the theme property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.theme = 'red';

Get the theme property. 

 const fileupload = document.querySelector('smart-file-upload');
 let theme = fileupload.theme;

uploadUrlstring

Sets or gets the upload URL. This property corresponds to the upload form's action attribute. For example, the uploadUrl property can point to a PHP file, which handles the upload operation on the server-side.

Default value

""
Try a demo showcasing the uploadUrl property.

Example

Set the uploadUrl property. 

 <smart-file-upload upload-url='localhost'></smart-file-upload>

Set the uploadUrl property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.uploadUrl = 'localhost/fileUpload';

Get the uploadUrl property. 

 const fileupload = document.querySelector('smart-file-upload');
 let uploadUrl = fileupload.uploadUrl;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-file-upload unfocusable></smart-file-upload>

Set the unfocusable property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.unfocusable = false;

Get the unfocusable property. 

 const fileupload = document.querySelector('smart-file-upload');
 let unfocusable = fileupload.unfocusable;

removeUrlstring

Sets or gets the remove URL. This property corresponds to the form's action attribute. For example, the removeUrl property can point to a PHP file, which handles the remove operation on the server-side.

Default value

""
Try a demo showcasing the removeUrl property.

Example

Set the removeUrl property. 

 <smart-file-upload remove-url='localhost'></smart-file-upload>

Set the removeUrl property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.removeUrl = 'localhost/fileUpload';

Get the removeUrl property. 

 const fileupload = document.querySelector('smart-file-upload');
 let removeUrl = fileupload.removeUrl;

valueany

Gets the file upload value.

Example

Set the value property. 

 <smart-file-upload value=''></smart-file-upload>

Set the value property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.value = ;

Get the value property. 

 const fileupload = document.querySelector('smart-file-upload');
 let value = fileupload.value;

validateFilefunction | null

Callback used to validate the files immediatelly after their selection. Retuns a boolean value. If the returned value is false, the file is removed from list and a 'validationError is fired.

Example

Set the validateFile property. 

 <smart-file-upload validate-file='function(file){ if (file.size > 204800) { return false; } return true; }'></smart-file-upload>

Set the validateFile property by using the HTML Element's instance. 

 const fileupload = document.querySelector('smart-file-upload');
 fileupload.validateFile = function(file){ if (file.name.length > 255) { return false; } return true; };

Get the validateFile property. 

 const fileupload = document.querySelector('smart-file-upload');
 let validateFile = fileupload.validateFile;

Events

fileSelectedCustomEvent

This event is triggered when a file has been selected.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onFileSelected

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the selected file.
ev.detail.type - The type of the selected file.
ev.detail.size - The size of the selected file.
ev.detail.index - The index of the selected file.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the fileSelected event.

Example

Set up the event handler of fileSelected event. 

const fileupload = document.querySelector('smart-file-upload');
fileupload.addEventListener('fileSelected', function (event) {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

uploadCanceledCustomEvent

This event is triggered when a file upload operation is canceled.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadCanceled

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the canceled file.
ev.detail.type - The type of the canceled file.
ev.detail.size - The size of the canceled file.
ev.detail.index - The index of the canceled file.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadCanceled event.

Example

Set up the event handler of uploadCanceled event. 

const fileupload = document.querySelector('smart-file-upload');
fileupload.addEventListener('uploadCanceled', function (event) {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

uploadCompletedCustomEvent

This event is triggered when a file upload operation is completed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadCompleted

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the canceled file.
ev.detail.type - The type of the canceled file.
ev.detail.size - The size of the canceled file.
ev.detail.index - The index of the canceled file.
ev.detail.status - The status of the uploaded file. Whether there was an error or success.
ev.detail.serverResponse - The response of the remote server.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadCompleted event.

Example

Set up the event handler of uploadCompleted event. 

const fileupload = document.querySelector('smart-file-upload');
fileupload.addEventListener('uploadCompleted', function (event) {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index,
        status = detail.status,
        serverResponse = detail.serverResponse;

	// event handling code goes here.
})

uploadErrorCustomEvent

This event is triggered when during the file upload process something happens and upload fails.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadError

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the canceled file.
ev.detail.type - The type of the canceled file.
ev.detail.size - The size of the canceled file.
ev.detail.index - The index of the canceled file.
ev.detail.status - The status of the uploaded file. Whether there was an error or success.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadError event.

Example

Set up the event handler of uploadError event. 

const fileupload = document.querySelector('smart-file-upload');
fileupload.addEventListener('uploadError', function (event) {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index,
        status = detail.status;

	// event handling code goes here.
})

uploadPausedCustomEvent

This event is triggered when a file upload operation is paused.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadPaused

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the paused file.
ev.detail.type - The type of the paused file.
ev.detail.size - The size of the paused file.
ev.detail.index - The index of the paused file.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadPaused event.

Example

Set up the event handler of uploadPaused event. 

const fileupload = document.querySelector('smart-file-upload');
fileupload.addEventListener('uploadPaused', function (event) {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

uploadStartedCustomEvent

This event is triggered when a file upload operation is started.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadStarted

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the file that is being uploaded.
ev.detail.type - The type of the file that is being uploaded.
ev.detail.size - The size of the file that is being uploaded.
ev.detail.index - The index of the file that is being uploaded.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadStarted event.

Example

Set up the event handler of uploadStarted event. 

const fileupload = document.querySelector('smart-file-upload');
fileupload.addEventListener('uploadStarted', function (event) {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

validationErrorCustomEvent

This event is triggered if the validation of a user defined 'validateFile' callback fails.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onValidationError

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the file which validation has failed.
ev.detail.type - The type of the file which validation has failed.
ev.detail.size - The size of the file which validation has failed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the validationError event.

Example

Set up the event handler of validationError event. 

const fileupload = document.querySelector('smart-file-upload');
fileupload.addEventListener('validationError', function (event) {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size;

	// event handling code goes here.
})

Methods

browse(): void

Opens a popup to browse for a file.


Invoke the browse method.

const fileupload = document.querySelector('smart-file-upload');
fileupload.browse();

cancelAll(): void

Cancels all selected files. The files are removed from the list and their uploading is prevented.


Invoke the cancelAll method.

const fileupload = document.querySelector('smart-file-upload');
fileupload.cancelAll();

cancelFile( index: number): void

Cancels a selected file. The file is removed from the file list and it's uploading is prevented.

Arguments

indexnumber

Index of the file which will be canceled.


Invoke the cancelFile method.

const fileupload = document.querySelector('smart-file-upload');
fileupload.cancelFile("1");

pauseAll(): void

Pauses the uploading of all files. File upload is prevented but the files remain in the file list.


Invoke the pauseAll method.

const fileupload = document.querySelector('smart-file-upload');
fileupload.pauseAll();

pauseFile( id: number): void

Pauses upload of a file with particular index. File upload is prevented but file ramains in the file list.

Arguments

idnumber

Index of the file which will be paused.


Invoke the pauseFile method.

const fileupload = document.querySelector('smart-file-upload');
fileupload.pauseFile("1");

uploadAll(): void

Uploads all selected files.


Invoke the uploadAll method.

const fileupload = document.querySelector('smart-file-upload');
fileupload.uploadAll();

uploadFile( id: number): void

Uploads a selected file.

Arguments

idnumber

Index of the file which will be uploaded.


Invoke the uploadFile method.

const fileupload = document.querySelector('smart-file-upload');
fileupload.uploadFile("1");

CSS Variables

--smart-file-upload-default-widthvar()

Default value

"var(--smart-editor-width)"

Default width of the smartFileUpload

--smart-file-upload-browse-button-widthvar()

Default value

"auto"

Default width of the browse button

--smart-file-upload-browse-button-heightvar()

Default value

"auto"

Default height of the browse button

--smart-file-upload-footer-button-widthvar()

Default value

"auto"

Default height of the smartFileUpload's footer buttons

--smart-file-upload-footer-button-heightvar()

Default value

"auto"

Default height of the smartFileUpload's footer buttons

--smart-file-upload-text-content-uploading-startvar()

Default value

"'Connecting ...'"

Default text content of the pseudo element shown when upload starts.

--smart-file-upload-text-content-uploadingvar()

Default value

"'Uploading ...'"

Default text content of the pseudo element shown during the upload.

--smart-file-upload-text-content-errorvar()

Default value

"'Upload error!'"

Default text content of the pseudo element shown on error.

--smart-file-upload-text-content-pausevar()

Default value

"'Upload paused!'"

Default text content of the pseudo element shown when upload is paused.

--smart-file-upload-text-content-drop-zonevar()

Default value

"'Drag files here'"

Default text content of the pseudo element shown where is the drop zone.

--smart-file-upload-text-content-drop-zone-overvar()

Default value

"'Drop here \e824'"

Default text content of the pseudo element shown when dragged files are over the drop zone.

--smart-file-upload-container-min-heightvar()

Default value

"60px"

Sets minimmum height of the drop zone and file zone containers.

--smart-file-upload-total-files-min-heightvar()

Default value

"20px"

Sets min height of the container where total numbers of items is displayed.