Getting Started

7 Jun 20234 minutes to read

The following section is briefly explain the things to get started with FileExplorer control.

Preparing the HTML document

Create a new HTML file and include the below code:

  • HTML
  • <!DOCTYPE html>
    
        <html xmlns="http://www.w3.org/1999/xhtml">
    
        <head>
    
            <meta charset="utf-8">
    
            <title> </title>
    
        </head>
    
        <body>
    
        </body>
    
        </html>

    Adding the references

    To include the control in the application the following references need to be added:

    • CSS references
    • Script references

    CSS references

    Add the below CSS reference in the head section, for the default theme

  • JAVASCRIPT
  • <link rel="stylesheet" href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" /><br /><br />

    NOTE

    Essential JS widgets having the support for 13 built-in themes, to know more please check here

    Script references

    The external script dependencies of the FileExplorer widget are,

    And the internal script dependencies of the FileExplorer widget are:

    File Description/Usage
    ej.core.min.js

    Must be referred always before using all the JS controls.

    ej.data.min.js

    Used to handle data operation and should be used while binding data to JS controls.

    ej. draggable.min.js

    Used to handle the drag and drop functionality

    ej.scroller.min.js

    Used to show the scroller in the layout area

    ej.button.min.js

    Used to display the buttons in the toolbar

    ej.treeview.min.js

    Used to display the treeview in the navigation pane

    ej.uploadbox.min.js

    Used to perform the upload functionality

    ej.waitingpopup.min.js

    Used to showcase the waiting popup

    ej.dialog.min.js

    Used to create the alert windows

    ej.splitter.min.js

    Used as the body section to separate the navigation and layout area

    ej.toolbar.min.js

    Used to showcase the hearer section

    ej.menu.min.js

    Used to showcase the context menu

    ej.grid.min.js

    Used to showcase the grid layout view

    For getting started you can use the “ej.web.all.min.js” file, which encapsulates all the ej controls and frameworks in one single file.

    So you can add the below Script references in the head section:

  • JAVASCRIPT
  • <!--External script references-->
    
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    
        <!--Internal script references-->
    
        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>

    NOTE

    The above Script and CSS references uses the CDN links. In case if you need to refer the local files then you can copy the corresponding files from the installed location and can include into your application directory

    NOTE

    In production we recommend you to use our Custom script generator to create custom script file with required controls and its dependencies only]

    Adding the control element

    The control can be created from a div element. So you can add the div element into your page at where you want to render the FileExplorer.

  • HTML
  • <div id="fileExplorer"></div>

    Initialize and configure the control

    Once added the element you can initialize the control from the script section like below:

  • JAVASCRIPT
  • $(function () {
    
                var fileSystemPath = "http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/";
    
                var ajaxActionHandler = "http://js.syncfusion.com/demos/ejServices/api/FileExplorer/FileOperations";
    
                $("#fileExplorer").ejFileExplorer({
    
                    path: fileSystemPath,
    
                    ajaxAction: ajaxActionHandler
    
                });
    
            });

    Here path and ajaxAction are the mandatory configuration to showcase the FileExplorer control.

    <table>
        <tr>
            <td>
                N> As you know FileExplorer is a client side control but it depends on the server side actions. So in JavaScript to handle the server side actions we are using the Web API service and it was hosted in our server.<br /><br />
            </td>
        </tr>
    </table>
    

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

    Once you have completed the above steps, you get an output like below