We are happy to introduce the new File Manager control in our Essential JS 2 suite.
The File Manager component is a Windows-like file explorer that allows the end user to efficiently manage, browse, and upload files on the client-side of your web server.
JavaScript File Manager Control
The Essential JS 2 suite has a huge set of controls and those controls possess common web standards and functionalities such as web accessibility, right-to-left rendering, keyboard interaction, modular architecture, and responsiveness, with touch-friendly and lightweight UIs. Now the File Manager is included in this suite with all the common JS 2 features as well as control-specific features.
This blog will provide a walk-through on the new File Manager control, its UI designs, its available features, and the platforms it supports.
We designed the File Manager UI to be flexible and allow users to customize all its features. This is the design of the File Manager and a list of its interactive features.
File Manager UI design
Toolbar at the top possesses all the action buttons to perform file managing operations: create, cut, copy, paste, upload, download, rename, and delete folders and files.
From the root file directory, the files are listed in tree structure (hierarchical structure) with expand and collapse options like in Windows File Explorer. This is used as a quick access to the files in the nested levels.
This is a context menu option for performing operations on right-clicking over the files file data view.
Files and folders are shown in a details view or large icons view for quick management.
File Manager with details view
File Manager with large icons view
The File Manager control is designed for easy interaction in all devices with its responsive and adaptive layout design. In small devices, the File Manager adapts by changing its UI for hassle-free interaction.
The features of the File Manager control are implemented with the 80/20 rule. This will cover the major portion of business needs for managing a file system in a web browser efficiently. The following are the features available in File Manager:
The File Manager control performs all the usual file operations: create, delete, cut, copy, paste, rename, upload, and download files and folders.
File Manager allows you to select multiple files to perform applicable file operations on.
Multiple files selected in File Manager
The built-in file system providers will help you easily manage these popular cloud and database file systems:
Drag and drop support allows you to move folders and files from one folder to another folder by dragging and dropping them.
Drag and drop files in File Manager
The File Manager provides methods to grant or restrict access rights to specific users and groups of users. You can define access permissions for folders and files using a set of access rules for them. By doing this, you can authorize people to read, write, delete, and upload files.
These access rules are validated on the server-side, so it will be more secure.
Access rule applied in File Manager
In the previous screenshot, access permission is provided to the documentation user so only the documents folder can be accessed and the remaining folders are restricted.
You can sort the files and folder in the file system in either ascending or descending order by simply clicking on the column header. You can also sort files and folders based on name, date created, size, etc.
Sorted files in File Manager
You can preview an image by double-clicking it, which opens the image in a dialog window. The previewed image can be magnified by resizing the dialog box.
Image preview option in File Manager
File Manager allows you to customize the layout as you like.
Customized layout in File Manager
You can expect the following features in the File Manager control in the upcoming release:
The following platforms support File Manager control:
We hope that you now have a better idea of the File Manager control and its features. If you would like to try them out, you can download our free trial. You can visit the File Manager source code on GitHub and check our samples browser and documentation for detailed explanations if you want to explore further applications.
If you have any questions or require clarification for these controls, please let us know in the comments below. You can also contact us through our support forum, Direct-Trac, or Feedback Portal. We are happy to assist you!