1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-21 05:26:10 +03:00

Removing the selected image and clearing the dropdzone on dialog close.

Towards #741

Signed-off-by: Abijeet <abijeetpatro@gmail.com>
This commit is contained in:
Abijeet 2018-03-18 23:38:37 +05:30
parent 83d830fd7d
commit 3a5c20c17e
3 changed files with 15 additions and 6 deletions

View File

@ -12,7 +12,7 @@ const props = ['placeholder', 'uploadUrl', 'uploadedTo'];
function mounted() { function mounted() {
let container = this.$el; let container = this.$el;
let _this = this; let _this = this;
new DropZone(container, { this._dz = new DropZone(container, {
addRemoveLinks: true, addRemoveLinks: true,
dictRemoveFile: trans('components.image_upload_remove'), dictRemoveFile: trans('components.image_upload_remove'),
url: function() { url: function() {
@ -51,12 +51,19 @@ function mounted() {
} }
function data() { function data() {
return {} return {};
} }
const methods = {
onClose: function () {
this._dz.removeAllFiles(true);
}
};
module.exports = { module.exports = {
template, template,
props, props,
mounted, mounted,
data, data,
methods
}; };

View File

@ -43,6 +43,8 @@ const methods = {
hide() { hide() {
this.showing = false; this.showing = false;
this.selectedImage = false;
this.$refs.dropzone.onClose();
this.$el.children[0].components.overlay.hide(); this.$el.children[0].components.overlay.hide();
}, },
@ -175,4 +177,4 @@ module.exports = {
data, data,
computed, computed,
components: {dropzone}, components: {dropzone},
}; };

View File

@ -1,10 +1,10 @@
<div id="image-manager" image-type="{{ $imageType }}" uploaded-to="{{ $uploaded_to or 0 }}"> <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-body" @click.stop="">
<div class="popup-header primary-background"> <div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.image_select') }}</div> <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>
<div class="flex-fill image-manager-body"> <div class="flex-fill image-manager-body">
@ -79,7 +79,7 @@
</div> </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>
</div> </div>