JavaScript/HTML5 File Manager

Name: HTML5 File Manager - DHTMLX JavaScript File Manager Library
Rating: 4.8 (34 reviews)

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.

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.

View Live Demo

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

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.

Learn more

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.

Learn more

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.

Learn more

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.

Learn more

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.

Learn more

View All JavaScript UI Widgets

Other Demos and Templates

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

HTML5 File Manager

Learn More

Hotel Management System