ReactJS FileUpload Component

The FileUpload component for ReactJS can be used for uploading file(s) to a server.

Prerequisites

Refer to ReactJS Getting Started before you start with this help topic.

Configuration

The FileUpload component for ReactJS requires the following imports.

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFileUpload from 'jqwidgets-react/react_jqxfileupload.js';
 

Then we create our component class. Properties and methods are put as ReactJS props.

  
class App extends React.Component {
  render () {
    return (
        <JqxFileUpload width={300} height={100} />
    )
  }
}
 

Finally we render our class in the desired HTML element:

 
ReactDOM.render(<App />, document.getElementById('app'));
 

Events Methods & Properties

In order to bind to any event, change any property or call any method, we need a reference to the component.
For that we use the ReactJS "ref" Callback Attribute:

 
<JqxFileUpload ref='myFileUpload' width={300} height={100}..... />
 

Now, when we have a reference, we need to call the desired event/property/method.
This is done in the componentDidMount() ReactJS Component Lifecycle method.

Events

The uploadEnd event is triggered when a file upload operation has ended.

The following example demonstrates how to add an event listener:

Methods & Properties

This is how you call methods & props:

  
//Methods
this.refs.myFileUpload.uploadFile(1);
 
//Get Properties
let height = this.refs.myFileUpload.height();
 
//Set Properties
this.refs.myFileUpload.height(50);
  

Every component have a method setOptions which accepts a object as an argument. This object contains component settings.

 
this.refs.myFileUpload.setOptions({
    cancelTemplate: 'inverse', width: 250, height: 30
})
 

Every component also have a method getOptions which returns a object containing the component settings.

FileUpload Examples

Overview

The following example demonstrates how to create a FileUpload component.

Disabled FileUpload

The following example demonstrates how to disable the FileUpload component.

FileUpload API