Introducing New JavaScript File Manager Control

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

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

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 details view

File Manager with large icons 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

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

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:

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

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

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

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

Image preview option in File Manager

Layout customization

File Manager allows you to customize the layout as you like.

Customized layout in File Manager

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 forumDirect-Trac, or Feedback Portal. We are happy to assist you!

Tags:

Share this post:

Related Posts

Leave a comment