React UI Components Documentation

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

'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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

'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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the jqxFileUpload.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxFileUpload's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        localization: { browseButton: 'Blättern', uploadButton: 'Laden Sie alle', cancelButton: 'alle Abbrechen', uploadFileTooltip: 'Datei hochladen', cancelFileTooltip: 'aufheben' }
    }
  }  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

A callback function used for rendering the file selection rows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      renderFiles: (fileName: string): any => {
        return fileName.toUpperCase();
      }
    }
  }  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 = "COLOR: #a24; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; CLEAR: both; MARGIN: 0px; PADDING-RIGHT: 0px">"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 image
if(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 exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($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 error
if ($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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

'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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxFileUpload's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the remove event of jqxFileUpload.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
 
  private onRemove(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a file has been selected.

Code examples

Bind to the select event of jqxFileUpload.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
 
  private onSelect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the uploadStart event of jqxFileUpload.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
 
  private onUploadStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the uploadEnd event of jqxFileUpload.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();  
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
 
  private onUploadEnd(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Browses for a file.

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

Cancels a selected file.

Cancels all selected files.

Destroys the jqxFileUpload.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();
 
  public componentDidMount(): void {
    this.myFileUpload.current!.destroy();
  }
   
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();
 
  public componentDidMount(): void {
    this.myFileUpload.current!.render();
  }
   
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
 
class App extends React.PureComponent<{}, IFileUploadProps> {
  private myFileUpload = React.createRef<JqxFileUpload>();
 
  public componentDidMount(): void {
    this.myFileUpload.current!.refresh();
  }
   
  
  public render() {
    return (
      <div>
            <p>Note: to be able to upload a file you would have to set the property uploadUrl to point to a file hosted on your server, which handles the upload process.</p>
            <JqxFileUpload ref="myFileUpload" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Uploads a selected file.

Uploads all selected files.