Store Images in a Database using the ImageBrowser of the Editor

Environment

Product	Telerik UI for ASP.NET MVC Editor
Progress Telerik UI for ASP.NET MVC version	2024.4.1112

Description

How can I use the Editor's ImageBrowser with a database?

Solution

See the full example on how to set up the Editor ImageBrowser to store the images in an MS SQL database in an ASP.NET MVC application.

1. Implement the Upload action, to which the ImageBrowser uploads the selected files.

       public ActionResult Upload(string path, HttpPostedFileBase file)
       {
           if (file != null)
           {
               var files = new FilesRepository();
               var parentFolder = files.GetFolderByPath(path);
               if (parentFolder != null)
               {
                   files.SaveImage(parentFolder, file);
                   return Json(
                       new FileBrowserEntry
                       {
                           Name = Path.GetFileName(file.FileName),
                           Size = file.ContentLength
                       }
                   , "text/plain");
               }
           }
           throw new HttpException(404, "File Not Found");
       }
   

2. Implement the FileRepository class, which performs the data operations with the database.

       using System;
       using System.Collections.Generic;
       using System.IO;
       using System.Linq;
       using System.Web;
       using Kendo.Mvc.UI;
   
       public class FilesRepository
       {
           private ImageBrowserEntities dataContext;
   
           protected ImageBrowserEntities Db
           {
               get { return dataContext ?? (dataContext = new ImageBrowserEntities()); }
           }
   
           public IEnumerable<FileBrowserEntry> Images(string path)
           {
               return Images(GetFolderByPath(path));
           }
   
           public void SaveImage(Folder parent, HttpPostedFileBase file)
           {
               var buffer = new byte[file.InputStream.Length];
               file.InputStream.Read(buffer, 0, (int) file.InputStream.Length);
               var image = new Image
                           {
                               Name = Path.GetFileName(file.FileName),
                               Folder = parent,
                               Image1 = buffer
                           };
               Db.Images.Add(image);
               Db.SaveChanges();
           }
   
           //... additional methods...
       }
   

More ASP.NET MVC Editor Resources

• ASP.NET MVC Editor Documentation

• ASP.NET MVC Editor Demos

• ASP.NET MVC Editor Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Editor for ASP.NET MVC

• Server-Side API Reference of the Editor for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base