FEx - File Explorer Widget

• Download demo
• Download source

Introduction

The FEx (File Explorer) is a simple jQuery widget for document management. It has the following features in it:

• Simple and easily customizable
• Light weight and JSON driven
• Suitable for mobiles and tablets
• Managing files with ease steps
• MVC ready

This widget has three sections, viz, Directory/Folder section(I), Folder/Document section(II) and Document details section(III). The data in the II section depends on the selection of the I section and the III section is dependent on the selection of the II section.

We will go through how to implement it in the ASP.NET MVC.

Using the Code

Following are the Options Available in the Widget

Creating a Basic Widget

filesSrc takes the source URL which returns JSON result of the files. data is the parameter to be passed for the action. rootPath is the root path of the files directory.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/"
});

Setting the Date Format

Date format to be displayed can be set using format option.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   dateFormat: "d/mm/yy"
});

Setting Actions for the File Management

Using FEx, we can do various file management activities like Rename, Move, New Folder, Delete and Add Files.

Rename

A file can be renamed by either selecting the folder in the directory field or files/folders in the folders field by clicking the rename menu. The precedence will be taken to the folder field selection. Escape key will cancel the action.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   updateAction: {
   renameUrl: "/FExDemo/UpdateFolder"
   }
});

New Folder

New folder can be created in the root directory or in a particular folder by selecting the appropriate one. If none is selected, the folder will be created in the root directory. Escape key will cancel the action.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   updateAction: {
   createFolderUrl: '/FExDemo/UpdateFolder',}
});

Delete

Files or folders can be deleted using Delete menu option. This is similar to New Folder selection pattern.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   updateAction: {
   deleteUrl: '/FExDemo/UpdateFolder',
   },
});

Move

Files or folders can be moved to a particular folder. Move functionality is in drag and drop manner. Target will be either the same directory or a different directory.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   updateAction: {
   moveUrl: '/FExDemo/UpdateFolder'
   }
});

Add Files

Files can be added to the selected folders using Add Files menu option. Files can also be added via drag and drop option.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   updateAction: {
   moveUrl: '/FExDemo/UpdateFolder'
   }
});

Handlers

On Load Start Handler

This handler is useful for data binding/modification on ajax post. This has single argument which is options of the FEx.

On Load End Handler

This handler will be called once the data is returned from the server. This has a single argument which is records from the server.

Validate Data Handler

This handler will be called once the folder is clicked in the directory/folder section.

Document Info Handler

This handler will be called once the Document/Folder is selected in the Folder/Document grid. This takes three arguments htmlobject, selected item and options. Using the htmlObject, we can modify the content of the section.

On Action Start Handler

This event will be called when update/rename/move/new folder creation/new file added in the FEx. It provides the data to be posted and the type of action to be performed.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   updateAction: {
     renameUrl: '/FExDemo/UpdateFolder',
     deleteUrl: '/FExDemo/UpdateFolder',
     moveUrl: '/FExDemo/UpdateFolder',
     createFolderUrl: '/FExDemo/UpdateFolder',
     addFile: '/FExDemo/SaveFile'
   },
   validateGridData: function (records) {
                    ////return the modified records
   },
    onLoadStart: function (options) {
                    ////return the modified options
                },
    onLoadEnd: function (records) {
                    ////return the modified records
                },
    documentInfoHandler: function (options,selectedData, htmlObject) {
                    ////return the modified htmlObject
                },
    onActionStart: function (actionType, postData) {
                    ////return the modified postData 
    },
});

Mobile/Tablet Compatibility

Layout of the widget changes based on the resolution of the screen. Currently, FEx has one break point in the CSS (greater/lesser than 720px ). Customization can be done based on the requirement.

Customizing the Grid

The grid in the folder section can be customized using the gridTemplate. This object takes the entityName we are going to bind, title to be displayed and the updatable column.

$('#myContainer').FEx({
                filesSrc: "/FExDemo/GetFolderTree",
                data: { path: "F:/" },
                rootPath: "F:/",                
                gridTemplate: {
                    Format: {
                        title:"File Type"
                    },
                     Name: {
                        title: "Name",updatable:true
                    },
                    LastModifiedDate: {
                        title: "Modified Date",
                        format:true
                    }
                } });

Sorting

Folder/Directory Sort

Folder sort will be done using the sort by menu option available in the top of the directory section. We can set the sortable items using the directorySort template.

$("#myContainer").FEx({ 
   filesSrc: "/FExDemo/GetFolderTree",
   data: { path: "F:/" },
   rootPath: "F:/",
   directorySort: {
                    Name: {
                        title:"File Name"
                    },
                    LastModifiedDate: {
                        title:"Modified Date"
                    }
                }});

Folder/Document Sort

Sort in this section happens simply by clicking the header column of the grid.

Setting Data Members

Property names of the files can be set using the dataMember property:

 //Data members(Properties) for binding should be defined if it is other than the below specified names
dataMember: {
                   Path: 'Path',//File path - acts as the unique value to traverse in the tree
                   Name: 'Name',//File or folder name to be displayed
                   Childs: 'Childs',//files in the folders / Child collections
                   Type: 'Type'//type of the file to display the icon
               }

Sample Code

$(document).ready(function () {
            $('#myContainer').FEx({
                filesSrc: "/FExDemo/GetFolderTree",
                data: { path: "F:/" },
                rootPath: "F:/",
                
                onLoadStart: function (options) {
                    //
                },
                onLoadEnd: function (records) {
                    //
                },
                validateGridData: function (records) {
                    //
                },
                documentInfoHandler: function (options,selectedData, htmlObject) {
                    //
                },
                onActionStart: function (actionType, postData) {
                    //
                },
                dateFormat: 'd-mm-yy',
                updateAction: {
                    renameUrl: '/FExDemo/UpdateFolder',
                    deleteUrl: '/FExDemo/UpdateFolder',
                    moveUrl: '/FExDemo/UpdateFolder',
                    createFolderUrl: '/FExDemo/UpdateFolder',
                    addFile: '/FExDemo/SaveFile'
                },
                setDynamicHeight: true,
                directorySort: {
                    Name: {
                        title:"File Name"
                    },
                    LastModifiedDate: {
                        title:"Modified Date"
                    }
                },
                gridTemplate: {
                    Format: {
                        title:"File Type"
                    },
                     Name: {
                        title: "Name",updatable:true
                    },
                    LastModifiedDate: {
                        title: "Modified Date",
                        format:true
                    }
                },
                dataMember: {
                    Path: 'Path',//File path acts as the unique value to traverse in the tree
                    Name: 'Name',//File or folder name to be displayed
                    Childs: 'Childs',//files in the folders / Child collections
                    Type: 'Type'//type of the file to display the icon
                }
            });
        });

Points of Interest

Learnt how to create a widget using the jQuery, some cute CSS3 functionalities and JavaScript pattern differences.

Dependencies and Known Issues

Dependencies

• jQuery
• jQuery-UI
• JSLINQ

Known Issues

• Renaming the folder with .(Dot) in it.
• Updating the folder/file inside the folder of the same name.

History

• 16^th February 2015: Added dataMember property and updated the demo content and error fix in it