Don't store the `File` object in browserStorage

With the recent fixes in backbone.browserStorage, the 'file' attributes
gets persisted to browserStorage before Converse tries to upload the
file.

The File object can't actually be serialized, so an empty map gets
stored and then returned together with a 'change' event.

Instead, store the file as a direct attribute on the message object.

Fixes #1261

CHANGES.md

@@ -4,7 +4,8 @@
 
 - Use [Lerna](https://lernajs.io/) to create the @converse/headless package
 - Use ES2015 modules instead of UMD.
-- #1257: Prefer 'probably' over 'maybe' when evaluating audio play support.
+- #1257 Prefer 'probably' over 'maybe' when evaluating audio play support.
+- #1261 File upload not working
 
 ## 4.0.3 (2018-10-22)
 

package.json

@@ -40,7 +40,7 @@
     "awesomplete-avoid-xss": "^1.1.2",
     "babel-loader": "^8.0.0",
     "backbone": "1.3.3",
-    "backbone.browserStorage": "0.0.4",
+    "backbone.browserStorage": "jcbrand/Backbone.browserStorage#03bfa13f68b71f97be361840adc5a5064f57b47e",
     "backbone.nativeview": "^0.3.3",
     "backbone.overview": "^1.0.2",
     "backbone.vdomview": "^1.0.1",

src/converse-message-view.js

@@ -60,6 +60,10 @@ converse.plugins.add('converse-message-view', {
                 if (this.model.isOnlyChatStateNotification()) {
                     this.renderChatStateNotification()
                 } else if (this.model.get('file') && !this.model.get('oob_url')) {
+                    if (!this.model.file) {
+                        _converse.log("Attempted to render a file upload message with no file data");
+                        return this.el;
+                    }
                     this.renderFileUploadProgresBar();
                 } else if (this.model.get('type') === 'error') {
                     this.renderErrorMessage();
@@ -204,7 +208,7 @@ converse.plugins.add('converse-message-view', {
             renderFileUploadProgresBar () {
                 const msg = u.stringToElement(tpl_file_progress(
                     _.extend(this.model.toJSON(), {
-                        'filesize': filesize(this.model.get('file').size),
+                        'filesize': filesize(this.model.file.size),
                     })));
                 this.replaceElement(msg);
                 this.renderAvatar();

src/headless/converse-chatboxes.js

@@ -68,10 +68,6 @@ converse.plugins.add('converse-chatboxes', {
                 this.setVCard();
                 if (this.get('file')) {
                     this.on('change:put', this.uploadFile, this);
-
-                    if (!_.includes([_converse.SUCCESS, _converse.FAILURE], this.get('upload'))) {
-                        this.getRequestSlotURL();
-                    }
                 }
                 if (this.isOnlyChatStateNotification()) {
                     window.setTimeout(this.destroy.bind(this), 20000);
@@ -132,20 +128,20 @@ converse.plugins.add('converse-chatboxes', {
                  *
                  * https://xmpp.org/extensions/xep-0363.html#request
                  */
-                const file = this.get('file');
-                return new Promise((resolve, reject) => {
-                    const iq = converse.env.$iq({
-                        'from': _converse.jid,
-                        'to': this.get('slot_request_url'),
-                        'type': 'get'
-                    }).c('request', {
-                        'xmlns': Strophe.NS.HTTPUPLOAD,
-                        'filename': file.name,
-                        'size': file.size,
-                        'content-type': file.type
-                    })
-                    _converse.connection.sendIQ(iq, resolve, reject);
-                });
+                if (_.isNil(this.file)) {
+                    return Promise.reject(new Error("file is undefined"));
+                }
+                const iq = converse.env.$iq({
+                    'from': _converse.jid,
+                    'to': this.get('slot_request_url'),
+                    'type': 'get'
+                }).c('request', {
+                    'xmlns': Strophe.NS.HTTPUPLOAD,
+                    'filename': this.file.name,
+                    'size': this.file.size,
+                    'content-type': this.file.type
+                })
+                return _converse.api.sendIQ(iq);
             },
 
             getRequestSlotURL () {
@@ -417,39 +413,41 @@ converse.plugins.add('converse-chatboxes', {
             },
 
 
-            sendFiles (files) {
-                _converse.api.disco.supports(Strophe.NS.HTTPUPLOAD, _converse.domain).then((result) => {
-                    const item = result.pop(),
-                          data = item.dataforms.where({'FORM_TYPE': {'value': Strophe.NS.HTTPUPLOAD, 'type': "hidden"}}).pop(),
-                          max_file_size = window.parseInt(_.get(data, 'attributes.max-file-size.value')),
-                          slot_request_url = _.get(item, 'id');
+            async sendFiles (files) {
+                const result = await _converse.api.disco.supports(Strophe.NS.HTTPUPLOAD, _converse.domain),
+                      item = result.pop(),
+                      data = item.dataforms.where({'FORM_TYPE': {'value': Strophe.NS.HTTPUPLOAD, 'type': "hidden"}}).pop(),
+                      max_file_size = window.parseInt(_.get(data, 'attributes.max-file-size.value')),
+                      slot_request_url = _.get(item, 'id');
 
-                    if (!slot_request_url) {
-                        this.messages.create({
-                            'message': __("Sorry, looks like file upload is not supported by your server."),
-                            'type': 'error',
+                if (!slot_request_url) {
+                    this.messages.create({
+                        'message': __("Sorry, looks like file upload is not supported by your server."),
+                        'type': 'error'
+                    });
+                    return;
+                }
+                _.each(files, (file) => {
+                    if (!window.isNaN(max_file_size) && window.parseInt(file.size) > max_file_size) {
+                        return this.messages.create({
+                            'message': __('The size of your file, %1$s, exceeds the maximum allowed by your server, which is %2$s.',
+                                file.name, filesize(max_file_size)),
+                            'type': 'error'
                         });
-                        return;
+                    } else {
+                        const message = this.messages.create(
+                            _.extend(
+                                this.getOutgoingMessageAttributes(), {
+                                'file': file,
+                                'progress': 0,
+                                'slot_request_url': slot_request_url
+                            }), {'silent': true}
+                        );
+                        message.file = file;
+                        this.messages.trigger('add', message);
+                        message.getRequestSlotURL();
                     }
-                    _.each(files, (file) => {
-                        if (!window.isNaN(max_file_size) && window.parseInt(file.size) > max_file_size) {
-                            return this.messages.create({
-                                'message': __('The size of your file, %1$s, exceeds the maximum allowed by your server, which is %2$s.',
-                                    file.name, filesize(max_file_size)),
-                                'type': 'error',
-                            });
-                        } else {
-                            this.messages.create(
-                                _.extend(
-                                    this.getOutgoingMessageAttributes(), {
-                                    'file': file,
-                                    'progress': 0,
-                                    'slot_request_url': slot_request_url
-                                })
-                            );
-                        }
-                    });
-                }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
+                });
             },
 
             getReferencesFromStanza (stanza) {