From 3a5c20c17e4228ad37a35e7267ab890c7ae92bcb Mon Sep 17 00:00:00 2001
From: Abijeet <abijeetpatro@gmail.com>
Date: Sun, 18 Mar 2018 23:38:37 +0530
Subject: [PATCH] Removing the selected image and clearing the dropdzone on
 dialog close.

Towards #741

Signed-off-by: Abijeet <abijeetpatro@gmail.com>
---
 resources/assets/js/vues/components/dropzone.js    | 11 +++++++++--
 resources/assets/js/vues/image-manager.js          |  4 +++-
 resources/views/components/image-manager.blade.php |  6 +++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/resources/assets/js/vues/components/dropzone.js b/resources/assets/js/vues/components/dropzone.js
index e0a6d8b9d..65717b86b 100644
--- a/resources/assets/js/vues/components/dropzone.js
+++ b/resources/assets/js/vues/components/dropzone.js
@@ -12,7 +12,7 @@ const props = ['placeholder', 'uploadUrl', 'uploadedTo'];
 function mounted() {
    let container = this.$el;
    let _this = this;
-   new DropZone(container, {
+   this._dz = new DropZone(container, {
 	addRemoveLinks: true,
 	dictRemoveFile: trans('components.image_upload_remove'),
         url: function() {
@@ -51,12 +51,19 @@ function mounted() {
 }
 
 function data() {
-    return {}
+    return {};
 }
 
+const methods = {
+    onClose: function () {
+        this._dz.removeAllFiles(true);
+    }
+};
+
 module.exports = {
     template,
     props,
     mounted,
     data,
+    methods
 };
diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js
index 12ccc970d..89fe6769e 100644
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@@ -43,6 +43,8 @@ const methods = {
 
     hide() {
         this.showing = false;
+        this.selectedImage = false;
+        this.$refs.dropzone.onClose();
         this.$el.children[0].components.overlay.hide();
     },
 
@@ -175,4 +177,4 @@ module.exports = {
     data,
     computed,
     components: {dropzone},
-};
\ No newline at end of file
+};
diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php
index b860038b4..78c6435d6 100644
--- a/resources/views/components/image-manager.blade.php
+++ b/resources/views/components/image-manager.blade.php
@@ -1,10 +1,10 @@
 <div id="image-manager" image-type="{{ $imageType }}" uploaded-to="{{ $uploaded_to or 0 }}">
-    <div overlay v-cloak>
+    <div overlay v-cloak @click="hide()">
         <div class="popup-body" @click.stop="">
 
             <div class="popup-header primary-background">
                 <div class="popup-title">{{ trans('components.image_select') }}</div>
-                <button class="overlay-close neg corner-button button">x</button>
+                <button class="overlay-close neg corner-button button" @click="hide()">x</button>
             </div>
 
             <div class="flex-fill image-manager-body">
@@ -79,7 +79,7 @@
 
                         </div>
 
-                        <dropzone placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
+                        <dropzone ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
 
                     </div>
                 </div>