FileExplorer

Controls

Rate this demo

Thank you for your post!

FileExplorer - Custom File Content Provider

Browse to an image and click to preview.
  •  Fruits
    •  Folder1
    •  Folder4
  •  Animals
  
  
  
  
  
  
  
  
  
  
  
Max file size allowed:
200.00 KB
File extensions allowed:
*.jpg, *.jpeg, *.gif, *.png
Preview
Database File Provider

This example demonstrates the implementation of a custom FileBrowserContentProvider, using a SQL database as a file source. If you have installed the RadControls demo, the DBContentProvider class is available in the App_Code\Editor\ folder of the demo project or in this code library.

Custom FileBrowserContentProvider implementation allows using virtually any type of file sources for the RadFileExplorer:

  • Database
  • Custom role-based CMS system
  • Web service
  • Applications which use URL Rewriters
The DBFileBrowserContentProvider class inherits the abstract Telerik.Web.UI.Widgets.FileBrowserContentProvider class and implements its abstract members:
  • ResolveRootDirectoryAsTree - Called in order to load all subfolders of the passed as parameter folder
  • ResolveDirectory - Called in order to load all files of the passed as parameter folder
  • StoreFile - called to save an uploaded file to the storage
  • DeleteFile - called when user deletes a file
  • DeleteDirectory - called when user deletes a directory
  • CreateDirectory - called when user creates a directory
  • CanCreateDirectory - a readonly property, which value identifies if the New Directory icon will exist in the FileBrowser
  • GetFile - used in two cases: 1) to identify if a file with the same name exists in the same path when uploading a file; 2) when creating a thumbnail used to get the original image content
  • StoreBitmap - used to save a newly created bitmap to the storage
  • GetFileName - used to return the name of a file with given URL
  • GetPath - used to return the path of an item (file or directory) with given URL

DBFileBrowserContentProvider uses a helper DataServer class, designed to handle the database operation functions.

The file content is stored in the database and is served by the content-streamer Handler.ashx file.

Note that the EnableFileOpen property has been disabled for this example, because opening the handler.ashx in a new window always forces the browser to download the image, instead of displaying it.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Editor.DBFileBrowserContentProvider.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET FileExplorer Demo - Custom File Content Provider</title>
     <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
     <div class="qsf-ib" style="margin-right: 20px; vertical-align: top;">
          Browse to an image and click to preview.
          <telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" Width="500px" Height="300px"
               OnClientItemSelected="OnClientItemSelected" EnableOpenFile="false">
          </telerik:RadFileExplorer>
     </div>
     <div class="qsf-ib" style="vertical-align: top;">
          <fieldset style="width: 270px; height: 270px">
               <legend>Preview</legend>
               <img id="pvwImage" src="/aspnet-ajax/Editor/Examples/DBFileBrowserContentProvider/Handler.ashx?path=Root%2fImages%2fNature%2fFruits%2f7191.JPG"
                    alt="" style="display: none; margin: 10px; width: 250px; height: 225px;" />
          </fieldset>
     </div>
    </form>
</body>
</html>