Evolution of Webix Complex Widgets: JavaScript File Manager

This article will be the first in the series of articles on the evolution of JS Webix complex widgets. We intend to highlight the continuous updates our widgets go through to acquire new features, enhanced performance and attractive UI one can comfortably interact with.

Today, all eyes are on File Manager Widget. We are going to focus on its main features, the changes it has undergone and the reasons for them, make then/now comparison, as well as discuss the cases of using the widget and the benefits you can gain implementing JavaScript File Manager into your app.

What is the JS File Manager?

So, let’s start with a brief introduction to this complex widget. JavaScript File Manager is a ready-made customizable solution with advanced features for managing files designed by the Webix team. It provides the user with the possibility of interacting with files and directories directly from the application.

From 7.1 to 10.2: File Manager Transformation

But let’s see how it all started.

File Manager up to 7.1 version was the first JS file management widget designed by Webix. It had a minimalistic UI and basic features that, however, covered all crucial operations needed for interaction with the file system of an app. Thus, it had a file tree and enabled the user to upload files and search for them, create folders, copy, paste, delete, rename files and folders. In the process of its evolution up to 7.1 version the following features were added as part of its enhancement: file upload for all browsers, dynamic loading, folders upload. In the course of its updates the ability to add custom items into the Actions menu appeared, nevertheless the widget was very limited in customization.

Here’s a demo with the old version of File Manager widget and a client-side dataset:

Snippet: https://snippet.webixcode.com/mf/shat731o

In 2020 the Webix Team came up with a new solution – JS Webix File Manager 7.2 (current version is 10.2) – a fully updated version with significant changes in configuration, inner logic, architecture, backend and interface.

Talking about configurations, users now can use the following settings to provide both the basic config (id, url, locale, height, width, etc.) and specific reactive properties (mode, path, selectedItem, search, clipboard) that store global app state and let developers track its changes.

For example you can use $observe handler to listen to changes and provide custom handlers for them, where the current state is accessed via Webix JetApp instance which is available in the onInit event handler: https://snippet.webix.com/bsb3sm20.

The updated JavaScript File Manager substituted the previous version of the widget and provided the users with the possibility of an easy set up in accordance with their needs. So, it suggested two options: implementation of the widget with minimal settings or customization to the extent required.

Snippet: https://snippet.webix.com/craqi0s5

Furthermore, the users got the opportunity to choose the way of initializing the widget: as a JetApp or as a Webix view. Both ways will lead to the same result whether it be initializing File Manager widget as an instance of Jet app class and rendering it in the document body or in any other container.

To learn more about all updates and fixes Webix File Manager got, read our detailed documentation at File Manager What’s New page.

Advanced HTML5 File Manager Features That Are Default in Webix

From that time forward the Webix team have been doing their utmost to improve the widget and introduce new features. Let’s look through the advanced features JavaScript File Manager widget provides the users with – they are all available in the recent 10.2 version:

• Three-mode interface with the hierarchical navigation represents files in a grid, cards and double view, so users can browse through folders and subfolders, similar to traditional file explorers on desktop systems quickly;
• Preview of text and media files for the better identification of files by the user;
• Searching files and folders which saves the time of the users helping them find the necessary file or folder without checking directories manually;
• Editing text files with the built-in editor which allows the user to work with text files directly in the app;
• Full range of file operations (upload, download, rename, delete, and move files) vital for applications that use content management systems (CMS) or cloud storage services;
• Adaptive behavior to serve small screens on mobile devices;
• Drag-and-drop support for an easy and intuitive upload and rearrangement of files;
• Hotkeys for carrying out different аctions (e.g. focus, select);
• Backend-oriented component with no requirements to specific server-side technologies. Has dedicated customizable service, read How File Manager works with server, and documented request-response formats for all operations.

Still need a more complex set of features for your app? Well, there is a Webix solution – Document Manager – a complex widget based on JS File Manager with extra features for managing files.

Scenarios When Choosing JavaScript File Manager is the Right Decision

And what are the areas JS File Manager can be the best solution for? File Manager widget is often used as part of a more complex system dealing with huge amounts of data, as it ensures smooth and intuitive interaction with it (organizing, categorizing, establishing hierarchy), nevertheless it can be integrated into any business app regardless of the document workflow volume: whether that be a large ERP, small-scale CRM, modern HRM system or even elearning software with educational materials.

It can also be a powerful solution for BI apps – our customer’s showcase demonstrates the use of the widget in an app designed for a company specializing in market research for retail outlets. Integration of HTML File Manager allowed to create an app that successfully deals with large data volumes and empowers the customer to properly arrange the collected data.

File Manager is not the only Webix widget that has gone through many changes in recent years – read our article about Webix Pivot Table Evolution where we compared its old and new version explaining in detail how it can facilitate the creation of a modern data management solution for your business.

Factors to Consider When Choosing JavaScript File Manager Widget

If you decide to implement a JS File Manager into your existing application, here are a couple of questions to ask yourself before taking your choice:

• Can the file manager be easily integrated with your existing application architecture and technology stack?
• Does it have an intuitive design that aligns with your app’s design or have options to customize the UI to match your app’s branding?
• Does the file manager support all functions that are crucial for your business?
• Does it meet your app’s performance requirements?
• Does it provide data security and allow you to manage permissions?

Let’s see what Webix JS File Manager offers:

• cross platform solution that guarantees framework compatibility and easy integration with third-party libraries,
• attractive and intuitive UI that can be deeply customized and adjusted to perfectly suit your business in terms of design and functionality,
• advanced features for a wide range of operations for file systems of any scale,
• high performance as a result of dynamic load of folders and previews – the widget loads only the folder you are currently working with,
• setting permissions – as all operations carried out on the client-side are confirmed by the server. As part of customization, you can include extra parameters into the request to the server to give permissions to different groups of users; you can also manage UI elements (e.g. hide menu items) depending on whether the user has the necessary permission.

Conclusion

4 years have passed since the new version of the Webix JS File Manager was released. Along with the rest of the Webix widgets it received dozens of updates and fixes and we are not planning to stop.

Today, we have spotlighted the Webix File Manager widget features to help you make accurate decisions when it comes to your business and the applications you create. Integrating Webix JS File Manager into your app can significantly facilitate the process of managing files, as well as contribute to your customers’ positive user experience. It offers you a possibility of deep customization to meet the needs of your business, enhance performance and attract users to your product with its intuitive interface.

But you won’t know until you try it. Fill out the form and get a free 30-day trial to make sure Webix JS UI Library is exactly what you’re looking for.

Download File Manager Free Trial