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

editor imageBrowser angular

11 Answers 99 Views
Editor
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 02 Mar 2015, 08:34 PM
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>

11 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 04 Mar 2015, 03:53 PM

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!
 
0
John
Top achievements
Rank 1
answered on 04 Mar 2015, 05:06 PM
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}'}
0
Alex Gyoshev
Telerik team
answered on 05 Mar 2015, 11:49 AM

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!
 
0
John
Top achievements
Rank 1
answered on 05 Mar 2015, 03:44 PM
Hi
Very simple!
imageUrl: function (e) {
return "http://localhost:8013/images/" +$scope.dataset+'/'+ e;
}
Thanks,
John
0
John
Top achievements
Rank 1
answered on 06 Mar 2015, 06:09 AM
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











0
Accepted
Alex Gyoshev
Telerik team
answered on 09 Mar 2015, 08:24 AM

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!
 
0
John
Top achievements
Rank 1
answered on 09 Mar 2015, 04:33 PM
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
0
Nicolas
Top achievements
Rank 1
answered on 31 Mar 2015, 12:31 PM
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
0
Alex Gyoshev
Telerik team
answered on 02 Apr 2015, 07:52 AM

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!
 
0
Nicolas
Top achievements
Rank 1
answered on 29 Apr 2015, 09:18 AM

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 ?

 

 

0
Alex Gyoshev
Telerik team
answered on 04 May 2015, 07:14 AM

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!
 
Tags
Editor
Asked by
John
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
John
Top achievements
Rank 1
Nicolas
Top achievements
Rank 1
Share this question
or