File Explorer in JavaScript
Tags: javascript, webdev, productivity, programming
Published: 2019-07-12 10:51:53

---
title: File Explorer in JavaScript
published: true
description: This blog explains about the usage of Syncfusion File Explorer control in a Javascript application to manage the documents over the web.
tags: javascript, webdev, productivity, programming
canonical_url: https://blog.syncfusion.com/post/file-explorer-in-javascript.aspx
---

The file explorer control for JavaScript provides a Windows Explorer-like interface within a web application, allowing end-users to browse, upload, and download files. The folder structure can be changed by renaming, moving, or deleting folders and files, and the control’s layout and folder management can be customized.

This blog will explain the features available in the file explorer component.

##Layout types
The file explorer control supports two types of layouts to view files:

* Tile view
* Grid view
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/2.png" alt="File Explorer Layout with Tile view" style="width:100%">
  <figcaption>File Explorer Layout with Tile view</figcaption>
</figure>
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/1.png" alt="File Explorer Layout with Detailed Grid View" style="width:100%">
  <figcaption>File Explorer Layout with Detailed Grid View</figcaption>
</figure>

##Image preview
You can preview an image by double-clicking it, which opens the image in a dialog window. The previewed image can then be zoomed by resizing the dialog box.
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/File-Explorer-image-built-in-preview-option.gif" alt="File Explorer built-in image preview option" style="width:100%">
  <figcaption>File Explorer built-in image preview option</figcaption>
</figure>

##Custom layout
The layout of the file explorer panel can be customized.
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/File-Explorer-with-Customized-Layout.png" alt="File Explorer with Customized Layout" style="width:100%">
  <figcaption>File Explorer with Customized Layout</figcaption>
</figure>

##Custom tool support
In the file explorer toolbar, you can create custom tools with customized actions. For example, here the Help tool has been created as a custom tool in the toolbar.
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/File-Explorer-with-Custom-Tool.png" alt="File Explorer with Custom Tool" style="width:100%">
  <figcaption>File Explorer with Custom Tool</figcaption>
</figure>

##Sorting support
In the details view or the grid view, files can be sorted by desired fields.
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/File-Explorer-sorting-the-files.gif" alt="Sorting the files with ascending / descending order" style="width:100%">
  <figcaption>Sorting the files with ascending / descending order</figcaption>
</figure>

##Virtualization
File explorer has a virtual scrolling option that will load files on demand while you scroll the content. This will improve the performance when the file system has a large number of files in its storage.
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/File-Explorer-virtual-scrolling.gif" alt="Virtual scrolling with large number of files" style="width:100%">
  <figcaption>Virtual scrolling with large number of files</figcaption>
</figure>

##File access control
The file explorer can be used in your secured file system by authorizing the access permissions to specific people or groups for specific files and folders. By defining a set of access rules for your files and folders, 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, and unauthorized people don’t have access.
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/Folders-with-Access-Permission-Restricted.png" alt="Folders with Access Permission Restricted" style="width:100%">
  <figcaption>Folders with Access Permission Restricted</figcaption>
</figure>
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.

##Shared folder support
The file explorer can also manage the files and folders available from locally shared machine. This is useful when you are accessing the files through your intranet environment.
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/Accessing-Shared-Folder-from-File-Explorer.png" alt="Accessing the shared location" style="width:100%">
  <figcaption>Accessing the shared location</figcaption>
</figure>

##Other storages support
Other than the default file systems, the file explorer can be used as a UI for online file systems and other storages. Currently, file explorer supports these storages to explore:

1. Azure storage
2. SQL database

###Azure storage support
Azure storage is a cloud-based storage provided by Microsoft for storing data objects, file system services, and so on. The default file explorer was designed to work with general file systems, so by extending the functionalities, we can perform Azure storage-related operations.

The Azure-related operations are already handled and explained in the following knowledge base, where you can get the example sample with ASP.NET Core and MVC platforms.

[https://www.syncfusion.com/kb/8355/how-to-access-the-azure-storage-files-in-fileexplorer](https://www.syncfusion.com/kb/8355/how-to-access-the-azure-storage-files-in-fileexplorer)

You can further extend the sample by substituting your Azure storage details on it.

###SQL database support
In some situations, the file system might be served from the SQL database. The file access operation will also be different for SQL database. This can also be handled by extending the file operations.

This was already done and explained in the following documentation section with the example sample:

[https://help.syncfusion.com/aspnetmvc/fileexplorer/how-to#managing-files-that-is-available-in-sql-database](https://help.syncfusion.com/aspnetmvc/fileexplorer/how-to#managing-files-that-is-available-in-sql-database)

You can further extend the sample by substituting your SQL database-related settings on it.

##Summary
Overall, the file explorer component was designed with all file operations, also it can be further extendable based on your application point of view or to support other file storage.

If you would like to try the file explorer component, you can download the [free trial](https://www.syncfusion.com/downloads/javascript/verify). You can also check our [sample browser](https://js.syncfusion.com/demos/web/#!/bootstrap/fileexplorer/DefaultFunctionalities) and [documentation](https://help.syncfusion.com/js/fileexplorer/overview) for detailed explanations to proceed further.

If you have any questions or need any clarifications, please let us know in the comments section below. You can also contact us through our [Support forum](https://www.syncfusion.com/forums) or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents). We are always happy to assist you!

If you like this blog post, we think you’ll also like the following free resources:

[[Ebook] SQL Server for C# Developers Succinctly](https://www.syncfusion.com/ebooks/sql_server_for_c_sharp_developers_succinctly)
[[Ebook] Aurelia Succinctly](https://www.syncfusion.com/ebooks/aurelia_succinctly)
[[Ebook] AngularJS Succinctly](https://www.syncfusion.com/ebooks/angularjs)
[[Ebook] SQL Azure Succinctly](https://www.syncfusion.com/ebooks/sqlazure)
[[Blog Post] Introducing Syncfusion’s New JavaScript Word Processor Component for Web](https://blog.syncfusion.com/post/introducing-syncfusion-s-new-javascript-word-processor-component-for-web.aspx)
[[Blog Post] Introducing Syncfusion’s New JavaScript Diagram Component for Web](https://blog.syncfusion.com/post/introducing-syncfusions-new-javascript-diagram-component-for-web.aspx)

The post [File Explorer in JavaScript](https://blog.syncfusion.com/post/file-explorer-in-javascript.aspx) appeared first on [Syncfusion Blogs](https://blog.syncfusion.com).