Custom Elements Documentation

Properties

autoUpload

boolean

false

Sets or gets the autoUpload property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   autoUpload:true, theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

string

null

Sets or gets the accept property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   accept:"image/*", theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

browseTemplate

string

Sets or gets the browseTemplate property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   browseTemplate:"primary", theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

cancelTemplate

string

Sets or gets the cancelTemplate property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   cancelTemplate:"danger", theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

disabled

boolean

false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   disabled:true, theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

fileInputName

string

Sets or gets the fileInputName property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   fileInputName:"input", theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

height

number

'auto'

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   height:150, theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

localization

object

null

Sets or gets the localization property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		    localization:localization, theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

multipleFilesUpload

boolean

true

Sets or gets the multipleFilesUpload property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   multipleFilesUpload:true, theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

renderFiles

function

null

Sets or gets the renderFiles property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   renderFiles:"renderFiles", theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

rtl

boolean

false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   rtl:true, theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

theme

string

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

uploadUrl

string

Sets or gets the uploadUrl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   uploadUrl:"upload.php", theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

uploadTemplate

string

Sets or gets the uploadTemplate property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   uploadTemplate:"warning", theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

width

number

null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		   theme:"light"       }    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

remove

Event

Code examples

Bind to the remove event of jqxFileUpload.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").addEventListener("remove", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

select

Event

Code examples

Bind to the select event of jqxFileUpload.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").addEventListener("select", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

uploadStart

Event

Code examples

Bind to the uploadStart event of jqxFileUpload.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").addEventListener("uploadStart", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

uploadEnd

Event

Code examples

Bind to the uploadEnd event of jqxFileUpload.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").addEventListener("uploadEnd", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

browse

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").browse();								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

cancelFile

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").cancelFile();								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

cancelAll

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").cancelAll();								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

destroy

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").destroy();								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

render

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").render();								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

refresh

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").refresh();								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

uploadFile

Method

Parameter	Type	Description
fileIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").uploadFile(0);								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

uploadAll

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FileUpload Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxfileupload.js"></script>    <script>       JQXElements.settings["expanderSettings"] =       {		          }	window.onload = function() {		document.querySelector("jqx-file-upload").uploadAll();								}    </script></head><body>   <jqx-file-upload settings="expanderSettings"></jqx-file-upload></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods