Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

File Explorer in JavaScript

DZone 's Guide to

File Explorer in JavaScript

Everything you need to know about File Explorer in JavaScript.

Free Resource

vinyl-records-in-store

Organize JavaScript files for your users

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.

You may also like: Understanding Node.js File System Module.

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.

File Explorer Layout with Tile view

File explorer layout with Tile / Thumbnail view

File Explorer Layout with Detailed Grid View

File explorer layout with detailed Grid view

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.

File Explorer built-in image preview option

File explorer built-in image preview option


Custom layout

The layout of the file explorer panel can be customized.

File Explorer with Customized Layout

File explorer with customized layout

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.

File Explorer with Custom Tool

File explorer with Custom tool option

Sorting Support

In the details view or the grid view, files can be sorted by desired fields.

Sorting the files in File Explorer

Sorting the files with ascending/descending order

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.

File Explorer with Virtual Scrolling

Virtual scrolling with a large number of files

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.

Folders with Access Permission RestrictedIn 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 a locally shared machine. This is useful when you are accessing the files through your intranet environment.

Accessing Shared Folder from File Explorer

Accessing the shared location

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:

  • Azure storage.
  • SQL database.

Azure Storage Support

Azure storage is a cloud-based storage service 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.

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 the SQL database. This can also be handled by extending the file operations.

Summary

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


Related Articles

Topics:
web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}