File Manager

[Matthew R.]

I wanted to know if there is a way to leverage the
directory browser used as part of the editor widget as a stand-alone feature to
use as a file manager through the UI. I’d like to use it to access a directory
(and series of subfolders) as part of an application that I’m building for
administrative access to files uploaded by users to be used as templates for a
service.

[Dimo]

Hello Matthew,

Using the ImageBrowser as a standalone file manager is possible, although not officially supported or documented. It can be configured in exactly the same way, as when it is part of the Editor widget. Note that you must use a Javascript configuration, as a server wrapper is not available.

http://docs.kendoui.com/api/web/editor#configuration-imageBrowser

http://docs.kendoui.com/getting-started/web/editor/imagebrowser

http://demos.kendoui.com/web/editor/imagebrowser.html

<div id="ImageBrowserDiv"></div>

$("#ImageBrowserDiv").kendoImageBrowser({
    fileTypes: "*.gif,*.jpg",
    transport: {
        read: "/service/ImageBrowser/Read",
        destroy: {
            url: "/service/ImageBrowser/Destroy",
            type: "POST"
        },
        create: {
            url: "/service/ImageBrowser/Create",
            type: "POST"
        },
        thumbnailUrl: "/service/ImageBrowser/Thumbnail",
        uploadUrl: "/service/ImageBrowser/Upload",
        imageUrl: "/service/ImageBrowser/Image?path={0}"
    }
});

The ImageBrowser exposes the following events:

change - triggered when the user selects (clicks on) an image thumbnail
apply - triggered when the user confirms (double-clicks on) an image thumbnail
error - triggered when a read or upload ajax request fails

These events are primarily intended for internal use, but you can add handlers too, using bind():

http://docs.telerik.com/kendo-ui/getting-started/widgets#example---subscribe-to-an-event-using-the-bind-method

As the ImageBrowser has been designed to work with images, it expects to show a thumbnail for each file and will make a request for such a thumbnail. You need to decide how to handle those.

Renaming is not supported.

Finally, you should keep in mind that the ImageBrowser only allows an explicitly defined list of file types to be uploaded (using a *.* wildcard is not possible). In case you want to remove this requirement, you need to modify the widget source code.

_fileUpload: function(e) {
// ...
        filterRegExp = new RegExp(("(" + fileTypes.split(",").join(")|(") + ")").replace(/\*\./g , ".*."), "i"),
// ...

    if (filterRegExp.test(fileName)) {
        e.data = { path: that.path() };
// ...
},

Regards,
Dimo
Telerik

[Carl]

Are the recommendations above in this thread still current?

Is there any file manager browser control available in UI for ASP.NET MVC?

I'd like to use something that will work well with the file upload control in UI for ASP.NET MVC.

[Matthew R.]

While I'm sure this would still apply, at the time I was working on an application that needed this I ended up making it MVC based with the capability to doing web forms as well. For the page that needed the file manager I simply used the one that already existed for web forms at the time, and the rest of my application was MVC.

[Dimo]

Hello,

Yes, the information in this thread is still valid.

Regards,
Dimo
Telerik