DevExtreme - File Manager Component CTP (v19.1)

DevExtreme Team Blog
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

20 comment(s)
Customer56436436
Customer56436436

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)
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
Vladislav Kiselev

Will it be possible to add custom columns?

28 April, 2019
Mr Leigh
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
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
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
Customer83249
Customer83249

Where is the documentation for client-side events? How does one respond to mouse events, etc? Are there any drag/drop capabilities?

31 May, 2019
David Evan K
David Evan K

We have an immediate need to create an image library with folders and sub folders, but need to a) integrate with the File Upload component and b) show thumbnails of multiple images in a given folder and subfolder.  We are using jQuery on the front end and ASP.Net Web API Core (no Razor, or front end dependencies) on the back end.

3 June, 2019
Helen (DevExpress Support)
Helen (DevExpress Support)

@Vladislav Kiselev,

Yes, you can add custom columns. Check an example here: codepen.io/.../xNeYOZ

5 June, 2019
Helen (DevExpress Support)
Helen (DevExpress Support)

@Shahab,

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

If you mean recursive directory copying, it works out of the box. Try it in our online demo: js.devexpress.com/.../Light

5 June, 2019
Helen (DevExpress Support)
Helen (DevExpress Support)

@Thirukumaran M.,

We have answered these questions in your ticket. Should you need further help, please contact us.

5 June, 2019
Helen (DevExpress Support)
Helen (DevExpress Support)

>Where is the documentation for client-side events? How does one respond to mouse events, etc?

Here is the FileManager documentation: js.devexpress.com/.../Configuration

>Are there any drag/drop capabilities?

Currently, no. We will appreciate it if you describe your requirements in greater detail in a Support Center ticket at devexpress.com/ask or send an email to support@devexpress.com

5 June, 2019
Helen (DevExpress Support)
Helen (DevExpress Support)

@David,

It should be possible to use File Manager for this scenario. If you need our assistance with implementation, please submit a ticket: https://devexpress.com/ask

5 June, 2019
Gerhard Korf
Gerhard Korf

Hi Team, is there any plan to add a thumbnail image of the file on the server.  In other words if you go into a file with 20 images, it must show the thumbnail of the 20 images so you can select which image you want to use?  (Similar to how windows will show it on the client side), but this will be for files on the server side.

I do realize, the server will have to render a thumbnail of the image.  I'm using Razor pages, and this could be a very useful add-on to the server side if this widget for razor pages.

10 August, 2019
Gerhard Korf
Gerhard Korf

ok, I'm obviously still new in the dotnet and razor.  But found the solution to my question.


 customizeThumbnail: function (fileManagerItem) {

                var fileExtension = fileManagerItem.getExtension();

                if (fileManagerItem.isDirectory)

                    return '@Url.Content("~/images/thumbnails/folder.svg")';

                var f = fileManagerItem.relativeName;

                console.log(f);

                 switch (fileExtension) {

                     case ".jpg":

                          var url = '@Url.Content("~/xxx")';

                            url = url.replace("xxx", f);

                        return url;

                        break;

                    case ".png":

                        var url = '@Url.Content("~/xxx")';

                            url = url.replace("xxx", f);

                        return url;

                        break;

                }

            }


So the functionality obviously already exist, and work like a charm.  Great!!

10 August, 2019
Brad Baker - MMC
Brad Baker - MMC
Any example using Azure Blob Storage as the source for the files?
29 August, 2019
Maxim E (DevExpress)
Maxim E (DevExpress)

@Brad Baker,

We have described it in greater detail in the ASP.NET Core File Manager - How to Display Files Hosted on Azure blog post. Also, there you can find source code to implement the functionality in the ASP.NET Core enviroment.

30 August, 2019
Customer81623
Customer81623
Are there any plans to add download capability? Would make a nice way to share files on our site.
5 September, 2019
Customer81623
Customer81623

Just found the selectedFileOpened event and is triggered by double clicking a file. Just have to implement the download using info in the fileItem object passed in.

https://www.devexpress.com/Support/Center/Question/Details/T747678/filemanager-toolbar-and-context-menu-customization-and-file-downloading-opening

5 September, 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Hi,

We plan to ship this feature in v19.2. If the issue is urgent, please submit a ticket in our Support Center and requirements . We'll be happy to find an appropriate solution for you.

 
6 September, 2019

Please login or register to post comments.