10 JavaScript file manager libraries to consider

Today we share with you a list of JavaScript file managers to consider using in your web projects. This collection includes fully-fledged JS libraries and SDKs as well as open-source projects.

Enjoy!

DHTMLX File Manager

The HTML5 file manager by DHTMLX is a ready-to-use tool for developing user-friendly apps for managing the file system that enables users to perform the most common file operations, such as uploading, editing, and organizing files in folders. This demo supports files of any formats and allows keeping track of free space left.

Users can preview uploaded items in the grid or list mode, and sort them in the alphabetic ascending or descending order. The tool has context-menu support to list the actions to be performed with the file. It displays when an item is right-clicked. Plus, users can view file details by clicking with the left mouse button.

DHX file explorer template provides easy navigation; it allows arranging folders in the tree structure and searching for necessary items by typing the name in the search box. This JavaScript file management demo follows Google’s Material Design guidelines. You can interact with the live interface on the website. However, to test full functionality, you have to download a free trial version.

JS+ File Explorer

The file manager tool by JS+ allows users to upload multiple files at once by clicking on the corresponding button and choosing files or by using drag-n-drop functionality. Any file and directory can be moved, copied, renamed, and deleted. As for graphic content, the file explorer provides a built-in image editor with which users can crop images, add captions, and so on. Besides, you can easily change UI by using one of the skins available.

elFinder

elFinder is an open-source file manager for web apps. It’s written in JavaScript using jQuery UI. elFinder supports a set of basic operations allowing users to upload, copy, move, rename files and folder, etc. Users can manage files with drag-n-drop, switch between list and icons view, create and extract archives (zip, rar, 7z, etc), and track directory sizes. The file explorer template provides flexible configuration options, supports custom CSS classes, and allows using a client-server API based on JSON.

Syncfusion File Manager Control

The Syncfusion file manager is a graphical UI component used to explore a file system through a web app. It provides all the basic file operations like accessing, editing, deleting, sorting files or folders, and so on. You can specify the types of files that users will be able to upload.

The file manager control supports easy navigation for browsing folders to choose a file/folder from the file system. It contains built-in searching functionality with which users can search for an item in the current path and its child folder. Besides, all the uploaded files can be sorted in ascending or descending order by their name, size, and date created.

Syncfusion provides built-in support for drag-n-drop and multi-item selection. Thus, users can select multiple files or folders and perform desired operations like downloading or deleting as well as moving selected items within the file system.

Webix File Manager

Webix file manager is a ready-made solution that you can integrate into your web app. It provides all basic elements for working with files and folders. Users can upload files, sort them in folders, search for necessary items, and so on.

The tool offers three different views for convenient work with files. The first is a table view that allows displaying files and folders in the form of a table. The second is a cards view enabling users to access graphic and text files thumbnails. And last but not least, split panels view with which users can work with two folders at the same time, copy and move files using drag-n-drop.

DevExtreme FileManager

This FileManager can display a collection of hierarchical items that form a file system structure. With this widget, users can easily perform a standard set of operations with files like uploading, editing, and selecting files, managing them in different file storages, change folder structure. It’s worth mentioning that FileManager management capabilities are fully customizable and can be switched off or on again if necessary.

MooTools FileManager

MooTools FileManager is an open-source file explorer project that enables uploading, accessing, previewing, copying, and modifying files and folders via the user’s browser. Moreover, users are provided with history and state management as well as with the option to automatically resize large images when uploading.

Kendo UI FileManager

The Kendo FileManager component allows users to manage the file system and to perform the most common operations with files and folders. The tool provides a rich API that empowers you to configure your file explorer and customize it according to your project requirements.

Cloudinary File Upload and Optimization

Cloudinary’s JavaScript SDK allows building a ready-made file manager that can be embedded within your existing JavaScript app. The tool includes image and video upload, transformation, optimization, and delivery functionalities. Users can upload image files from various sources, resize and crop, convert to another image format, apply a large variety of effects and filters, add text and image overlays, etc. Moreover, you can apply the majority of available image transformations to video files as well. Thus, users may resize, crop, rotate, set video quality and format, and so forth. Cloudinary also offers some features that are specific to audio files.

Infragistics File Explorer

The sample by Infragistics shows how to use the igTreeGrid control to build a file explorer. Having uploaded multiple files of various formats, users can organize files in folders, filter the contents by name, date modified, type, and size. The grid with all files and folders can be collapsed or expanded if needed.

Let's continue this list! Share your experience of using different file managers in comments.