Readonly folders for file and image browser

[Abram]

I would like to have some top level folders in the file and image browser inside the editor to be read-only not allowing a user to rename, delete, and add items to the root folder. I want a user to be able to navigate to some predefined folders under the root folder and to be able to modify the contents under them.  This isn't my structure but an example would be to have folders <website>/UserXFiles/HiRes & <website>/UserXFiles/thumbnail and only allow a user to be able to modify the contents in the HiRes and thumbnail folders but nothing above (still need the user to navigate to the different folders).  Is there functionality built into the browsers to achieve this?

Also is there a way to initialize the browsers to a directory:  If my structure was like the one above how would I start the user inside the Files folder?

Thank you,
Abram

[Dimo]

Hi Abram,

The File and Image Browsers do not have a notion of read-only folders, but the desired behavior can be achieved with custom coding. You can use the following:

+ the dataBound event of the Kendo UI ListView, which is internally used by the two Browsers
+ the internal _path property of the Browsers.
+ the ".k-toolbar-wrap" element inside the Browsers, which contains the Upload, New Folder and Delete buttons (there is no rename functionality).

You can make the following test:

1. Go to:

http://demos.telerik.com/kendo-ui/editor/imagebrowser

2. Open the ImageBrowser and create a new folder.

3. Close the ImageBrowser.

4. Execute the following in the browser's Javascript console:

var editor = $("#editor").data("kendoEditor");

editor.toolbar.element.find(".k-insertImage").parent().click(function(){
   setTimeout(function(){
      var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
      imageBrowser.listView.bind("dataBound", function(e){
         if (imageBrowser._path == "/") {
            imageBrowser.element.find(".k-toolbar-wrap").hide();
         } else {
            imageBrowser.element.find(".k-toolbar-wrap").show();
         }
      });
   });
});

5. Open the ImageBrowser. The root folder is read-only.

6. Navigate to the folder you created in step 2. It is not read-only.

===

With regard to your second question, the File and Image Browsers are always initialized to some directory, which is treated as a root directory. This depends entirely on your server-side implementation. In case you want the default directory, which is shown to the user, to not be the root directory, you can navigate manually via:

var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");

imageBrowser.path("New folder/");
imageBrowser.breadcrumbs.value("New folder/");

(Keep in mind that the reference to the File and Image Browsers is not available on initial page load. Use the approach shown above).

Regards,
Dimo
Telerik