DevExtreme - File Manager Component CTP (v19.1)

26 April 2019

Today, I'm happy to introduce the brand new DevExtreme File Manager Component!

This client-side component allows your end-users to browse, manage, and upload files to your web server. Essentially, it brings the Windows File Explorer UX to your web apps.

DevExtreme File Manager - JavaScript

CTP

The new File Manager component is available as a CTP (community technology preview) in the v19.1 release. We're not finished with the porting the major features yet but rest assured, we're working on it.

Features

The DevExtreme File Manager component gives you these great features built-in:

  • File and folder structure display options
  • Client-side responsive UI
  • REST API for file operations
  • Two view modes: Thumbnail and Details
  • Predefined helpers to connect to a server file system

Let's explore the last two features in the list a little further.

View Modes

As mentioned above, the File Manager component supports two file list view modes: Thumbnails and Details. Both of these modes display similar views which you'd typically find in a desktop file manager.

In the Details view mode, a file list is displayed using a grid which contains information about the files. Take a look at the image above to see an example.

While in the Thumbnails view mode, a file list is shown using file thumbnails (small images):

DevExtreme File Manager ViewModes

Connect to a server file system

While this is a client-side control, a typical scenario involves managing server-side files. To help you, we've created server-side helpers to display a physical file system using the File Manager component. The helpers are available for the ASP.NET MVC and ASP.NET Core platforms only.

On the server-side, you can use the following File Manager operations for files and folders: get, create, remove, move, delete, and rename. To use one of these operations, you'll need to call it from a Controller's Action method. Here's an example:

public object ProcessFileOperations(FileSystemCommand command, string arguments) { 
    var config = new FileSystemConfiguration { 
        Request = Request, 
        FileSystemProvider = new DefaultFileProvider("path to dir"),
        AllowCreate = true, 
        AllowCopy = true 
        ... 
    }; 
    var processor = new FileSystemCommandProcessor(config); 
    var result = processor.Execute(command, arguments); 
    return result.GetClientCommandResult(); 
}

Note: To use this code snippet in your project, be sure to specify the root folder in the DefaultFileProvider class constructor. The following UNC paths can be assigned as a root folder:

  • Path to a folder within the web application
  • Path to a network folder
  • Relative path to a folder
  • Absolute path to a folder on a local disc

Security Best Practices

While this is a client-side control, it does expose certain server-side files and directories. As part of our Quality Assurance and testing processes, we devote significant time and energy to locate potential security vulnerabilities within our product line and remedy them as necessary.

Based on our experience with numerous web applications, we have created and continue to regularly update a Best Practices document designed to help you avoid the most common web application security pitfalls.

DevExpress ASP.NET Security Best Practices

Supported Platforms

DevExtreme supports multiple platforms. But, the CTP version of the new File Manager only supports the following:

  • jQuery
  • ASP.NET MVC
  • ASP.NET Core

Rest assured, the final version will support the other platforms DevExtreme is available for: Angular, React, and Vue.

Test It Today

Test-drive the new File Manager component on your local machine. If you're a current DXperience customer then download the v19.1 release from the Client Center.

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

Along those lines, please take a moment to complete this short survey:

Join the Webinar

Sign up for the upcoming "What's New in v19.1 - JavaScript: jQuery, Angular, React, and Vue" webinar where:

  • you'll see all the new features/tools/components in v19.1 and
  • you can ask questions and interact with our devs

Register today: https://register.gotowebinar.com/register/83799677038249484

6 comment(s)
Customer37575

Thank you, the component was missing under Devextreme

Wishes:

1) Button(switchable) and client function(!) to change the view mode (ThumbnailView and DetailView)

2) Adaptability

3) Make light colored icons. It is desirable that this is switched without switching the theme, and just in the component was the ability to select a set of icons.

And please bring the first two items to colleagues in ASPxFileManager for WebForms/MVC set.

By the way, I also noticed that it is written that Angular, React, and Vue are not yet supported in the CTP version. Why then in Filemanager is mentioned in What's a new in 19.1 in the DevExtreme JavaScript Controls v19.1 section? All the same will be in 19.1? Or just under ASP.NET MVC / Core?

s16.directupload.net/.../zazv6uaa.png

26 April, 2019
Mehul Harry (DevExpress)

The what's new is more high level overview and blogs may give more details. For now, the DevExtreme File Manager component is only available for ASP.NET MVC, ASP.NET Core, and jQuery. Other platforms will be supported once it is the final version (out of CTP). Thanks for your feedback, we'll discuss it.

27 April, 2019
Vladislav Kiselev

Will it be possible to add custom columns?

28 April, 2019
Mr Leigh

I was looking for this just a couple of weeks back, such a great component of the MVC Controls, great to see it ported over to DevExtreme.

Great job as always DevExpress!

29 April, 2019
Shahab

It would be a very useful component, specially dealing with security.

Does it support to select a folder and then entire folder copied to a server folder instead of selecting each file checkbox?

30 April, 2019
Customer78750

Hi Team,

Ongoing with your feature list, you have mentioned the API are REST full for the file manager.

How could check your REST API  in the below link?

https://resttesttest.com/

And also I have noticed that  you have used the POST HTTP method instead of READ to read the files, is it valid one ?.

Kindly advice on this.

Regards,

Thirukumaran M.

2 May, 2019

Please login or register to post comments.