Getting Started

31 Mar 20171 minute to read

Using the following steps, you can create a React FileExplorer component. The basic rendering of React FileExplorer is achieved with default functionality.

Create an FileExplorer

You can create a React application and add necessary scripts and styles with the help of the given React Getting Started Documentation.

Create a JSX file for rendering FileExplorer component using <EJ.FileExplorer> syntax. Add required properties to it in <EJ.FileExplorer> tag element

JS

var localServ, ajaxDataType;
localServ = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations"
var browname = /MSIE 8.0/i.test(window.navigator.userAgent) || /MSIE 9.0/i.test(window.navigator.userAgent) ? true : false;
if (browname)
{
    localServ = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations";
    ajaxDataType =  "jsonp" ;
}
var path =  "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/";
ReactDOM.render(
	<EJ.FileExplorer ajaxDataType={ajaxDataType} ajaxAction={localServ} isResponsive={true} width="100%" minWidth= "150px" fileTypes= "*.png, *.gif, *.jpg, *.jpeg, *.docx" layout= "tile" path= {path} >
	</EJ.FileExplorer>,
	document.getElementById('fileexplorer')
);

To perform the server side actions using local web API service, please refer the link.

Define an HTML element for adding FileExplorer in the application and refer the JSX file.

HTML

<div id="fileexplorer"></div>
<script type="text/babel" src="fileexplorer.jsx"></script>

Run the above code to render the following output.

NOTE

You can find the FileExplorer properties from the API reference document