image browser and thumnails

4 posts, 0 answers
  1. John
    John avatar
    4 posts
    Member since:
    Jan 2015

    Posted 27 Jan 2015 Link to this post

    Hi,
    All but  thumbnailUrl is working. The filenames display and I can select but images are not resolded. Not sure what I'm doing wrong.
    TIA
    John
    angularjs code
        $scope.tooloptions = {

                    tools: [
    "bold","italic","underline","strikethrough","justifyLeft","justifyCenter","justifyRight","justifyFull",
    "insertUnorderedList","insertOrderedList","indent","outdent","createLink","unlink","insertImage","insertFile",
    "subscript","superscript","createTable","addRowAbove","addRowBelow","addColumnLeft","addColumnRight","deleteRow",
    "deleteColumn","viewHtml","formatting","cleanFormatting","fontName","fontSize","foreColor","backColor"
                    ],

                      imageBrowser: {
                        messages: {
                            dropFilesHere: "Drop files here"
                        },
                        transport: {
                            read: {
                                url:'api/galleryKendo/crew',
                                type:'GET'
                            },
                             //destroy: {
                            //    url: "/kendo-ui/service/ImageBrowser/Destroy",
                            //    type: "POST"
                            //},
                            create: {
                                url: '/api/upload',
                                type: "POST"
                            },
                             thumbnailUrl: 'api/galleryKendo/crew',//upload',
                            uploadUrl: 'http://localhost:8013/upload',//  '/api/gallery/crew',//'api/upload',

                            imageUrl: 'http://localhost:8013/images/crew/{0}'
                        }

                    }
                };

    html
      <textarea style="width:100%;height:500px" kendo-editor="editor" k-options="tooloptions"
      k-encoded="false" ng-model="currentPost.postContent"></textarea>

    json result
    [
    {
    name: "1___Selected.jpg",
    type: "f",
    size: 15047
    },
    {
    name: "banner2.jpg",
    type: "f",
    size: 114968
    },
    {
    name: "boat.jpg",
    type: "f",
    size: 709986
    },
    {
    name: "JohnTomaselliheadShot.JPG",
    type: "f",
    size: 107260
    },
    {
    name: "lake.jpg",
    type: "f",
    size: 621634
    },
    {
    name: "sails-logo.png",
    type: "f",
    size: 11631
    },
    {
    name: "sea.jpg",
    type: "f",
    size: 840511
    },
    {
    name: "sunfield.jpg",
    type: "f",
    size: 1169317
    },
    {
    name: "tree.jpg",
    type: "f",
    size: 1171474
    }
    ]
  2. John
    John avatar
    4 posts
    Member since:
    Jan 2015

    Posted 27 Jan 2015 Link to this post

    I think I found my problem and will post when complete.
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    4 posts
    Member since:
    Jan 2015

    Posted 27 Jan 2015 in reply to John Link to this post

    Hi,
    If I set to a single image, it will display the image as a thumbnail for each image in the directory.
    I was hoping to send back a json response used for the view api/galleryKendo/crew as I'm not sure how to send mutiple files for thumbnail viewer.
    TIA
    John

    thubnailUrl: '/images/Crew/captain.jpg',

    nodejs server route 
    imageviewcrew: function (req, res) {
    filetype = req.param('file').substr(0, 3);
    filepath = './api/docs/crew/';
    fs.readFile(filepath + req.param("file"), "binary", function (error, file) {
    if (error) {
    res.writeHead(500, {"Content-Type": "text/plain"});
    res.write(error + "\n");
    res.end();
    }
    else {
    res.writeHead(200, {"Content-Type": "image/jpeg"});
    res.write(file, "binary");
    res.end();
    }
    });
    },
  5. John
    John avatar
    4 posts
    Member since:
    Jan 2015

    Posted 29 Jan 2015 Link to this post

    I solved it and got the solution by veiwing the results of your working demo. Below is server side nodejs controller action. Next step is to create thumbs with imagemagic.

    Nodejs controller... 
    getThumbsKendo: function (req, res) {
    var files = [];
    var gallery = req.param('id');
    var image = req.param('path');// path for indi thumbnail
    console.log('getThumbsKendo ',gallery,path)
    filepath = './api/docs/'+gallery+'/'+image;
    if (image!==undefined) {
    // // serve up the thumb or get all files for listing
    fs.readFile(filepath , "binary", function (error, file) {
    if (error) {
    res.writeHead(500, {"Content-Type": "text/plain"});
    res.write(error + "\n");
    res.end();
    }
    else {
    res.writeHead(200, {"Content-Type": "image/jpeg"});
    res.write(file, "binary");
    res.end();
    }
    });
    } else {
    var dd = '../MeansBasePT3/api/docs/' + gallery;
    var walker = walk.walk(dd, {followLinks: false});
    walker.on("file", function (root, fileStats, next) {
    fs.readFile(path.join(root, fileStats.name), function () {
    console.log('fileStats.name done', fileStats.name, fileStats);
    files.push({
    name: 'images/' + gallery + '/' + fileStats.name,
    "type": "f",
    "size": fileStats.size
    });
    next();
    });
    });
    walker.on('end', function () {
    console.log('all done ', files);
    res.send(files);
    });
    }
    }
    Hope this helps someone else,
    John
Back to Top
Kendo UI is VS 2017 Ready