This is a migrated thread and some comments may be shown as answers.

ImageBrowser in a Sharepoint Library folder

6 Answers 145 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jérémy
Top achievements
Rank 1
Jérémy asked on 14 Oct 2016, 08:54 AM

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.

6 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 17 Oct 2016, 01:29 PM

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.
 
0
Jérémy
Top achievements
Rank 1
answered on 14 Nov 2016, 01:42 PM

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.

0
Ianko
Telerik team
answered on 15 Nov 2016, 05:53 AM

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.
 
0
Jérémy
Top achievements
Rank 1
answered on 15 Nov 2016, 02:16 PM

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,

0
Accepted
Ianko
Telerik team
answered on 15 Nov 2016, 02:37 PM

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.
0
Jérémy
Top achievements
Rank 1
answered on 15 Nov 2016, 03:13 PM

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.

 

Tags
Editor
Asked by
Jérémy
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Jérémy
Top achievements
Rank 1
Share this question
or