Skip to main content
Tab

ASPxFileManager Class

A file management control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

public class ASPxFileManager :
    ASPxDataWebControl,
    IRequiresLoadPostDataControl,
    IParentSkinOwner,
    ISkinOwner,
    IPropertiesOwner,
    IControlDesigner

Remarks

The ASPxFileManager control allows you to manage files and folders.

ASPxFileManager - ASPxFileManager

Create a File Manager

Design Time

The ASPxFileManager control is available on the DX.24.1: Common Controls toolbox tab in the Microsoft Visual Studio IDE.

FileManager in Toolbox

Drag the control onto a form and customize the control’s settings, or paste the control markup in the page’s source code.

Note

To properly function, DevExpress controls require that special modules, handlers and options are registered in the the Web.config file. Switch the Microsoft Visual Studio IDE to the Design tab to automatically update the Web.config file with the required DevExpress information.

<dx:ASPxFileManager ID="fileManager" runat="server" ...>
    <Settings RootFolder="~/Content/FileManager/Files" ThumbnailFolder="~/Content/FileManager/Thumbnails" />
    <SettingsUpload UseAdvancedUploadMode="true">
        <AdvancedModeSettings EnableMultiSelect="true" />
    </SettingsUpload>
</dx:ASPxFileManager>

Run Time

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
    ASPxFileManager fm = new ASPxFileManager();
    fm.ID = "ASPxFileManager1";
    fm.SettingsUpload.ValidationSettings.DisableHttpHandlerValidation = true;
    Page.Form.Controls.Add(fm);

    fm.SettingsUpload.UseAdvancedUploadMode = true;
    fm.SettingsUpload.AdvancedModeSettings.EnableMultiSelect = true;
}

Note

The File Manager requires registering the ASPxUploadProgressHttpHandler in the web.config file. If it’s impossible to automatically validate the ASPxUploadProgressHttpHandler, for example, if the handler is registered inside the <location> section and the InheritInChildApplications property is set to false, disable the automatic validation option by setting the DisableHttpHandlerValidation property to false.

Client-Side API

The ASPxFileManager’s client-side API is implemented with JavaScript language and exposed by the ASPxClientFileManager object.

Availability

Available by default.

Client object type

ASPxClientFileManager

Access name

ASPxFileManager.ClientInstanceName

Events

ASPxFileManager.ClientSideEvents

See demo

Folder Structure

Use the InitialFolder property to specify the initially selected folder in the file manager, where a user starts browsing. If the property value is empty, the file manager uses the path from the RootFolder property as an initial folder.

FileManager - Folder Structure

<dx:ASPxFileManager ID="ASPxFileManager1" runat="server" Width="700px">
     <Settings RootFolder="~\Files\" ThumbnailFolder="~\Thumbnails\" 
          AllowedFileExtensions=".jpg, .jpeg, .gif, .rtf, .txt, .avi, .png, .mp3, .xml, .doc, .pdf" 
          InitialFolder="Images\Employees" />
     <SettingsEditing AllowCreate="True" AllowDelete="True" AllowMove="True" AllowRename="True" />
     <SettingsPermissions>
          <AccessRules>
               <dx:FileManagerFolderAccessRule Edit="Deny" />
               <dx:FileManagerFolderAccessRule Edit="Allow" Path="Documents\Reports" />
          </AccessRules>
     </SettingsPermissions>
</dx:ASPxFileManager>

Learn more

Data Binding

The ASPxFileManager allows you to load its content from a database. Assign a data source to the DataSourceID property and map the data source’s fields to the file manager (SettingsDataSource).

<dx:ASPxFileManager ID="ASPxFileManager1" runat="server" DataSourceID="AccessDataSource1">
    ...
    <SettingsDataSource KeyFieldName="Id" ParentKeyFieldName="ParentID" NameFieldName="Name" 
        IsFolderFieldName="IsFolder" FileBinaryContentFieldName="Data" LastWriteTimeFieldName="LastWriteTime"/>
</dx:ASPxFileManager>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/FilesCatalog.mdb" 
    SelectCommand="SELECT [ID], [Name], [ParentID], [IsFolder], [Data], [LastWriteTime] FROM [FileSystem]"
    ...
</asp:AccessDataSource>

See demo

View Modes

The ASPxFileManager supports two file list view modes (View property):

  • Thumbnails - Displays files’ thumbnails.
  • Details - Displays information about files in a grid view.
<dx:ASPxFileManager ID="fileManager" runat="server" >
    ...
    <SettingsFileList View="Details">
        <DetailsViewSettings AllowColumnResize="true" AllowColumnDragDrop="true" />
    </SettingsFileList>
</dx:ASPxFileManager>

Learn more | See demo

Thumbnails Support

ASPxFileManager automatically creates thumbnails for image files with the following file extensions: .bmp, .gif, .ico, .jpg, .jpeg, .png. You can also use the the CustomThumbnail event to provide custom thumbnails for the ASPxFileManager.

<dx:ASPxFileManager ID="fileManager" runat="server" OnCustomThumbnail="fileManager_CustomThumbnail">
    ...
</dx:ASPxFileManager>
public void fileManager_CustomThumbnail(object sender, FileManagerThumbnailCreateEventArgs e) {
    switch(((FileManagerFile)e.Item).Extension) {
        case ".avi":
            e.ThumbnailImage.Url = "Images/movie.png";
            break;
        case ".txt":
            e.ThumbnailImage.Url = "Images/txt.png";
            break;
        ...
    }
}

Learn more | See demo

Files Upload

Set the Enabled property to true to allow file uploading in the file manager. The file manager supports two upload modes (UseAdvancedUploadMode):

  • Standard Mode - the file manager sends the uploaded file to the server in one request and caches the file in server memory.

  • Advanced Mode - the file manager sends the uploaded file to the server in small packets (one by one) and saves the file into a temporary file within a specific server folder.

<dx:ASPxFileManager ID="fileManager" runat="server" ...>
    ...
    <SettingsUpload UseAdvancedUploadMode="true">
        <AdvancedModeSettings EnableMultiSelect="true" />
    </SettingsUpload>
</dx:ASPxFileManager>

Learn more | See demo

Custom Filter API

The ASPxFileManager provides APIs that allows you to filter its file list programmatically in a custom manner. For instance, you can write code to display only certain files types (such as images, spreadsheets or rich text documents) or the most recently used files.

See demo

The file manager provides the breadcrumbs element that allows end-users to track their locations in folders. To display the breadcrumbs, set the Visible property to true. Use the SettingsBreadcrumbs property to access the breadcrumbs element settings.

FileManager - SettingsBreadcrumbs

<dx:ASPxFileManager ID="fileManager" runat="server" >
    ...
    <SettingsBreadcrumbs Visible="true" ShowParentFolderButton="true" Position="Top" />
</dx:ASPxFileManager>

See demo

Cloud Storages Support

The ASPxFileManager supports the most popular cloud services: Amazon Simple Storage Service (Amazon S3), Microsoft Azure, Dropbox, Google Drive, and OneDrive.

<dx:ASPxFileManager ID="FileManager" runat="server" ProviderType="OneDrive">
    <SettingsOneDrive AccountName="FileManagerOneDriveAccount" 
    TokenEndpoint="https://login.microsoftonline.com/{tenant}/oauth2/token" 
    RedirectUri="http://mysite.com" />
    ...
</dx:ASPxFileManager>

Learn more

Multiple File Selection

You can choose multiple files (EnableMultiSelect) and perform actions on them simultaneously. Use the SelectionChanged client event and the GetSelectedItems method to obtain information about selected files.

<dx:ASPxFileManager ID="ASPxFileManager1" ClientInstanceName="fileManager" runat="server">
    <Settings EnableMultiSelect="true" RootFolder="~/Content/FileManager/Files/Images" InitialFolder="Product icons" ThumbnailFolder="~/Content/FileManager/Thumbnails"/>
    <ClientSideEvents SelectionChanged="fileManager_SelectionChanged" />
</dx:ASPxFileManager>
function fileManager_SelectionChanged(s, e) {
    filesList.ClearItems();
    var selectedFiles = s.GetSelectedItems();
    for(var i = 0; i < selectedFiles.length; i++) {
        filesList.AddItem(selectedFiles[i].name);
    }
    document.getElementById("filesCount").innerHTML = selectedFiles.length;
}

See demo

Templates

The ASPxFileManager control supports template technology and allows you to customize file and folder appearance and layout.

<dx:ASPxFileManager ID="fileManager" runat="server">
    <SettingsFileList>
        <ThumbnailsViewSettings ThumbnailHeight="50" ThumbnailWidth="50">
            <ItemTemplate>
                <img class="tmplThumb" src='<%# Eval("ThumbnailUrl") %>' alt='<%# Eval("Name") %>' />
                <div class="tmplTextContainer">
                    <dx:ASPxLabel CssClass="mainInfo" runat="server" Text='<%# Eval("Name") %>' />
                    <br />
                    <dx:ASPxLabel CssClass="additionalInfo" runat="server" Text='<%# GetFileType(Container.DataItem as FileManagerFile) %>' />
                    <br />
                    <dx:ASPxLabel CssClass="additionalInfo" runat="server" Text='<%# GetSize(Container.DataItem as FileManagerFile) %>' />
                </div>
            </ItemTemplate>
        </ThumbnailsViewSettings>
    </SettingsFileList>
    ...
</dx:ASPxFileManager>

See demo

AJAX Support

Set the EnableCallBacks property to true to enable callbacks support in the file manager.

Toolbar

The ASPxFileManager enables you to group the most important or frequently used commands, and expose them through customizable toolbars for efficient end-user access.

<dx:ASPxFileManager ID="FileManager" ClientInstanceName="FileManager" runat="server" />
    <ClientSideEvents CustomCommand="OnCustomCommand" ToolbarUpdating="OnToolbarUpdating" />
    <SettingsToolbar>
        <Items>
            <dx:FileManagerToolbarCustomButton CommandName="Properties">
                <Image IconID="setup_properties_16x16" />
            </dx:FileManagerToolbarCustomButton>
            <dx:FileManagerToolbarRefreshButton BeginGroup="false" />
            <dx:FileManagerToolbarCustomButton Text="Thumbnails View" CommandName="ChangeView-Thumbnails" 
            GroupName="ViewMode">
                <Image IconID="grid_cards_16x16" />
            </dx:FileManagerToolbarCustomButton>
            <dx:FileManagerToolbarCustomButton Text="Details View" CommandName="ChangeView-Details" 
            GroupName="ViewMode">
                <Image IconID="grid_grid_16x16" />
            </dx:FileManagerToolbarCustomButton> 
        </Items>
    </SettingsToolbar>
</dx:ASPxFileManager>
function OnCustomCommand(s, e) {
    switch(e.commandName) {
        case "ChangeView-Thumbnails":
            FileManager.PerformCallback("Thumbnails");
            break;
        case "ChangeView-Details":
            FileManager.PerformCallback("Details");
            break;
        case "Properties":
            PopupControl.PerformCallback(FileManager.GetActiveAreaName());
            break;
    }
}
function OnToolbarUpdating(s, e) {
    var enabled = (e.activeAreaName == "Folders" || FileManager.GetSelectedItems().length > 0) 
    && e.activeAreaName != "None";
    FileManager.GetToolbarItemByCommandName("Properties").SetEnabled(enabled);
}

Learn more | See demo

Access Rules

The ASPxFileManager allows you to define access permissions for folders and files using a set of folder/file access rules (AccessRules). An access rule specifies the path to which it is applied and lists permissions (allowed or denied actions) associated with this rule. Use the FileManagerFolderAccessRule and FileManagerFileAccessRule objects to set up access rules for folders (including their files and child folders) and individual files.

<dx:ASPxFileManager ID="ASPxFileManager1" runat="server">
    <SettingsEditing AllowCreate="true" AllowDelete="true" AllowMove="true" AllowRename="true" />
    <SettingsPermissions>
        <AccessRules>
            <dx:FileManagerFileAccessRule Edit="Deny" Path="*" />
            <dx:FileManagerFileAccessRule Edit="Allow" Path="*.jpg" />
        </AccessRules>
    </SettingsPermissions>
</dx:ASPxFileManager>

Learn more | See demo

Context Menu

You can create and populate the context menu with custom items.

<dx:ASPxFileManager ID="FileManager" ClientInstanceName="FileManager" runat="server" >
    <ClientSideEvents CustomCommand="OnCustomCommand" ToolbarUpdating="OnToolbarUpdating" />
    <SettingsContextMenu Enabled="true">
        <Items>
            <dx:FileManagerToolbarMoveButton />
            <dx:FileManagerToolbarCopyButton />
            <dx:FileManagerToolbarRenameButton BeginGroup="true" />
            <dx:FileManagerToolbarDeleteButton />
            <dx:FileManagerToolbarRefreshButton BeginGroup="false" />
            <dx:FileManagerToolbarCustomButton Text="Properties" CommandName="Properties" BeginGroup="true">
                <Image IconID="setup_properties_16x16" />
            </dx:FileManagerToolbarCustomButton>
        </Items>
    </SettingsContextMenu>
    ...
</dx:ASPxFileManager>
function OnCustomCommand(s, e) {
    switch(e.commandName) {
        case "ChangeView-Thumbnails":
            FileManager.PerformCallback("Thumbnails");
            break;
        case "ChangeView-Details":
            FileManager.PerformCallback("Details");
            break;
        case "Properties":
            PopupControl.PerformCallback(FileManager.GetActiveAreaName());
            break;
    }
}
function OnToolbarUpdating(s, e) {
    var enabled = (e.activeAreaName == "Folders" || FileManager.GetSelectedItems().length > 0) 
    && e.activeAreaName != "None";
    FileManager.GetContextMenuItemByCommandName("Properties").SetEnabled(enabled);
}

See demo

Download Files

Set the AllowDownload property to true to allows end users to download selected files.

<dx:ASPxFileManager ID="fileManager" runat="server" >
    ...
    <SettingsEditing AllowDownload="true" />   
</dx:ASPxFileManager>

Learn more | See demo

Virtual Scrolling

The ASPxFileManager supports virtual scrolling that loads items automatically when the end-user scrolls the control content.

<dx:ASPxFileManager ID="FileManager" runat="server" >
    ...    
    <SettingsFileList PageSize="30" View="Details" />
</dx:ASPxFileManager>

See demo

Appearance Customization

Use the ASPxFileManager.Styles property to customize the file manager elements’ style settings.

Validation

The ASPxFileManager allows you to validate the uploaded files. The control can check the file’s size, extension and other settings.

Adaptivity

In adaptive mode, the file manager allows you to build responsive page layouts. Set the Enabled to true to enable the File Manager’s adaptivity.

<dx:ASPxFileManager ID="FileManager" runat="server" >
    <SettingsAdaptivity Enabled="true" />
    ...
</dx:ASPxFileManager>

Learn more | See demo

Keyboard support

The ASPxFileManager control allows end-users to use keyboard to navigate through files and folders.

See Also