used code from 'http-file-upload' branch. Buttons are now added to the toolbars through converse-http-file-upload.js.

locale/de/LC_MESSAGES/converse.po

@@ -146,7 +146,7 @@ msgid "has gone away"
 msgstr "ist jetzt abwesend"
 
 #: src/converse-chatview.js:860
-msgid "Upload a File"
+msgid "Choose a file to send"
 msgstr "Datei versenden"
 
 #: dist/converse-no-dependencies.js:14851

src/converse-chatboxes.js

@@ -175,9 +175,6 @@
                     });
                 },
                 
-                /**
-                 * Upload the given file to the given url.
-                */
                 uploadFile (url, file, success_cb) {
                     console.log("uploadFile start");
                     const xmlhttp = new XMLHttpRequest();

src/converse-chatview.js

@@ -250,18 +250,6 @@
                     'click .toggle-spoiler': 'toggleSpoilerMessage',
                     'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
                     'keypress .chat-textarea': 'keyPressed',
-                    'click .toggle-fileUpload': 'toggleFileUpload',
-                    'change .fileUpload_input': 'handleFileSelect'
-                },
-
-                toggleFileUpload (ev) {
-                    this.el.querySelector('.fileUpload_input').click();
-                },
-
-                handleFileSelect (evt) {
-                    var files = evt.target.files;
-                    var file = files[0];
-                    this.model.sendFile(file, this);
                 },
 
                 initialize () {
@@ -382,7 +370,6 @@
                         'label_clear': __('Clear all messages'),
                         'label_insert_smiley': __('Insert a smiley'),
                         'label_start_call': __('Start a call'),
-                        'label_upload_file': __('Upload a File'),
                         'label_toggle_spoiler': label_toggle_spoiler,
                         'show_call_button': _converse.visible_toolbar_buttons.call,
                         'show_spoiler_button': _converse.visible_toolbar_buttons.spoiler,

src/converse-http-file-upload.js

@@ -6,9 +6,11 @@
 (function (root, factory) {
     define([
         "converse-core",
+        "tpl!toolbar_fileupload"
     ], factory);
 }(this, function (
-        converse
+        converse,
+        tpl_toolbar_fileupload
     ) {
     "use strict";
     const { $msg, Backbone, Strophe, _, b64_sha1, moment, utils } = converse.env;
@@ -16,18 +18,60 @@
 
     converse.plugins.add('converse-http-file-upload', {
 
-        dependencies: ["converse-chatboxes", "converse-chatview"],
+        dependencies: ["converse-chatboxes", "converse-chatview", "converse-muc-views"],
+
+        overrides: {
+            ChatBoxView:  {
+
+                events: {
+                    'click .toggle-fileUpload': 'toggleFileUpload',
+                    'change .fileUpload_input': 'handleFileSelect'
+                },
+
+                addFileUploadButton (options) {
+                    const { __ } = this.__super__._converse;
+                    this.el.querySelector('.chat-toolbar').insertAdjacentHTML(
+                        'beforeend',
+                        tpl_toolbar_fileupload({'label_upload_file': __('Choose a file to send')}));
+                },
+
+                renderToolbar (toolbar, options) {
+                    const { _converse } = this.__super__;
+                    const result = this.__super__.renderToolbar.apply(this, arguments);
+                    _converse.api.disco.supports(Strophe.NS.HTTPUPLOAD, 'upload.' + _converse.domain)
+                        .then((result) => {
+                            if (result.supported) {
+                                this.addFileUploadButton();
+                            }
+                        });
+                    return result;
+                },
+
+                toggleFileUpload (ev) {
+                    this.el.querySelector('.fileUpload_input').click();
+                },
+
+                handleFileSelect (evt) {
+                    var files = evt.target.files;
+                    var file = files[0];
+                    this.model.sendFile(file, this);
+                }
+            },
+
+            ChatRoomView: {
+                events: {
+                    'click .toggle-fileUpload': 'toggleFileUpload',
+                    'change .fileUpload_input': 'handleFileSelect',
+                }
+            }
+        },
 
         initialize () {
+            /* The initialize function gets called as soon as the plugin is
+             * loaded by converse.js's plugin machinery.
+             */
             const { _converse } = this,
                 { __ } = _converse;
-            
-            _converse.FileUpload = Backbone.NativeView.extend({       
-                /**
-                * Request upload slot from xmpp-server
-                */
-                
-            })
         }
     });
     

src/converse-muc-views.js

@@ -410,8 +410,6 @@
                     'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
                     'click .toggle-clear': 'clearChatRoomMessages',
                     'click .toggle-call': 'toggleCall',
-                    'click .toggle-fileUpload': 'toggleFileUpload',
-                    'change .fileUpload_input': 'handleFileSelect',
                     'click .toggle-occupants': 'toggleOccupants',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .occupant': 'onOccupantClicked',

src/templates/chatroom_toolbar.html

@@ -4,12 +4,6 @@
     <div class="emoji-picker dropdown-menu toolbar-menu"></div>
 </li>
 {[ } ]}
-{[ if (o.show_fileUpload_button)  { ]}
-<input type="file" class="fileUpload_input" style="display:none"/>
-<li class="toggle-fileUpload">
-    <a class="fa fa-paperclip" title="{{{o.label_upload_file}}}"></a>
-</li>
-{[ } ]}
 {[ if (o.show_call_button)  { ]}
 <li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
 {[ } ]}

src/templates/toolbar.html

@@ -3,12 +3,6 @@
     <div class="emoji-picker dropdown-menu toolbar-menu"></div>
 </li>
 {[ } ]}
-{[ if (o.show_fileUpload_button)  { ]}
-<input type="file" class="fileUpload_input" style="display:none"/>
-<li class="toggle-fileUpload">
-    <a class="fa fa-paperclip" title="{{{o.label_upload_file}}}"></a>
-</li>
-{[ } ]}
 {[ if (o.show_call_button)  { ]}
 <li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
 {[ } ]}

src/templates/toolbar_fileupload.html

@@ -0,0 +1,4 @@
+<input type="file" class="fileUpload_input" style="display:none"/>
+<li class="toggle-fileUpload">
+    <a class="fa fa-paperclip" title="{{{o.label_upload_file}}}"></a>
+</li>