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.
File Manager UI design
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 option
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.
Left tree view for navigation
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.
Quick access menu
This is a context menu option for performing operations on right-clicking over the files file data view.
Layout
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
Adaptive design
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.
Existing features
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:
- File operations
- Multiple selections
- File system providers
- Dragging and dropping of files
- File access control
- Sorting
- Image preview
- Layout customization
File operations
The File Manager control performs all the usual file operations: create, delete, cut, copy, paste, rename, upload, and download files and folders.
Multiple selections
File Manager allows you to select multiple files to perform applicable file operations on.
Multiple files selected in File Manager
File system providers
The built-in file system providers will help you easily manage these popular cloud and database file systems:
- Physical file system provider
- Azure file system provider
- Google drive file system provider
- SQL server database file system provider
- Node JS file system provider
Dragging and dropping files
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
File access control
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.
Sorting the files
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
Image preview
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
Layout customization
File Manager allows you to customize the layout as you like.
Customized layout in File Manager
Upcoming features
You can expect the following features in the File Manager control in the upcoming release:
- Virtual scrolling
- Pagination
Supported platforms
The following platforms support File Manager control:
Conclusion
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!
