Properties

NameTypeDefault
autoUpload Boolean false

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'));
accept String null

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'));
browseTemplate String ''

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'));
cancelTemplate String ''

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'));
disabled Boolean false

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'));
fileInputName String ''

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'));
height Number 'auto'

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'));
localization Object null

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'));
multipleFilesUpload Boolean true

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'));
renderFiles function null

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'));
rtl Boolean false

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'));
theme String ''

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'));
uploadUrl String ''

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'));
uploadTemplate String ''

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'));
width Number null

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'));

Events

remove Event

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'));
select Event

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'));
uploadStart Event

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'));
uploadEnd Event

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'));

Methods

NameReturn Type
browse None 
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'));
cancelFile None 
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'));
cancelAll None 
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'));
destroy None 
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'));
render None 
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'));
refresh None 
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'));
uploadFile None 
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'));
uploadAll None 
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'));