Upload plugin: how to implement custom success callback?

[Aleksandr-ru]

I'd like to use custom callback for success event in upload plug-in and insert an image or a link to file (depends on type). But there is no instance of Trumbowyg for trumbowyg.execCmd or something else to insert a link. See the code below:

$(".trumbowyg").trumbowyg({
plugins: {                
                upload: {
                    serverPath: '/path/to/fileUpload/',
                    urlPropertyName: 'href',                    
                    success: function (data) {
                    // data object = { name: "1.jpg", href: "/images/1.jpg", type: "image" }
                    // ... here i need insert file from data.href, but how?
                    }
                }
});

Please help me to solve it.

PS what is the right commands to add a link inside editor, execCommand or something?

[Globulopolis]

success callback accept response from server only. See http://api.jquery.com/jQuery.ajax/ You can return json response from server with data that you need.

[Aleksandr-ru]

I have all data I need, but I can't get instance of trumbowyg to insert an image or link. Here is the full code partly grabbed from upload plug-in that does not work for me:

$(".trumbowyg").trumbowyg({
plugins: {                
                upload: {
                    serverPath: '/cms/page/fileUpload/',
                    statusPropertyName: 'name',
                    urlPropertyName: 'href',
                    success: function (data) {
                        // var trumbowyg = ... ; // here is the problem
                        if(data.name) {
                            if(data.type == 'image') {                              
                                trumbowyg.execCmd('insertImage', data.href);
                                $('img[src="' + data.href + '"]:not([alt])', trumbowyg.$box).attr('alt', values.alt || data.name);
                            }
                            else {
                                var link = $(['<a href="', data.href, '">', data.name, '</a>'].join(''));
                                //trumbowyg.range.deleteContents();
                                trumbowyg.range.insertNode(link[0]);
                            }
                            setTimeout(function () {
                                trumbowyg.closeModal();
                            }, 250);
                        }
                        else {
                            trumbowyg.addErrorOnModalField(
                                $('input[type=file]', $modal),
                                trumbowyg.lang[data.message]
                            );
                        }
                    }
                },

[Aleksandr-ru]

Here is the idea (and solution for me). I modified the original upload plugin with following: starting from line 148 of trumbowyg.upload.js:

success: function(data){
(trumbowyg.o.plugins.upload.success && trumbowyg.o.plugins.upload.success(data, trumbowyg, $modal, values)) || function (data) { /* here goes the original function */ }
}

and here is my config for upload:

$(".trumbowyg").trumbowyg({
plugins: {                
                upload: {
                    serverPath: '/path/to/fileUpload/',
                    urlPropertyName: 'href',                    
                    success: function (data, trumbowyg, modal, values) {                        
                         // data object = { name: "1.jpg", href: "/images/1.jpg", type: "image" }
                        if(data.name) {
                            if(data.type == 'image') {                              
                                trumbowyg.execCmd('insertImage', data.href);
                                $('img[src="' + data.href + '"]:not([alt])', trumbowyg.$box).attr('alt', values.alt || data.name);
                            }
                            else {
                                var link = $(['<a href="', data.href, '">', data.name, '</a>'].join(''));
                                trumbowyg.range.insertNode(link[0]);
                            }
                            setTimeout(function () {
                                trumbowyg.closeModal();
                            }, 250);
                        }
                        else {
                            trumbowyg.addErrorOnModalField(
                                $('input[type=file]', modal),
                                trumbowyg.lang.uploadError || data.message
                            );
                        }
                    }
                }
});

[Aleksandr-ru]

just closed and nothing else? no changes to upload plugin and no ideas for my question?

[Alex-D]

You got the solution, what do you want more?

You can make a PR if you want add some parameters to plugin.

[Globulopolis]

@Aleksandr-ru yes, please, if you can. Make the PR for this changes.

[Aleksandr-ru]

here you go :)