editor imageBrowser angular

12 posts, 1 answers
  1. John
    John avatar
    14 posts
    Member since:
    Sep 2006

    Posted 02 Mar 2015 Link to this post

    Hi,
    I'm successfully using the imageBrowser with localstorage when opening the the "PostsView". I would like to change the folder while in the view but can't get this to work. If I goto another view and set localstorage with a different value I can then open the posts view with the desired folder. I would like to change the folder that the editor uses when changin the select value on the $scope.$watch.

    controller
    // set all folder options for select control, read localstorage and set a default if not value
    $scope.datasets = ["archival","blackfish","bluefish","boats","codfish","crew","fluke", "porgy","strippedbass"];
    var lc = localStorage.getItem("galleryid");
    if (lc !==undefined){
    $scope.dataset = lc;
    } else $scope.dataset ='crew';

    $scope.$watch("dataset", function () {
         localStorage.setItem("galleryid",$scope.dataset); 
         $scope.editor.imageBrowser.read();
         $scope.$apply();
    });$scope.tooloptions = {

    tools: [
    "bold",
    ...
    ],
    imageBrowser: {
    messages: {
    dropFilesHere: "Drop files here"
    },
    transport: {
    read: {
    url:'api/galleryKendo/'+$scope.dataset,
    type:'GET'
    },
    create: {
    url: '/api/upload',
    type: "POST"
    },
    thumbnailUrl:'api/gallerythumbsKendo/'+$scope.dataset,
    uploadUrl: 'http://localhost:8013/upload',// '/api/gallery/crew',//'api/upload',
    imageUrl: 'http://localhost:8013/images/'+$scope.dataset+'/{0}'
    }
    }

    html
    <textarea style="width:100%;height:500px" kendo-editor="editor" k-options="tooloptions"
    k-encoded="false" ng-model="currentPost.postContent"></textarea>
  2.
  3. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 04 Mar 2015 Link to this post

    Hello John,

    When you concatenate strings, the result is used as a constant by the widget. If you want to have dynamic URLs, define them as functions:

    transport: {
      read: {
        url: function() { return 'api/galleryKendo/'+$scope.dataset; },
        type:'GET'
      }
    }

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. John
    John avatar
    14 posts
    Member since:
    Sep 2006

    Posted 04 Mar 2015 in reply to Alex Gyoshev Link to this post

    Thanks for the prompt response.
    While the change works for displaying the thumbnails, the selection brings back the following failinjg to replace the {0} with the image reference.

    <img alt="" height="222" src="http://localhost:8013/images/boats/{0}" width="222" />

    Code
    transport: {
    read: {
    url: function() { return 'api/galleryKendo/'+$scope.dataset; },
    type:'GET'
    },
    thumbnailUrl: function() { return 'api/gallerythumbsKendo/'+$scope.dataset; },
    imageUrl: function() { return 'http://localhost:8013/images/'+$scope.dataset+'/{0}'}
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 05 Mar 2015 Link to this post

    Hello John,

    The {0} is a formatting placeholder which is not used when imageUrl is a function. See the documentation of the imageUrl property for an example on how to define it.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. John
    John avatar
    14 posts
    Member since:
    Sep 2006

    Posted 05 Mar 2015 in reply to Alex Gyoshev Link to this post

    Hi
    Very simple!
    imageUrl: function (e) {
    return "http://localhost:8013/images/" +$scope.dataset+'/'+ e;
    }
    Thanks,
    John
  11. John
    John avatar
    14 posts
    Member since:
    Sep 2006

    Posted 06 Mar 2015 in reply to Alex Gyoshev Link to this post

    Hi Alex,
    I seem to still have something wrong.
    1) When I use a string for Thumbnail: thumbnailUrl:'api/gallerythumbsKendo/'+$scope.dataset
    the images all display and the html looks like this
    <img alt="a100.png" src="/kendo-ui/service/ImageBrowser/Thumbnail?path=a100.png" class="k-image">
    2) If I use the function like the following thumbnailUrl: function(e) { return 'api/gallerythumbsKendo/'+$scope.dataset+'/'+ e; },
    the thumbnails don't dislay. The filenames display and I can select but the html lools like
    <img alt="1110___Selected.jpg" src="api/gallerythumbsKendo/blackfish" style="display: none;">
    the documentation says If function is assigned, the current path and image name will be provided. How do I use this to display thumbs?
    Thanks











  13. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 09 Mar 2015 Link to this post

    Hello John,

    The thumbnailUrl function accepts two parameters, the path and the file name. Here is how to use it (Dojo):

      thumbnailUrl: function(path, file) {
        return "/kendo-ui/service/ImageBrowser/Thumbnail?path=" + path + file;
      }

    This was not documented very well at this time; thank you for directing our attention to it.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14.
  15. John
    John avatar
    14 posts
    Member since:
    Sep 2006

    Posted 09 Mar 2015 in reply to Alex Gyoshev Link to this post

    Thanks Alex,
    Here is my final code for other who might folow this thread.
    thumbnailUrl: function(path, file) {
    return "api/gallerythumbsKendo/"+$scope.dataset+'?path='+ file;},
    John
  17. Nicolas
    Nicolas avatar
    9 posts
    Member since:
    Sep 2014

    Posted 31 Mar 2015 Link to this post

    Hi Guys, same problem here.

    My editor options :

    01.$scope.ui.editor.options = {
    02.                    tools : ['insertImage','print','pdf'],
    03.                    imageBrowser: {
    04.                        schema: {
    05.                            model : {
    06.                                id : 'pic',
    07.                                fields: {
    08.                                    name: {field:'pic'}
    09.                                }
    10.                            }
    11.                        },
    12.                        transport: {
    13.                            read: { url : PatientService.getImagesURL(), type : "GET" },
    14.                            thumbnailUrl: function(path, file) {
    15.                                return 'http://localhost:9000/practice/patient/'+$scope.selectedPatient._id.$oid+'/image/' + file;
    16.                            },
    17.                            imageUrl: function(e){
    18.                                return 'http://localhost:9000/practice/patient/'+$scope.selectedPatient._id.$oid+'/image/' + e;
    19.                            }
    20.                        }
    21.                    }
    22.                };

    If Read works fine (json fragment is ok), thumbnail and imageUrl display anything. And I don't see any 404 network traffic.

    Any advise on this ?

    Thanks in advance
  19. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 02 Apr 2015 Link to this post

    Hello Nicolas,

    The code looks good; are the generated URLs correct (i.e. if you navigate to them directly, do they work)? If this does not lead to a resolution, please submit a support ticket with a runnable sample that shows the problem, so that we can help.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  20.
  21. Nicolas
    Nicolas avatar
    9 posts
    Member since:
    Sep 2014

    Posted 29 Apr 2015 in reply to Alex Gyoshev Link to this post

    HI Alex, sorry for the delay of my response. I'm back to this subject.

    There is something strange on transport options node. Read node is called to to get my pictures list, here is the result :

    [{"pic":"553f3edf369cd7ec01f1fb4b","description":""},{"pic":"553f3edf369cd7dc01f1fb4c","description":""},{"pic":"553f3ee0369cd7dc01f1fb4d","description":""},{"pic":"553f3ee0369cd7dc01f1fb4e","description":""},{"pic":"553f3ee0369cd7dc01f1fb4f","description":""}]

    But thumbnailUrl nor imageUrl are called when I open image selector window nor click on picture (see the capture).

    Maybe the json fragment received on read is not correct ?

     

     

  23. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 04 May 2015 Link to this post

    Hello Nicolas,

    Yes, the image browser expects the following format, as documented here:

    [ {"name":"a100.png","type":"f","size":73289} ]

    Here is the remote service call from the demos.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top