editor imageBrowser angular

[John]

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>

[Alex Gyoshev]

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

 

 

[John]

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}'}

[Alex Gyoshev]

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

 

 

[John]

Hi
Very simple!
imageUrl: function (e) {
return "http://localhost:8013/images/" +$scope.dataset+'/'+ e;
}
Thanks,
John

[John]

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

[Alex Gyoshev]

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

 

 

[John]

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

[Nicolas]

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

[Alex Gyoshev]

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

 

 

[Nicolas]

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 ?

 

 

[Alex Gyoshev]

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