ImageEditor - Using Custom Content Provider

  • Upload
  •  Fruits
    •  Folder1
    •  Folder4
Table that lists the contents of the current directory
Table that lists the contents of the current directory
Max file size allowed:
02.00 MB
File extensions allowed:
*.jpg, *.jpeg, *.gif, *.png, *.bmp
  • Print Image
  • Save Image
  • Export Image
  • Undo
  • Redo
  • Reset Changes
  • Crop
  • Resize
  • Zoom
    • Zoom
    • Zoom In
    • Zoom Out
  • Opacity
  • Rotate
    • Rotate
    • Rotate Right by 90 deg
    • Rotate Left by 90 deg
  • Flip
    • Flip
    • Flip Vertically
    • Flip Horizontally
  • Add Text
  • Insert Image
  • Brightness/Contrast
    • Brightness/Contrast
    • Hue/Saturation
    • Blur
    • Sharpen
    • Greyscale
    • Sepia
    • Invert Colors (negative)
  • Pencil
    • Pencil
    • Line
    • DrawRectangle
    • DrawCircle
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Database File Provider

This example demonstrates the implementation of a custom FileBrowserContentProvider, using a SQL database as a file source. In the offline demos instalation the DBContentProvider class is available in the App_Code\Editor\ folder 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ImageEditor.Default.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../common/styles.css" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        <telerik:RadFileExplorer RenderMode="Lightweight" ID="RadFileExplorer1" runat="server" Width="230px" Height="430px" CssClass="qsf-ib" VisibleControls="Grid,Toolbar,AddressBox" DisplayUpFolderItem="true"
            OnClientItemSelected="FileExplorer_OnClientItemSelected" OnClientLoad="fileExplorer_load">
        <div class="rie-wrapper qsf-ib">
            <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" Width="740px" Height="434px"
                OnClientSaved="ImageEditor_OnClientSaved" ToolsLoadPanelType="AjaxPanel" EnableResize="false" />
        <telerik:RadCodeBlock runat="server">
            <script type="text/javascript">
                serverID("ajaxManagerID", "<%= RadAjaxManager1.ClientID %>");

Find Assistance

Help Us Improve

Was this example helpful?