client/posts: add custom thumbnail discarding

client/html/post_edit_sidebar.tpl

@@ -71,6 +71,8 @@
                     <label>Thumbnail</label>
 
                     <div class='dropper-container'></div>
+
+                    <a>Discard custom thumbnail</a>
                 </section>
             <% } %>
         </div>

client/js/api.js

@@ -74,7 +74,7 @@ class Api extends events.EventTarget {
             }
             if (files) {
                 for (let key of Object.keys(files)) {
-                    req.attach(key, files[key]);
+                    req.attach(key, files[key] || new Blob());
                 }
             }
             if (this.userName && this.userPassword) {

client/js/controls/post_edit_sidebar_control.js

@@ -58,10 +58,18 @@ class PostEditSidebarControl extends events.EventTarget {
                     lock: true,
                     resolve: files => {
                         this._newPostThumbnail = files[0];
+                        this._thumbnailRemovalLinkNode.style.display = 'block';
                     },
                 });
         }
 
+        if (this._thumbnailRemovalLinkNode) {
+            this._thumbnailRemovalLinkNode.addEventListener(
+                'click', e => this._evtRemoveThumbnailClick(e));
+            this._thumbnailRemovalLinkNode.style.display =
+                this._post.hasCustomThumbnail ? 'block' : 'none';
+        }
+
         this._post.addEventListener(
             'changeContent', e => this._evtPostContentChange(e));
 
@@ -88,6 +96,12 @@ class PostEditSidebarControl extends events.EventTarget {
         this._thumbnailFileDropper.reset();
     }
 
+    _evtRemoveThumbnailClick(e) {
+        this._thumbnailFileDropper.reset();
+        this._newPostThumbnail = null;
+        this._thumbnailRemovalLinkNode.style.display = 'none';
+    }
+
     _evtSubmit(e) {
         e.preventDefault();
         this.dispatchEvent(new CustomEvent('submit', {
@@ -116,7 +130,7 @@ class PostEditSidebarControl extends events.EventTarget {
                     this._newPostContent :
                     undefined,
 
-                thumbnail: this._newPostThumbnail ?
+                thumbnail: this._newPostThumbnail !== undefined ?
                     this._newPostThumbnail :
                     undefined,
             },
@@ -156,6 +170,10 @@ class PostEditSidebarControl extends events.EventTarget {
             '.post-thumbnail .dropper-container');
     }
 
+    get _thumbnailRemovalLinkNode() {
+        return this._formNode.querySelector('.post-thumbnail a');
+    }
+
     enableForm() {
         views.enableForm(this._formNode);
     }

client/js/models/post.js

@@ -37,6 +37,7 @@ class Post extends events.EventTarget {
     get favoriteCount()  { return this._favoriteCount; }
     get ownFavorite()    { return this._ownFavorite; }
     get ownScore()       { return this._ownScore; }
+    get hasCustomThumbnail() { return this._hasCustomThumbnail; }
 
     set flags(value)     { this._flags = value; }
     set tags(value)      { this._tags = value; }
@@ -101,7 +102,7 @@ class Post extends events.EventTarget {
         if (this._content) {
             files.content = this._content;
         }
-        if (this._thumbnail) {
+        if (this._thumbnail !== undefined) {
             files.thumbnail = this._thumbnail;
         }
 
@@ -227,6 +228,7 @@ class Post extends events.EventTarget {
             _favoriteCount: response.favoriteCount,
             _ownScore:      response.ownScore,
             _ownFavorite:   response.ownFavorite,
+            _hasCustomThumbnail: response.hasCustomThumbnail,
         };
 
         Object.assign(this, map);