refactoring based on the review from jcbrand 06.Apr.2018

spec/http-file-upload.js

@@ -158,6 +158,7 @@
                             expect(entities.get('localhost').items.get('upload.localhost').identities.where({'category': 'store'}).length).toBe(1);
                             _converse.api.disco.supports(Strophe.NS.HTTPUPLOAD, _converse.domain).then(
                                 function (result) {
+                                    console.log("in the test the service is supported");
                                     expect(result.length).toBe(1);
                                     expect(result[0].get('jid')).toBe('upload.localhost');
                                     done();

src/build.js

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

src/config.js

@@ -74,7 +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-http-file-upload":"src/converse-http-file-upload",
         "converse-mam":             "src/converse-mam",
         "converse-minimize":        "src/converse-minimize",
         "converse-modal":           "src/converse-modal",

src/converse-chatboxes.js

@@ -15,8 +15,8 @@
 }(this, function (converse, tpl_chatboxes) {
     "use strict";
 
-    const { Backbone, Promise, Strophe, b64_sha1, moment, utils, _ } = converse.env;
-
+    const { $msg, Backbone, Promise, Strophe, b64_sha1, moment, utils, _ } = converse.env;
+    Strophe.addNamespace('OUTOFBAND', 'jabber:x:oob');
 
     converse.plugins.add('converse-chatboxes', {
 
@@ -50,7 +50,8 @@
             /* The initialize function gets called as soon as the plugin is
              * loaded by converse.js's plugin machinery.
              */
-            const { _converse } = this;
+            const { _converse } = this,
+                { __ } = _converse;
 
             _converse.api.promises.add([
                 'chatBoxesFetched',
@@ -115,6 +116,120 @@
                     });
                 },
 
+                createFileMessageStanza(message, to){
+                    const stanza = $msg({
+                        'from': _converse.connection.jid,
+                        'to': to,
+                        '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;
+                },
+
+                sendFile (file, chatbox) {
+                    const self = this;
+                    console.log('Send file via http upload');
+                    const request_slot_url = 'upload.' + _converse.domain;
+                    _converse.api.disco.supports(Strophe.NS.HTTPUPLOAD, request_slot_url)
+                        .then((result) => { 
+                            chatbox.showHelpMessages([__('The file upload starts now')],'info');
+                            self.requestSlot(file, request_slot_url, function(data) {
+                                if (!data) {
+                                    // general error
+                                    console.log('Unknown error while requesting upload slot.');
+                                    alert(__('File upload failed. Please check the log.'));
+                                } else if (data.error) {
+                                    // specific error
+                                    console.log('The XMPP-Server return an error of the type: ' + data.error.type);
+                                    alert(__('File upload failed. Please check the log.'));
+                                } else if (data.get && data.put) {
+                                    console.log('slot received, start upload to ' + data.put);
+                                    self.uploadFile(data.put, file, function() {
+                                        console.log(data.put);
+                                        chatbox.onMessageSubmitted(data.put, null, file);
+                                    });
+                                }
+                            });
+                        });
+                },
+
+                requestSlot (file, request_slot_url, cb) {
+                    const self = this;
+                    console.log("try sending file to: " + request_slot_url);
+                    const iq = converse.env.$iq({
+                        to: request_slot_url,
+                        type: 'get'
+                    }).c('request', {
+                        xmlns: Strophe.NS.HTTPUPLOAD
+                    }).c('filename').t(file.name)
+                    .up()
+                    .c('size').t(file.size);
+                
+                    _converse.connection.sendIQ(iq, function(stanza) {
+                        self.successfulRequestSlotCB(stanza, cb);
+                    }, function(stanza) {
+                        self.failedRequestSlotCB(stanza, cb);
+                    });
+                },
+                
+                /**
+                 * Upload the given file to the given url.
+                */
+                uploadFile (url, file, success_cb) {
+                    console.log("uploadFile start");
+                    const xmlhttp = new XMLHttpRequest();
+                    const contentType = 'application/octet-stream';
+                    xmlhttp.onreadystatechange = function() {
+                        if (xmlhttp.readyState === XMLHttpRequest.DONE) {   
+                            console.log("Status: " + xmlhttp.status);
+                            if (xmlhttp.status === 200 || xmlhttp.status === 201) {
+                                console.log('file successful uploaded');
+                                if (success_cb) {
+                                    success_cb();
+                                }    
+                            }
+                            else {
+                                console.log('error while uploading file to ' + url);
+                                alert(__('Could not upload File please try again.'));
+                            }
+                        }
+                    };
+                
+                    xmlhttp.open('PUT', url, true);
+                    xmlhttp.setRequestHeader("Content-type", contentType);
+                    xmlhttp.send(file);
+
+                    console.log("uploadFile end");
+                },
+                
+                /**
+                * Process successful response to slot request.
+                */
+                successfulRequestSlotCB (stanza, cb) {
+                    const slot = stanza.getElementsByTagName('slot')[0];
+                
+                    if (slot != undefined) {
+                        var put = slot.getElementsByTagName('put')[0].textContent;
+                        var get = slot.getElementsByTagName('get')[0].textContent;
+                        cb({
+                            put: put,
+                            get: get
+                        });
+                    } else {
+                        this.failedRequestSlotCB(stanza, cb);
+                    }
+                },
+                
+                /**
+                * Process failed response to slot request.
+                */
+                failedRequestSlotCB (stanza, cb) {
+                    alert(__('Could not upload File please try again.'));
+                },
+
                 getMessageBody (message) {
                     const type = message.getAttribute('type');
                     return (type === 'error') ?

src/converse-chatview.js

@@ -25,7 +25,7 @@
             "tpl!spoiler_button",
             "tpl!spoiler_message",
             "tpl!toolbar",
-            "converse-httpFileUpload",
+            "converse-http-file-upload",
             "converse-chatboxes"
     ], factory);
 }(this, function (
@@ -56,8 +56,6 @@
         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
@@ -236,7 +234,6 @@
                 }
             });
 
-
             _converse.ChatBoxView = Backbone.NativeView.extend({
                 length: 200,
                 className: 'chatbox hidden',
@@ -257,17 +254,14 @@
                     'change .fileUpload_input': 'handleFileSelect'
                 },
 
-                toggleFileUpload(ev) {
-                    _converse.FileUpload.prototype.initFiletransfer(_converse.connection);
-                    var uploadDialog = this.el.querySelector('.fileUpload_input');
-                    uploadDialog.click();
+                toggleFileUpload (ev) {
+                    this.el.querySelector('.fileUpload_input').click();
                 },
 
-                handleFileSelect(evt) {
+                handleFileSelect (evt) {
                     var files = evt.target.files;
                     var file = files[0];
-                    var jid = this.jid;
-                    _converse.FileUpload.prototype.setFile(file,this);
+                    this.model.sendFile(file, this);
                 },
 
                 initialize () {
@@ -662,9 +656,9 @@
                         this.renderSpoilerMessage(msg, attrs)
                     }
                     
-                    if(msg_content.textContent.endsWith('mp4')){
+                    if (msg_content.textContent.endsWith('mp4')) {
                         msg_content.innerHTML = u.renderMovieURLs(msg_content);
-                    } else if(msg_content.textContent.endsWith('mp3')){
+                    } else if (msg_content.textContent.endsWith('mp3')) {
                         msg_content.innerHTML = u.renderAudioURLs(msg_content); 
                     } else {
                         u.renderImageURLs(msg_content).then(this.scrollDown.bind(this));
@@ -800,18 +794,7 @@
                     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, file=null) {
                     /* Responsible for sending off a text message.
@@ -823,7 +806,7 @@
                     // Especially in the OTR case.
                     var messageStanza;
                     if(file !== null){
-                        messageStanza = this.createFileMessageStanza(message);
+                        messageStanza = this.createFileMessageStanza(message, this.model.get('jid'));
                     }
                     else {
                         messageStanza = this.createMessageStanza(message);
@@ -883,8 +866,7 @@
                     }
                     const attrs = this.getOutgoingMessageAttributes(text, spoiler_hint);
                     const message = this.model.messages.create(attrs);
-                    
-                    /* check, if a file was send. If true it will send the file with XEP-0066. */
+                
                     this.sendMessage(message, file);
                 },
 

src/converse-core.js

@@ -78,7 +78,7 @@
         'converse-dropdown',
         'converse-fullscreen',
         'converse-headline',
-        'converse-httpFileUpload',
+        'converse-http-file-upload',
         'converse-mam',
         'converse-minimize',
         'converse-modal',

src/converse-http-file-upload.js

+/**
+ * Adds Support for Http File Upload (XEP-0363)
+ *
+ * @see {@link http://xmpp.org/extensions/xep-0363.html}
+ */
+(function (root, factory) {
+    define([
+        "converse-core",
+    ], factory);
+}(this, function (
+        converse
+    ) {
+    "use strict";
+    const { $msg, Backbone, Strophe, _, b64_sha1, moment, utils } = converse.env;
+    Strophe.addNamespace('HTTPUPLOAD', 'urn:xmpp:http:upload');
+
+    converse.plugins.add('converse-http-file-upload', {
+
+        dependencies: ["converse-chatboxes", "converse-chatview"],
+
+        initialize () {
+            const { _converse } = this,
+                { __ } = _converse;
+            
+            _converse.FileUpload = Backbone.NativeView.extend({       
+                /**
+                * Request upload slot from xmpp-server
+                */
+                
+            })
+        }
+    });
+    
+    return converse;
+}));

src/converse-muc-views.js

@@ -82,8 +82,6 @@
         '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
@@ -697,17 +695,6 @@
                         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});
@@ -757,7 +744,7 @@
                      *    (String) text - The message text.
                      */
                     if(file !== null){
-                        return this.sendChatRoomFile(text);
+                        return this.model.sendChatRoomFile(text,this.model.get('jid'));
                     }
                     if (_converse.muc_disable_moderator_commands) {
                         return this.sendChatRoomMessage(text);

src/converse-muc.js

@@ -275,6 +275,18 @@
                     );
                 },
 
+                sendChatRoomFile (text, to) {
+                    const msgid = _converse.connection.getUniqueId();
+                    const stanza = $msg({
+                        'from': _converse.connection.jid,
+                        'to': to,
+                        'type': 'groupchat',
+                        'id': msgid
+                    }).c("body").t(text).up()
+                      .c("x", {'xmlns': Strophe.NS.OUTOFBAND}).c('url').t(text).up();
+                      _converse.connection.send(stanza);
+                },
+
                 directInvite (recipient, reason) {
                     /* Send a direct invitation as per XEP-0249
                      *

src/converse.js

@@ -24,7 +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-http-file-upload", // Support for XEP-0363
         "converse-fullscreen"
         /* END: Removable components */
     ], function (converse) {

src/inverse.js

@@ -25,7 +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
+        "converse-http-file-upload", // Support for XEP-0363
         /* END: Removable components */
 
         "converse-inverse",     // Inverse plugin for converse.js

tests/runner-transpiled.js

@@ -24,7 +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-http-file-upload"]="builds/converse-http-file-upload";
 config.paths["converse-fullscreen"] =   "builds/converse-fullscreen";
 config.paths["converse-mam"] =          "builds/converse-mam";
 config.paths["converse-minimize"] =     "builds/converse-minimize";