ImageBrowser in a Sharepoint Library folder

7 posts, 1 answers
  1. Jérémy
    Jérémy avatar
    11 posts
    Member since:
    Dec 2013

    Posted 14 Oct Link to this post

    Hi everyone,

     

    I'm actually searching to plug the ImageBrowser feature to a folder in a SharePoint library instead of a standard folder. I don' find any information about this on Internet.
    I tried to set the contentFolderRoot variable to the link of the folder, but it doesn't work.

    Can you give me some hints on how to implements this please ? If it's possible at least.

    Thank you in advance.

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 17 Oct Link to this post

    Hello Jérémy,

     

    This would be possible only if SharePoint provides a service API which to be consumed by the Image Browser. Pointing the url options of the Image Browser to a folder path is not a valid approach as this is a client-side widget that cannot somehow interact with a real folder structure, but to a service that provides a JSON representation of the folders and the files that SharePoint holds. 

     

    You can read more about the mechanism of the Image Browser and how the API consumed should be structured in this article: http://docs.telerik.com/kendo-ui/controls/editors/editor/imagebrowser

     

     

    Regards,
    Ianko
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Jérémy
    Jérémy avatar
    11 posts
    Member since:
    Dec 2013

    Posted 14 Nov Link to this post

    Hello Ianko,

     

    I managed to plug my SP document library to the Image Browser but few things don't work. I created a document library called "Test" on my SharePoint site.

    The upload of a file via the Image Browser works. The Image Browser displays my folder and pictures that are on the root of the library. But if I want to open a directory, nothing happen. If I want to add the image to the content of the Kendo Editor, it doesn't work. I think this is because the web address is not right but I don't know how to change it.

     

    Here is my controller:

    public class ImageBrowserController : BaseController, IImageBrowserController
        {
            private const int ThumbnailHeight = 80;
            private const int ThumbnailWidth = 80;
     
            [SharePointContextFilter]
            public JsonResult Read(string path)
            {
                var logger = LogManager.GetLogger("ImageBrowserController." + MethodBase.GetCurrentMethod().Name);
                try
                {
                    var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
                    using (ClientContext clientContext = spContext.CreateUserClientContextForSPHost())
                    {
                        if (clientContext != null)
                        {
                            var folders = clientContext.LoadFolders(clientContext.LoadRootFolder(clientContext.LoadList(clientContext.GetParentSite(), "Test"))).Select(x => new FileBrowserEntry()
                            {
                                Name = x.Name,
                                EntryType = FileBrowserEntryType.Directory,
     
     
                            }).Where(x => !x.Name.Equals("Forms")).ToList();
                            logger.Debug("Folders: " + folders.Count);
     
                            var images = PictureService.GetPictures(clientContext,"Test").Select(x => new FileBrowserEntry()
                            {
                                Name = x.Name,
                                EntryType = FileBrowserEntryType.File,
                                 
                            }).ToList();
     
                            logger.Debug("Images: " + images.Count);
     
                            return Json(folders.Concat(images));
                        }
                    }
                }
                catch (Exception ex)
                {
                    logger.Error(ex);
                }
     
                return null;
            }
     
            [SharePointContextFilter]
            public ActionResult Destroy(string path, FileBrowserEntry entry)
            {
                throw new NotImplementedException();
            }
     
            [SharePointContextFilter]
            public ActionResult Create(string path, FileBrowserEntry entry)
            {
                throw new NotImplementedException();
     
            }
     
            [SharePointContextFilter]
            public ActionResult Upload(string path, HttpPostedFileBase file)
            {
                var logger = LogManager.GetLogger("ImageBrowserController." + MethodBase.GetCurrentMethod().Name);
                logger.Debug("Upload method");
     
                try
                {
                    var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
                    using (ClientContext clientContext = spContext.CreateUserClientContextForSPHost())
                    {
                        if (clientContext != null)
                        {
                            if (file != null)
                            {
                                logger.Debug("File: " + file.FileName);
                                Web web = clientContext.GetParentSite();
                                List testList = clientContext.LoadList(web, "Test");
                                Folder folder = clientContext.LoadRootFolder(testList);
                                logger.Debug("Folder: " + folder.Name);
     
                                var fileUrl = $"{folder.ServerRelativeUrl}/{file.FileName}";
     
                                FileCreationInformation fci = new FileCreationInformation
                                {
                                    ContentStream = file.InputStream,
                                    Url = fileUrl,
                                    Overwrite = true
                                };
                                logger.Debug("File URL: " + fileUrl);
     
                                Microsoft.SharePoint.Client.File uploadedFile = folder.Files.Add(fci);
                                clientContext.Load(uploadedFile);
                                clientContext.ExecuteQuery();
     
                                logger.Debug("File name: " + Path.GetFileName(file.FileName));
     
     
                                return Json(
                                    new
                                    {
                                        name = Path.GetFileName(file.FileName)
                                    }
                                    , "text/plain");
                            }
                        }
     
     
                    }
                }
                catch (Exception ex)
                {
                    logger.Error(ex);
                }
     
                throw new HttpException(404, "File Not Found");
            }
     
            [SharePointContextFilter]
            public ActionResult Thumbnail(string path)
            {
                var logger = LogManager.GetLogger("ImageBrowserController." + MethodBase.GetCurrentMethod().Name);
                logger.Debug("Thumbnail method");
                logger.Debug("Path : " + path);
     
                try
                {
                    var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
                    using (ClientContext clientContext = spContext.CreateUserClientContextForSPHost())
                    {
                        if (clientContext != null && path != "undefined")
                        {
                            
                            var desiredSize = new ImageSize { Width = ThumbnailWidth, Height = ThumbnailHeight };
                            const string contentType = "image/png";
                            var thumbnailCreator = new ThumbnailCreator(new FitImageResizer());
     
                            return File(thumbnailCreator.Create(FileService.DownloadFile(clientContext, "Test", path), desiredSize, contentType), contentType);
                        }
                    }
                }
                catch (Exception ex)
                {
                    logger.Error(ex);
                }
     
                throw new HttpException(404, "File Not Found");
            }
     
             
        }

     

    Thank you in advance.

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 14 Nov Link to this post

    Hello Jérémy,

    I am not well aware how SharePoint context can be used in this case, but as I can see the logic implemented never actually takes into account the path passed to the Read method. As it is the Read method that returns the list of files and folders you should debug it and see why the files from the child folder are not listed.

    Regards,
    Ianko
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  6. Jérémy
    Jérémy avatar
    11 posts
    Member since:
    Dec 2013

    Posted 15 Nov Link to this post

    Hello Ianko,

    Almost everything works now ! I still have a little thing that annoys me and I don't know where to look at. When I upload a file into a directory, the file is correctly uploaded to the library but in the Editor, the text is always set to undefined (see attachment). Because of that, the Thumbnail method always get "undefined" and it's not able to show the picture properly.

     

    Here is my upload/thumbnail methods :

    [SharePointContextFilter]
            public ActionResult Upload(string path, HttpPostedFileBase file)
            {
                var logger = LogManager.GetLogger("ImageBrowserController." + MethodBase.GetCurrentMethod().Name);
                logger.Debug("Upload method");
     
                try
                {
                    var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
                    using (ClientContext clientContext = spContext.CreateUserClientContextForSPHost())
                    {
                        if (clientContext != null)
                        {
                            if (file != null)
                            {
                                List imageBrowserLibrary = clientContext.LoadList(clientContext.GetParentSite(), ListNames.ImageBrowserLibrary);
                                Folder folder = clientContext.LoadRootFolder(imageBrowserLibrary);
                                if (!string.IsNullOrWhiteSpace(path))
                                {
                                    var splitPath = path.Split('/');
                                    foreach (string t in splitPath)
                                        if (!string.IsNullOrWhiteSpace(t))
                                            folder = clientContext.LoadFolder(folder, t);
                                }
     
                                var fileUrl = $"{folder.ServerRelativeUrl}/{file.FileName}";
     
                                FileCreationInformation fci = new FileCreationInformation
                                {
                                    ContentStream = file.InputStream,
                                    Url = fileUrl,
                                    Overwrite = true
                                };
                                logger.Debug("File URL: " + fileUrl);
     
                                Microsoft.SharePoint.Client.File uploadedFile = folder.Files.Add(fci);
                                clientContext.Load(uploadedFile);
                                clientContext.ExecuteQuery();
     
                                logger.Debug("File name: " + Path.GetFileName(file.FileName));
     
                                return Json(
                                    new
                                    {
                                        name = Path.GetFileName(file.FileName),
                                        type = "f",
                                        size = file.ContentLength
                                    }
                                    , "text/plain");
                            }
                        }
     
     
                    }
                }
                catch (Exception ex)
                {
                    logger.Error(ex);
                }
     
                throw new HttpException(404, "File Not Found");
            }
     
            [SharePointContextFilter]
            public ActionResult Thumbnail(string path)
            {
                var logger = LogManager.GetLogger("ImageBrowserController." + MethodBase.GetCurrentMethod().Name);
                logger.Debug("Thumbnail method");
                logger.Debug("Path : " + path);
     
                try
                {
                    var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
                    using (ClientContext clientContext = spContext.CreateUserClientContextForSPHost())
                    {
                        var splitPath = path.Split('/');
     
                        List imageBrowserLibrary = clientContext.LoadList(clientContext.GetParentSite(), ListNames.ImageBrowserLibrary);
                        Folder folder = clientContext.LoadRootFolder(imageBrowserLibrary);
                        if (!string.IsNullOrWhiteSpace(path))
                        {
                            foreach (string t in splitPath.Where(x => !x.Contains(".")))
                                if (!string.IsNullOrWhiteSpace(t))
                                    folder = clientContext.LoadFolder(folder, t);
                        }
     
                        string fileName = splitPath[splitPath.Length - 1];
     
                        logger.Debug("File name : " + fileName);
     
                        var desiredSize = new ImageSize { Width = ThumbnailWidth, Height = ThumbnailHeight };
                        const string contentType = "image/png";
                        var thumbnailCreator = new ThumbnailCreator(new FitImageResizer());
     
                        return File(thumbnailCreator.Create(FileService.DownloadFile(clientContext, folder, fileName), desiredSize, contentType), contentType);
                    }
                }
                catch (Exception ex)
                {
                    logger.Error(ex);
                }
     
                throw new HttpException(404, "File Not Found");
            }

     

    As you can see in the screenshots, if the pictures are already in the library, the thumbnails are created but if you just upload the file, the thumbnail is not created (because of the undefined).

     

    Regards,

  7. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 15 Nov Link to this post

    Hello Jérémy,

    What I see from the code sent so far, the Read method discussed so far uses the SharePoint context to populate files and return them in a JSON formatted object. 

    The Upload method, however, is implemented differently. Therefore, you should make sue that you are using the same mechanism for all action methods that return you the file list from the SharePoint context.

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Jérémy
    Jérémy avatar
    11 posts
    Member since:
    Dec 2013

    Posted 15 Nov in reply to Ianko Link to this post

    I changed

    return Json(
                                    new
                                    {
                                        name = Path.GetFileName(file.FileName),
                                        type = "f",
                                        size = file.ContentLength
                                    }
                                    , "text/plain");

     

    To

    return Json(new FileBrowserEntry()
                                {
                                    Name = Path.GetFileName(file.FileName),
                                    EntryType = FileBrowserEntryType.File,
     
                                });

     

    In the upload method and it works fine now.

    Thank you !

    Regards.

     

Back to Top
Kendo UI is VS 2017 Ready