client/posts: tweak upload appearance and UX

1 files changed, 54 insertions, 38 deletions

diff --git a/client/js/controllers/post_upload_controller.js b/client/js/controllers/post_upload_controller.js
index 02b45cf..9cf3d4b 100644
--- a/client/js/controllers/post_upload_controller.js
+++ b/client/js/controllers/post_upload_controller.js
@@ -8,9 +8,13 @@ const Post = require('../models/post.js');
 const PostUploadView = require('../views/post_upload_view.js');
 const EmptyView = require('../views/empty_view.js');
 
+const genericErrorMessage =
+    'One of the posts needs your attention; ' +
+    'click "resume upload" when you\'re ready.';
+
 class PostUploadController {
     constructor() {
-        this._lastPromise = null;
+        this._lastCancellablePromise = null;
 
         if (!api.hasPrivilege('posts:create')) {
             this._view = new EmptyView();
@@ -22,6 +26,7 @@ class PostUploadController {
         topNavigation.setTitle('Upload');
         this._view = new PostUploadView({
             canUploadAnonymously: api.hasPrivilege('posts:create:anonymous'),
+            canViewPosts: api.hasPrivilege('posts:view'),
         });
         this._view.addEventListener('change', e => this._evtChange(e));
         this._view.addEventListener('submit', e => this._evtSubmit(e));
@@ -33,13 +38,13 @@ class PostUploadController {
             misc.enableExitConfirmation();
         } else {
             misc.disableExitConfirmation();
+            this._view.clearMessages();
         }
-        this._view.clearMessages();
     }
 
     _evtCancel(e) {
-        if (this._lastPromise) {
-            this._lastPromise.abort();
+        if (this._lastCancellablePromise) {
+            this._lastCancellablePromise.abort();
         }
     }
 
@@ -47,46 +52,57 @@ class PostUploadController {
         this._view.disableForm();
         this._view.clearMessages();
 
-        e.detail.uploadables.reduce((promise, uploadable) => {
-            return promise.then(() => {
-                let post = new Post();
-                post.safety = uploadable.safety;
-                post.flags = uploadable.flags;
-                if (uploadable.url) {
-                    post.newContentUrl = uploadable.url;
-                } else {
-                    post.newContent = uploadable.file;
-                }
+        e.detail.uploadables.reduce(
+            (promise, uploadable) =>
+                promise.then(() =>
+                    this._uploadSinglePost(
+                        uploadable, e.detail.skipDuplicates)),
+            Promise.resolve())
+                .then(() => {
+                    this._view.clearMessages();
+                    misc.disableExitConfirmation();
+                    const ctx = router.show('/posts');
+                    ctx.controller.showSuccess('Posts uploaded.');
+                }, errorContext => {
+                    if (errorContext.constructor === Array) {
+                        const [errorMessage, uploadable] = errorContext;
+                        this._view.showError(genericErrorMessage);
+                        this._view.showError(errorMessage, uploadable);
+                    } else {
+                        this._view.showError(errorContext);
+                    }
+                    this._view.enableForm();
+                    return Promise.reject();
+                });
+    }
 
-                let modelPromise = post.save(uploadable.anonymous);
-                this._lastPromise = modelPromise;
+    _uploadSinglePost(uploadable, skipDuplicates) {
+        let post = new Post();
+        post.safety = uploadable.safety;
+        post.flags = uploadable.flags;
 
-                return modelPromise
-                    .then(() => {
-                        this._view.removeUploadable(uploadable);
-                        return Promise.resolve();
-                    }).catch(errorMessage => {
-                        // XXX:
-                        // lame, API eats error codes so we need to match
-                        // messages instead
-                        if (e.detail.skipDuplicates &&
-                                errorMessage.match(/already uploaded/)) {
-                            return Promise.resolve();
-                        }
-                        return Promise.reject(errorMessage);
-                    });
-            });
-        }, Promise.resolve())
+        if (uploadable.url) {
+            post.newContentUrl = uploadable.url;
+        } else {
+            post.newContent = uploadable.file;
+        }
 
+        let savePromise = post.save(uploadable.anonymous)
             .then(() => {
-                misc.disableExitConfirmation();
-                const ctx = router.show('/posts');
-                ctx.controller.showSuccess('Posts uploaded.');
+                this._view.removeUploadable(uploadable);
+                return Promise.resolve();
             }, errorMessage => {
-                this._view.showError(errorMessage);
-                this._view.enableForm();
-                return Promise.reject();
+                // XXX:
+                // lame, API eats error codes so we need to match
+                // messages instead
+                if (skipDuplicates &&
+                        errorMessage.match(/already uploaded/)) {
+                    return Promise.resolve();
+                }
+                return Promise.reject([errorMessage, uploadable, null]);
             });
+        this._lastCancellablePromise = savePromise;
+        return savePromise;
     }
 }