question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upload plugin: how to implement custom success callback?

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

6reactions
Aleksandr-rucommented, Jul 18, 2016

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
                            );
                        }
                    }
                }
});
0reactions
Aleksandr-rucommented, Aug 17, 2016

here you go 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

jQuery file upload plugin not calling success callback
Check if the server-side uploading script returns a JSON reply - in my case it didn't work when the reply was empty, but...
Read more >
Options · blueimp/jQuery-File-Upload Wiki - GitHub
Callback for completed (success, abort or error) upload requests. This callback is the equivalent to the complete callback provided by jQuery ajax(). Example:....
Read more >
Enabling AJAX File Uploads in Your WordPress Plugin
Head to the wp-content/plugins folder and create a new folder where all of our plugin codes will reside. I will use the name...
Read more >
Events - Fine Uploader Documentation
Fine Uploader's event system enables integrators to execute any operations at almost any point in the upload process. Knowing how these callbacks work,...
Read more >
Configuring the Comments plugin in callback mode - TinyMCE
In the callback mode, callback functions are required to save user comments on a server. The Comments functions (create, reply, edit, delete comment, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found