added httpFileUpload to converse.js

locale/de/LC_MESSAGES/converse.po

@@ -145,6 +145,10 @@ msgstr "tippt nicht mehr"
 msgid "has gone away"
 msgstr "ist jetzt abwesend"
 
+#: src/converse-chatview.js:860
+msgid "Upload a File"
+msgstr "Datei versenden"
+
 #: dist/converse-no-dependencies.js:14851
 #: dist/converse-no-dependencies.js:23427
 msgid "Remove messages"

src/build.js

@@ -13,6 +13,7 @@
         "converse-dragresize":      "builds/converse-dragresize",
         "converse-fullscreen":      "builds/converse-fullscreen",
         "converse-headline":        "builds/converse-headline",
+        "converse-httpFileUpload":  "builds/converse-httpFileUpload",
         "converse-mam":             "builds/converse-mam",
         "converse-minimize":        "builds/converse-minimize",
         "converse-modal":           "builds/converse-modal",

src/config.js

@@ -74,6 +74,7 @@ require.config({
         "converse-dragresize":      "src/converse-dragresize",
         "converse-fullscreen":      "src/converse-fullscreen",
         "converse-headline":        "src/converse-headline",
+        "converse-httpFileUpload":  "src/converse-httpFileUpload",
         "converse-mam":             "src/converse-mam",
         "converse-minimize":        "src/converse-minimize",
         "converse-modal":           "src/converse-modal",

src/converse-chatview.js

@@ -25,6 +25,7 @@
             "tpl!spoiler_button",
             "tpl!spoiler_message",
             "tpl!toolbar",
+            "converse-httpFileUpload",
             "converse-chatboxes"
     ], factory);
 }(this, function (
@@ -44,7 +45,8 @@
             tpl_spinner,
             tpl_spoiler_button,
             tpl_spoiler_message,
-            tpl_toolbar
+            tpl_toolbar,
+            filetransfer
     ) {
     "use strict";
     const { $msg, Backbone, Promise, Strophe, _, b64_sha1, f, sizzle, moment } = converse.env;
@@ -54,6 +56,8 @@
         FORWARD_SLASH: 47
     };
 
+    Strophe.addNamespace('OUTOFBAND', 'jabber:x:oob');
+
     converse.plugins.add('converse-chatview', {
         /* Plugin dependencies are other plugins which might be
          * overridden or relied upon, and therefore need to be loaded before
@@ -108,7 +112,8 @@
                     'call': false,
                     'clear': true,
                     'emoji': true,
-                    'spoiler': true
+                    'spoiler': true,
+                    'fileUpload': true
                 },
             });
             emojione.imagePathPNG = _converse.emojione_image_path;
@@ -247,7 +252,22 @@
                     'click .toggle-smiley': 'toggleEmojiMenu',
                     'click .toggle-spoiler': 'toggleSpoilerMessage',
                     'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
-                    'keypress .chat-textarea': 'keyPressed'
+                    'keypress .chat-textarea': 'keyPressed',
+                    'click .toggle-fileUpload': 'toggleFileUpload',
+                    'change .fileUpload_input': 'handleFileSelect'
+                },
+
+                toggleFileUpload(ev) {
+                    _converse.FileUpload.prototype.initFiletransfer(_converse.connection);
+                    var uploadDialog = this.el.querySelector('.fileUpload_input');
+                    uploadDialog.click();
+                },
+
+                handleFileSelect(evt) {
+                    var files = evt.target.files;
+                    var file = files[0];
+                    var jid = this.jid;
+                    _converse.FileUpload.prototype.setFile(file,this);
                 },
 
                 initialize () {
@@ -368,9 +388,11 @@
                         '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,
+                        'show_fileUpload_button': _converse.visible_toolbar_buttons.fileUpload,
                         'use_emoji': _converse.visible_toolbar_buttons.emoji,
                     });
                 },
@@ -639,7 +661,14 @@
                     if (attrs.is_spoiler) {
                         this.renderSpoilerMessage(msg, attrs)
                     }
-                    u.renderImageURLs(msg_content).then(this.scrollDown.bind(this));
+                    
+                    if(msg_content.textContent.endsWith('mp4')){
+                        msg_content.innerHTML = u.renderMovieURLs(msg_content);
+                    } else if(msg_content.textContent.endsWith('mp3')){
+                        msg_content.innerHTML = u.renderAudioURLs(msg_content); 
+                    } else {
+                        u.renderImageURLs(msg_content).then(this.scrollDown.bind(this));
+                    }
                     return msg;
                 },
 
@@ -771,6 +800,19 @@
                     return stanza;
                 },
 
+                createFileMessageStanza(message){
+                    const stanza = $msg({
+                        'from': _converse.connection.jid,
+                        'to': this.model.get('jid'),
+                        'type': 'chat',
+                        'id': message.get('msgid')
+                    }).c('body').t(message.get('message')).up()
+                      .c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up()
+                      .c('x', {'xmlns': Strophe.NS.OUTOFBAND}).c('url').t(message.get('message')).up();
+
+                    return stanza;
+                },
+
                 sendMessage (message) {
                     /* Responsible for sending off a text message.
                      *
@@ -779,8 +821,7 @@
                      */
                     // TODO: We might want to send to specfic resources.
                     // Especially in the OTR case.
-                    const messageStanza = this.createMessageStanza(message);
-                    _converse.connection.send(messageStanza);
+                    _converse.connection.send(message);
                     if (_converse.forward_messages) {
                         // Forward the message, so that other connected resources are also aware of it.
                         _converse.connection.send(
@@ -790,7 +831,7 @@
                                 'xmns': Strophe.NS.DELAY,
                                 'stamp': moment().format()
                             }).up()
-                            .cnode(messageStanza.tree())
+                            .cnode(message.tree())
                         );
                     }
                 },
@@ -814,7 +855,7 @@
                     }
                 },
 
-                onMessageSubmitted (text, spoiler_hint) {
+                onMessageSubmitted (text, spoiler_hint, file = null) {
                     /* This method gets called once the user has typed a message
                      * and then pressed enter in a chat box.
                      *
@@ -833,9 +874,18 @@
                     if (this.parseMessageForCommands(text)) {
                         return;
                     }
-                    const attrs = this.getOutgoingMessageAttributes(text, spoiler_hint)
+                    const attrs = this.getOutgoingMessageAttributes(text, spoiler_hint);
                     const message = this.model.messages.create(attrs);
-                    this.sendMessage(message);
+                    
+                    /* check, if a file was send. If true it will send the file with XEP-0066. */
+                    var messageStanza;
+                    if(file !== null){
+                        messageStanza = this.createFileMessageStanza(message);
+                    }
+                    else {
+                        messageStanza = this.createMessageStanza(message);
+                    }
+                    this.sendMessage(messageStanza);
                 },
 
                 getOutgoingMessageAttributes (text, spoiler_hint) {

src/converse-core.js

@@ -78,6 +78,7 @@
         'converse-dropdown',
         'converse-fullscreen',
         'converse-headline',
+        'converse-httpFileUpload',
         'converse-mam',
         'converse-minimize',
         'converse-modal',

src/converse-muc-views.js

@@ -82,6 +82,8 @@
         'unmoderated': 'moderated'
     };
 
+    Strophe.addNamespace('OUTOFBAND', 'jabber:x:oob');
+
     converse.plugins.add('converse-muc-views', {
         /* Dependencies are other plugins which might be
          * overridden or relied upon, and therefore need to be loaded before
@@ -693,6 +695,17 @@
                         msgid
                     });
                 },
+                sendChatRoomFile (text) {
+                    const msgid = _converse.connection.getUniqueId();
+                    const stanza = $msg({
+                        'from': _converse.connection.jid,
+                        'to': this.model.get('jid'),
+                        'type': 'groupchat',
+                        'id': msgid
+                    }).c("body").t(text).up()
+                      .c("x", {'xmlns': Strophe.NS.OUTOFBAND}).c('url').t(text).up();
+                     _converse.connection.send(stanza);
+                },
 
                 modifyRole(room, nick, role, reason, onSuccess, onError) {
                     const item = $build("item", {nick, role});
@@ -732,13 +745,16 @@
                     this.showStatusNotification(__("Error: could not execute the command"), true);
                 },
 
-                onMessageSubmitted (text) {
+                onMessageSubmitted (text, notNeeded, file = null) {
                     /* Gets called when the user presses enter to send off a
                      * message in a chat room.
                      *
                      * Parameters:
                      *    (String) text - The message text.
                      */
+                    if(file !== null){
+                        return this.sendChatRoomFile(text);
+                    }
                     if (_converse.muc_disable_moderator_commands) {
                         return this.sendChatRoomMessage(text);
                     }

src/converse.js

@@ -24,6 +24,7 @@ if (typeof define !== 'undefined') {
         "converse-minimize",    // Allows chat boxes to be minimized
         "converse-dragresize",  // Allows chat boxes to be resized by dragging them
         "converse-headline",    // Support for headline messages
+        "converse-httpFileUpload", // Support for XEP-0363
         "converse-fullscreen"
         /* END: Removable components */
     ], function (converse) {

src/inverse.js

@@ -25,6 +25,7 @@ if (typeof define !== 'undefined') {
         "converse-register",    // XEP-0077 In-band registration
         "converse-roomslist",   // Show currently open chat rooms
         "converse-vcard",       // XEP-0054 VCard-temp
+        "converse-httpFileUpload", // Support for XEP-0363
         /* END: Removable components */
 
         "converse-inverse",     // Inverse plugin for converse.js

src/templates/chatroom_toolbar.html

@@ -4,6 +4,12 @@
     <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,6 +3,12 @@
     <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/utils/core.js

@@ -213,6 +213,14 @@
             ))
     };
 
+    u.renderMovieURLs = function (obj) {
+        return "<video controls><source src=\"" + obj.textContent + "\" type=\"video/mp4\"></video>";
+    };
+
+    u.renderAudioURLs = function (obj) {
+        return "<audio controls><source src=\"" + obj.textContent + "\" type=\"audio/mpeg\"></audio>";
+    };
+
     u.slideInAllElements = function (elements, duration=300) {
         return Promise.all(
             _.map(

tests/runner-transpiled.js

@@ -24,6 +24,7 @@ config.paths["converse-core"] =         "builds/converse-core";
 config.paths["converse-disco"] =        "builds/converse-disco";
 config.paths["converse-dragresize"] =   "builds/converse-dragresize";
 config.paths["converse-headline"] =     "builds/converse-headline";
+config.paths["converse-httpFileUpload"]="builds/converse-httpFileUpload";
 config.paths["converse-fullscreen"] =   "builds/converse-fullscreen";
 config.paths["converse-mam"] =          "builds/converse-mam";
 config.paths["converse-minimize"] =     "builds/converse-minimize";