ImageBrowser in a Sharepoint Library folder

[Jérémy]

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.

[Ianko]

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

 

 

[Jérémy]

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.

[Ianko]

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

 

 

[Jérémy]

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,

[Ianko]

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

[Jérémy]

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.