< DHTMLX Suite 9.0: Grid Widget with Tree Mode, Data Grouping, Customizable Totals, Input Masks, and Much More

JavaScript/HTML5 File Manager

DHTMLX JavaScript file manager library is a ready-to-use tool for creating stylish and user-friendly file manager applications for uploading, organizing, and previewing files of any format.

html file manager
file manager demo

This example of a Material design file manager allows users to work efficiently with file systems of any size.
It was developed using the following Suite components: DataView, Grid, Form, Layout, Menu, Popup, Tabbar, Toolbar, Tree, and Window.

JavaScript File Manager Features

  • Upload and download files
  • Add, rename and delete files and folders
  • Preview files in the grid or list mode
  • Arrange folders in the tree structure
  • Sort files in the ascending or descending order
  • Search for files
  • View file details
  • Keep track of free space left

UI Components for Building JavaScript/HTML5 File Manager

Previews of uploaded files
DataView for showing uploaded files
With the DataView component, you can arrange multiple files within a single container. You can organize your files the way you need, for example, in the form of a grid with image previews or a list. Customers will be able to edit and manage uploaded content by using multiselection, drag-and-drop of single or multiple files, and arrow keys navigation.
Menu to manage files
Context menu for file-related commands
Our Menu component will help you develop a handy navigation aid in your web file manager in a few minutes. You can attach a dropdown menu or a context menu to folders and files and load options to choose from in the JSON format. DHTMLX Menu is a highly customizable widget that allows adding spacers and separators, setting custom icons for menu items, hiding and showing menu options, and much more.
Form for file management
Form to interact with uploaded files
You can create a feature-rich form with plenty of adjustable controls and arrange them in logical blocks. This widget can be equipped with buttons, checkboxes, combo boxes, input fields, radio buttons, select boxes, and text areas for editing file names and description. You can also include other Suite UI components and a file upload control for adding new files into your HTML file manager. With DHTMLX Form, you can set notification messages or add predefined validation rules to an input or text area.
Toolbar for navigating through the file manager
Toolbar for smooth navigation across your file management system
You may keep all the main commands and tools of your JavaScript file manager in one place and define their look and feel. DHTMLX allows building a toolbar with any number of various controls, adding a title, setting tooltips for controls, dividing controls into groups, creating custom icons, adding spacers and separators, etc.
Tree to organize folders
Tree structure for handy navigation inside HTML5 file manager
DHTMLX Tree component allows you to quickly add an intuitive hierarchical navigation system to your JavaScript/HTML5 file manager. This widget provides a handy tree structure of folders with smart drag-and-drop, keyboard navigation, inline editing, and dynamic rendering. Rich API helps you equip folders with checkboxes or customize them according to your requirements.

Other Demos and Templates

DHTMLX Suite includes 25+ components for creating fully-fledged web apps
for business, manufacturing, government, education, healthcare, and other realms.

demo-screenshot

Try All UI Components for Free

All dashboard widgets are included in Suite library. You can download the free trial version of Suite and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 23 components

PRO features

Want to save time and effort? We can develop web apps of any complexity for you. Contact us