## Properties

Name | Type | Default
--- | --- | ---
autoUpload | Boolean | false

Sets or gets whether files will be automatically uploaded when selected.

#### Code example

Set the `autoUpload` property.

    $('#jqxFileUpload').jqxFileUpload({ autoUpload: true });

Get the `autoUpload` property.

    var autoUpload = $('#jqxFileUpload').jqxFileUpload('autoUpload');

Try it: autoUpload is set to true

accept | String | null

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

Possible values:

    any file extension, for example: '.gif', '.jpg', '.png', '.doc', etc.

    'audio/*' - all sound files are accepted.

    'video/*' - all video files are accepted.

    'image/*' - all image files are accepted.

    any valid media type. For a list, please refer to IANA Media Types.

#### Code example

Set the `accept` property.

    $('#jqxFileUpload').jqxFileUpload({ accept: 'image/*' });

Get the `accept` property.

    var accept = $('#jqxFileUpload').jqxFileUpload('accept');

Try it: accept is set to 'image/*'

browseTemplate | String | ''

Sets or gets the template applied to the 'Browse' button.

Possible Values:

    'default' - the default button's template. The button's style depends only on the 'theme' property value.

    'primary' - dark blue button for extra visual weight.

    'success' - green button for successful or positive action.

    'warning' - orange button which indicates caution.

    'danger' - red button which indicates a dangerous or negative action.

    'inverse' - dark gray button, not tied to a semantic action or use.

    'info' - blue button, not tied to a semantic action or use.

    'link' - making it look like a link.

#### Code example

Set the `browseTemplate` property.

    $('#jqxFileUpload').jqxFileUpload({ browseTemplate: 'success' });

Get the `autoUpload` property.

    var browseTemplate = $('#jqxFileUpload').jqxFileUpload('browseTemplate');

Try it: browseTemplate is set to 'primary'

cancelTemplate | String | ''

Sets or gets the template applied to the 'Cancel All' button.

Possible Values:

    'default' - the default button's template. The button's style depends only on the 'theme' property value.

    'primary' - dark blue button for extra visual weight.

    'success' - green button for successful or positive action.

    'warning' - orange button which indicates caution.

    'danger' - red button which indicates a dangerous or negative action.

    'inverse' - dark gray button, not tied to a semantic action or use.

    'info' - blue button, not tied to a semantic action or use.

    'link' - making it look like a link.

#### Code example

Set the `cancelTemplate` property.

    $('#jqxFileUpload').jqxFileUpload({ cancelTemplate: 'inverse' });

Get the `cancelTemplate` property.

    var cancelTemplate = $('#jqxFileUpload').jqxFileUpload('cancelTemplate');

Try it: cancelTemplate is set to 'danger'

disabled | Boolean | false

Enables or disables the jqxFileUpload.

#### Code examples

Set the `disabled` property.

    $('#jqxFileUpload').jqxFileUpload({ disabled: false });

Get the `disabled` property.

    var disabled = $('#jqxFileUpload').jqxFileUpload('disabled');

Try it: disabled is set to true

fileInputName | String | ''

Sets or gets the `name` attribute of the hidden file input which is submitted to the URL specified by the `uploadUrl` property. This name is applied to the file input of the file about to be uploaded and after the upload the name attribute is removed so that it can be set to the next hidden file input (if any). As a result, there is only one file input with this name attribute at a time.

#### Code example

Set the `fileInputName` property.

    $('#jqxFileUpload').jqxFileUpload({ fileInputName: 'fileToUpload' });

Get the `fileInputName` property.

    var fileInputName = $('#jqxFileUpload').jqxFileUpload('fileInputName');

Try it: fileInputName is set to a custom string

height | Number/String | 'auto'

Sets or gets the jqxFileUpload's height.

#### Code examples

Set the `height` property.

    $('#jqxFileUpload').jqxFileUpload({ height: '150px' });

Get the `height` property.

    var height = $('#jqxFileUpload').jqxFileUpload('height');

Try it: height is set to 150

localization | Object | null

Sets the various text values used in the widget. Useful for localization.

The localization object has the following fields:

    browseButton - sets the text of the 'Browse' button.

    uploadButton - sets the text of the 'Upload All' button.

    cancelButton - sets the text of the 'Cancel All' button.

    uploadFileTooltip - sets the text of the 'Upload File' tooltip.

    cancelFileTooltip - sets the text of the 'Cancel' tooltip.

#### Code example

Set the `localization` property.

    $('#jqxFileUpload').jqxFileUpload({ localization: { browseButton: 'Blättern', uploadButton: 'Laden Sie alle', cancelButton: 'alle Abbrechen', uploadFileTooltip: 'Datei hochladen', cancelFileTooltip: 'aufheben' } });

Get the `localization` property.

    var localization = $('#jqxFileUpload').jqxFileUpload('localization');

Try it: localization is set to a custom object.

multipleFilesUpload | Boolean | true

Sets or gets whether multiple files selection and upload are allowed.

#### Code example

Set the `multipleFilesUpload` property.

    $('#jqxFileUpload').jqxFileUpload({ multipleFilesUpload: false });

Get the `multipleFilesUpload` property.

    var multipleFilesUpload = $('#jqxFileUpload').jqxFileUpload('multipleFilesUpload');

Try it: multipleFilesUpload is set to false

renderFiles | function | null

A callback function used for rendering the file selection rows.

#### Code example

Set the `renderFiles` property.

    $('#jqxFileUpload').jqxFileUpload({ width: 300, uploadUrl: 'upload.php', fileInputName: 'fileToUpload',
        renderFiles: function (fileName) {
            var stopIndex = fileName.indexOf('.');
            var name = fileName.slice(0, stopIndex);
            var extension = fileName.slice(stopIndex);
            return name + '<strong>' + extension + '</strong>';
        }
    });

Get the `renderFiles` property.

    var renderFiles = $('#jqxFileUpload').jqxFileUpload('renderFiles');

Try it: renderFiles is set to a custom function

rtl | Boolean | false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

#### Code example

Set the `rtl` property.

    $('#jqxFileUpload').jqxFileUpload({ rtl : true });

Get the `rtl` property.

    var rtl = $('#jqxFileUpload').jqxFileUpload('rtl');

Try it: rtl is set to true

theme | String | ''

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

- Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

                                                                                              <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

- Set the widget's theme property to 'energyblue' when you initialize it.

Try it: theme is set to 'energyblue'

uploadUrl | String | ''

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 to handle the upload operation server-side. Here is a sample PHP file that allows only images no larger than 500 kB to be uploaded to the server:

    <?php$target_dir = "uploads/";$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);$uploadOk = 1;$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);// Check if image file is a actual image or fake imageif(isset($_POST["submit"])) {    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);    if($check !== false) {        echo "File is an image - " . $check["mime"] . ".";        $uploadOk = 1;    } else {        echo "File is not an image.";        $uploadOk = 0;    }}// Check if file already existsif (file_exists($target_file)) {    echo "Sorry, file already exists.";    $uploadOk = 0;}// Check file sizeif ($_FILES["fileToUpload"]["size"] > 500000) {    echo "Sorry, your file is too large.";    $uploadOk = 0;}// Allow certain file formatsif($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"&& $imageFileType != "gif" ) {    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";    $uploadOk = 0;}// Check if $uploadOk is set to 0 by an errorif ($uploadOk == 0) {    echo "Sorry, your file was not uploaded.";// if everything is ok, try to upload file} else {    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";    } else {        echo "Sorry, there was an error uploading your file.";    }}?>

A few notes about file uploads in PHP:

Many shared hosting servers allow a very low maximum file upload size. If you plan on accepting larger files, you should consider a dedicated or virtual dedicated server. To adjust the file upload size in PHP, modify the php.ini file's "upload_max_filesize" value. You can also adjust this value using PHP's .ini_set() function. The file upload counts towards the hosting environment's $_POST size, so you may need to increase the php.ini file's post_max_size value. Be sure to do a lot of file validation when allowing users to upload files. How horrible would it be to allow a user to upload a .exe file to your server? They could do horrible things on the server.

#### Code example

Set the `uploadUrl` property.

    $('#jqxFileUpload').jqxFileUpload({ uploadUrl: 'upload.php' });

Get the `uploadUrl` property.

    var uploadUrl = $('#jqxFileUpload').jqxFileUpload('uploadUrl');

Try it: uploadUrl is set to a custom string.

uploadTemplate | String | ''

Sets or gets the template applied to the 'Upload All' button.

Possible Values:

    'default' - the default button's template. The button's style depends only on the 'theme' property value.

    'primary' - dark blue button for extra visual weight.

    'success' - green button for successful or positive action.

    'warning' - orange button which indicates caution.

    'danger' - red button which indicates a dangerous or negative action.

    'inverse' - dark gray button, not tied to a semantic action or use.

    'info' - blue button, not tied to a semantic action or use.

    'link' - making it look like a link.

#### Code example

Set the `uploadTemplate` property.

    $('#jqxFileUpload').jqxFileUpload({ uploadTemplate: 'primary' });

Get the `uploadTemplate` property.

    var uploadTemplate = $('#jqxFileUpload').jqxFileUpload('uploadTemplate');

Try it: uploadTemplate is set to 'warning'

width | Number/String | null

Sets or gets the jqxFileUpload's width.

#### Code examples

Set the `width` property.

    $('#jqxFileUpload').jqxFileUpload({ width: 300 });

Get the `width` property.

    var width = $('#jqxFileUpload').jqxFileUpload('width');

Try it: width is set to 400

## Events

remove | Event |

This event is triggered when a file row has been removed.

#### Code examples

Bind to the `remove` event by type: jqxFileUpload.

    $('#jqxFileUpload').on('remove', function (event) {
        var fileName = event.args.file;
        // Your code here.
    });

Try it: Bind to the remove event by type: jqxFileUpload.

select | Event |

This event is triggered when a file has been selected.

#### Code examples

Bind to the `select` event by type: jqxFileUpload.

    $('#jqxFileUpload').on('select', function (event) {
        var args = event.args;
        var fileName = args.file;
        var fileSize = args.size; // Note: Internet Explorer 9 and earlier do not support getting the file size.
        // Your code here.
    });

Try it: Bind to the select event by type: jqxFileUpload.

uploadStart | Event |

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

#### Code examples

Bind to the `uploadStart` event by type: jqxFileUpload.

    $('#jqxFileUpload').on('uploadStart', function (event) {
        var fileName = event.args.file;
        // Your code here.
    });

Try it: Bind to the uploadStart event by type: jqxFileUpload.

uploadEnd | Event |

This event is triggered when a file upload operation has ended.

#### Code examples

Bind to the `uploadEnd` event by type: jqxFileUpload.

    $('#jqxFileUpload').on('uploadEnd', function (event) {
        var args = event.args;
        var fileName = args.file;
        var serverResponce = args.response;
        // Your code here.
    });

Try it: Bind to the uploadEnd event by type: jqxFileUpload.

## Methods

browse | Method |

Browses for a file.

Note: due to browser restrictions, this method would not work on Internet Explorer 9 or earlier.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `browse` method.

    $('#jqxFileUpload').jqxFileUpload('browse');

Try it: browse for a file

cancelFile | Method |

Cancels a selected file.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `cancelFile` method.

    // @param int. The expected parameter is the file index.

    $('#jqxFileUpload').jqxFileUpload('cancelFile', 3);

Try it: cancel a file

cancelAll | Method |

Cancels all selected files.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `cancelAll` method.

    $('#jqxFileUpload').jqxFileUpload('cancelAll');

Try it: cancel all files

destroy | Method |

Destroys the jqxFileUpload.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

    $('#jqxFileUpload').jqxFileUpload('destroy');

Try it: destroy the jqxFileUpload

render | Method |

Renders the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `render` method.

    $('#jqxFileUpload').jqxFileUpload('render');

Try it: render the jqxFileUpload

refresh | Method |

Refreshes the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `refresh` method.

    $('#jqxFileUpload').jqxFileUpload('refresh');

Try it: refresh the jqxFileUpload

uploadFile | Method |

Uploads a selected file.

Parameter | Type | Description
--- | --- | ---
fileIndex | Number |

Return Value
None

#### Code examples

Invoke the `uploadFile` method.

    // @param int. The expected parameter is the file index.

    $('#jqxFileUpload').jqxFileUpload('uploadFile', 1);

Try it: upload a file

uploadAll | Method |

Uploads all selected files.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `uploadAll` method.

    $('#jqxFileUpload').jqxFileUpload('uploadAll');

Try it: upload all files