This tutorial will show you the basics of how to get started with the jQWidgets FileUpload React Component.
Refer to Getting Started with React before you start with this help topic.
I. Imports:
import * as React from 'react'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import 'jqwidgets-scripts/jqwidgets/styles/jqx.material-purple.css';import JqxFileUpload, { IFileUploadProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxfileupload';
II. Class:
class App extends React.PureComponent<{}, IFileUploadProps> { constructor(props: {}) { super(props); this.state = { width: '100%' // Other Widget Props } } render() { return ( <JqxFileUpload width={this.state.width} height={"100%"} ..... /> ) }}
III. Render:
ReactDOM.render(<App />, document.getElementById('app'));
The event names in React are constructed of the original event names starting with capital letter plus on upfront:
class App extends React.PureComponent<{}, IFileUploadProps> { constructor(props: {}) { super(props); this.state = { width: '100%' // Other Widget Props } } render() { return ( <JqxFileUpload onNameOfEvent={this.handleEvent} width={this.state.width} height={"100%"} ..... /> ) } private handleEvent(e: Event): void { // Do Something ... }}
This is how you call methods & props:
Every component have a method setOptions which accepts a object as an argument. This object contains component settings.
Every component also have a method getOptions which returns the value of the requested option.
API Reference of the jQWidgets FileUpload React Component: FileUpload API
Demos Reference of the jQwidgets FileUpload React Component: FileUpload Demos