Introducing New JavaScript File Manager Control
Tags: angular, javascript, webdev, productivity
Published: 2019-09-09 11:07:59

---
title: Introducing New JavaScript File Manager Control
published: true
tags: angular, javascript, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/introducing-new-javascript-file-manager-control.aspx
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2706bptxyzxw3vcjmjt8.png
---
We are happy to introduce the new [File Manager control](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) 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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/JavaScript-File-Manager-Control.png)

<figcaption>JavaScript File Manager Control</figcaption>

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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/File-Manager-UI-design.png)

<figcaption>File Manager UI design</figcaption>

### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/File-Manager-with-details-view.png)

<figcaption>File Manager with details view</figcaption>

![File Manager with large icons view](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/File-Manager-with-large-icons-view.png)

<figcaption>File Manager with large icons view</figcaption>

### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/Multiple-files-selected-in-File-Manager.png)

<figcaption>Multiple files selected in File Manager</figcaption>

### 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](https://github.com/SyncfusionExamples/ej2-aspmvc-file-provider)
- [Azure file system provider](https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider)
- [Google drive file system provider](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider)
- [SQL server database file system provider](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider)
- [Node JS  file system provider](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem)

### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/Drag-and-drop-files-in-File-Manager.png)

<figcaption>Drag and drop files in File Manager</figcaption>

### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/Access-rule-applied-in-File-Manager.png)

<figcaption>Access rule applied in File Manager</figcaption>

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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/Sorted-files-in-File-Manager.png)

<figcaption>Sorted files in File Manager</figcaption>

### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/Image-preview-option-in-File-Manager.png)

<figcaption>Image preview option in File Manager</figcaption>

### Layout customization

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

![Customized layout in File Manager](https://www.syncfusion.com/blogs/wp-content/uploads/2019/08/Customized-layout-in-File-Manager.png)

<figcaption>Customized layout in File Manager</figcaption>

## 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:

- [Blazor](https://www.syncfusion.com/blazor-components/blazor-file-manager)
- [NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/file-manager)
- [NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/file-manager)
- [Angular](https://www.syncfusion.com/angular-ui-components/angular-file-manager)
- [React](https://www.syncfusion.com/react-ui-components/react-file-manager)
- [Vue](https://www.syncfusion.com/vue-ui-components/vue-file-manager)

## 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](https://www.syncfusion.com/downloads/essential-js2/confirm). You can visit the File Manager source code on [GitHub](https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/filemanager) and [check our samples browser](https://ej2.syncfusion.com/demos/?_ga=2.246190852.1074369004.1566797570-1861619602.1562046267#/material/file-manager/overview.html) and [documentation](https://ej2.syncfusion.com/documentation/file-manager/getting-started/) 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](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [Feedback Portal](https://www.syncfusion.com/feedback/xamarin-forms). We are happy to assist you!

The post [Introducing New JavaScript File Manager Control](https://www.syncfusion.com/blogs/post/introducing-new-javascript-file-manager-control.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).