React UI Components Documentation

Sets or gets the autoUpload property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} autoUpload={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the accept property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} accept={'image/*'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the browseTemplate property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} browseTemplate={'primary'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the cancelTemplate property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} cancelTemplate={'danger'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the fileInputName property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} fileInputName={'input'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} height={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the localization property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} localization={localization}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the multipleFilesUpload property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} multipleFilesUpload={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderFiles property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} renderFiles={renderFiles}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the uploadUrl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} uploadUrl={'upload.php'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the uploadTemplate property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'} uploadTemplate={'warning'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the remove event of jqxFileUpload.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.on('remove', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a file has been selected.

Code examples

Bind to the select event of jqxFileUpload.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.on('select', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the uploadStart event of jqxFileUpload.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.on('uploadStart', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the uploadEnd event of jqxFileUpload.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.on('uploadEnd', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.browse();
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.cancelFile();
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.cancelAll();
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.destroy();
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.render();
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.refresh();
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.uploadFile(0);
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFileUpload.uploadAll();
    }

    render() {              
        return (
            <JqxFileUpload ref='myFileUpload'
                width={300} uploadUrl={'imageUpload.php'} fileInputName={'fileToUpload'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));