From e8ef5997ebf1db19a28ded68ab43a3c5f1dada60 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 31 May 2019 11:01:52 +0200
Subject: [PATCH] Trigger file upload with button

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Editor.vue | 29 ++++++++++++++++++++++++++++-
 js/src/utils/upload.ts       | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 js/src/utils/upload.ts

diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index 8ff091c86..a40f5640e 100644
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -52,6 +52,13 @@
                     <b-icon icon="format-header-3" />
                 </button>
 
+                <button
+                        class="menubar__button"
+                        @click="showImagePrompt(commands.image)"
+                >
+                    <b-icon icon="image" />
+                </button>
+
                 <button
                         class="menubar__button"
                         :class="{ 'is-active': isActive.bullet_list() }"
@@ -167,6 +174,8 @@ import tippy, { Instance } from 'tippy.js';
 import { SEARCH_PERSONS } from '@/graphql/search';
 import { IActor } from '@/types/actor';
 import Image from '@/components/Editor/Image';
+import { UPLOAD_PICTURE } from '@/graphql/upload';
+import { listenFileUpload } from '@/utils/upload';
 
 @Component({
   components: { EditorContent, EditorMenuBar, EditorMenuBubble },
@@ -384,7 +393,7 @@ export default class CreateEvent extends Vue {
       arrow: true,
       arrowType: 'round',
     }) as Instance;
-        // we have to update tippy whenever the DOM is updated
+    // we have to update tippy whenever the DOM is updated
     if (MutationObserver) {
       this.observer = new MutationObserver(() => {
         if (this.popup != null && this.popup.popperInstance) {
@@ -409,6 +418,24 @@ export default class CreateEvent extends Vue {
     }
   }
 
+  /**
+   * Show a file prompt, upload picture and insert it into editor
+   * @param command
+   */
+  async showImagePrompt(command) {
+    const image = await listenFileUpload();
+    const { data } = await this.$apollo.mutate({
+      mutation: UPLOAD_PICTURE,
+      variables: {
+        file: image,
+        name: image.name,
+      },
+    });
+    if (data.uploadPicture && data.uploadPicture.url) {
+      command({ src: data.uploadPicture.url });
+    }
+  }
+
   beforeDestroy() {
     this.editor.destroy();
   }
diff --git a/js/src/utils/upload.ts b/js/src/utils/upload.ts
new file mode 100644
index 000000000..b415f0fa4
--- /dev/null
+++ b/js/src/utils/upload.ts
@@ -0,0 +1,36 @@
+/**
+ * Async function to upload a file
+ */
+export function listenFileUpload(): Promise<File> {
+  return new Promise((resolve, reject) => {
+    const inputElement = document.createElement('input');
+    inputElement.type = 'file';
+    inputElement.onchange = () => {
+      if (inputElement.files && inputElement.files.length > 0) {
+        resolve(inputElement.files[0]);
+      }
+    };
+
+    inputElement.onerror = reject;
+    inputElement.click();
+  });
+}
+
+/**
+ * Async function to upload a file
+ */
+export function listenFileUploads(): Promise<FileList> {
+  return new Promise((resolve, reject) => {
+    const inputElement = document.createElement('input');
+    inputElement.type = 'file';
+    inputElement.multiple = true;
+    inputElement.onchange = () => {
+      if (inputElement.files && inputElement.files.length > 0) {
+        resolve(inputElement.files);
+      }
+    };
+
+    inputElement.onerror = reject;
+    inputElement.click();
+  });
+}