Store Images in a Database using the ImageBrowser of the Editor

Environment

Product	Telerik UI for ASP.NET Core Editor
Progress Telerik UI for ASP.NET Core 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 Core Editor Resources

• ASP.NET Core Editor Documentation

• ASP.NET Core Editor Demos

• ASP.NET Core Editor Product Page

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

• Telerik UI for ASP.NET Core Forums

See Also

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

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

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

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base