client/file-dropper: refactor to use events

client/js/controls/file_dropper_control.js

@@ -1,12 +1,16 @@
 'use strict';
 
+const events = require('../events.js');
 const views = require('../util/views.js');
 
-class FileDropperControl {
+const template = views.getTemplate('file-dropper');
+
+class FileDropperControl extends events.EventTarget {
     constructor(target, options) {
+        super();
+
         this._options = options;
-        this._template = views.getTemplate('file-dropper');
-        const source = this._template({
+        const source = template({
             allowMultiple: this._options.allowMultiple,
             id: 'file-' + Math.random().toString(36).substring(7),
         });
@@ -34,15 +38,17 @@ class FileDropperControl {
 
     reset() {
         this._dropperNode.innerHTML = this._originalHtml;
+        this.dispatchEvent(new CustomEvent('reset'));
     }
 
-    _resolve(files) {
+    _emitFiles(files) {
         files = Array.from(files);
         if (this._options.lock) {
             this._dropperNode.innerText =
                 files.map(file => file.name).join(', ');
         }
-        this._options.resolve(files);
+        this.dispatchEvent(
+            new CustomEvent('fileadd', {detail: {files: files}}));
     }
 
     _evtFileChange(e) {
@@ -65,6 +71,10 @@ class FileDropperControl {
         e.preventDefault();
     }
 
+    _evtFileChange(e) {
+        this._emitFiles(e.target.files);
+    }
+
     _evtDrop(e) {
         e.preventDefault();
         this._dropperNode.classList.remove('active');
@@ -74,7 +84,7 @@ class FileDropperControl {
         if (!this._options.allowMultiple && e.dataTransfer.files.length > 1) {
             window.alert('Cannot select multiple files.');
         }
-        this._resolve(e.dataTransfer.files);
+        this._emitFiles(e.dataTransfer.files);
     }
 }
 

client/js/controls/post_edit_sidebar_control.js

@@ -62,25 +62,19 @@ class PostEditSidebarControl extends events.EventTarget {
 
         if (this._contentInputNode) {
             this._contentFileDropper = new FileDropperControl(
-                this._contentInputNode,
-                {
-                    lock: true,
-                    resolve: files => {
-                        this._newPostContent = files[0];
-                    },
-                });
+                this._contentInputNode, {lock: true});
+            this._contentFileDropper.addEventListener('fileadd', e => {
+                this._newPostContent = e.detail.files[0];
+            });
         }
 
         if (this._thumbnailInputNode) {
             this._thumbnailFileDropper = new FileDropperControl(
-                this._thumbnailInputNode,
-                {
-                    lock: true,
-                    resolve: files => {
-                        this._newPostThumbnail = files[0];
-                        this._thumbnailRemovalLinkNode.style.display = 'block';
-                    },
-                });
+                this._thumbnailInputNode, {lock: true});
+            this._thumbnailFileDropper.addEventListener('fileadd', e => {
+                this._newPostThumbnail = e.detail.files[0];
+                this._thumbnailRemovalLinkNode.style.display = 'block';
+            });
         }
 
         if (this._thumbnailRemovalLinkNode) {

client/js/views/user_edit_view.js

@@ -21,16 +21,13 @@ class UserEditView extends events.EventTarget {
 
         this._avatarContent = null;
         if (this._avatarContentInputNode) {
-            new FileDropperControl(
-                this._avatarContentInputNode,
-                {
-                    lock: true,
-                    resolve: files => {
-                        this._hostNode.querySelector(
-                            '[name=avatar-style][value=manual]').checked = true;
-                        this._avatarContent = files[0];
-                    },
-                });
+            this._avatarFileDropper = new FileDropperControl(
+                this._avatarContentInputNode, {lock: true});
+            this._avatarFileDropper.addEventListener('fileadd', e => {
+                this._hostNode.querySelector(
+                    '[name=avatar-style][value=manual]').checked = true;
+                this._avatarContent = e.detail.files[0];
+            });
         }
 
         this._formNode.addEventListener('submit', e => this._evtSubmit(e));