From d5b922aa50236c047904e94ca38b62026af4bb68 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 13 May 2018 12:07:38 +0100
Subject: [PATCH 1/9] Started work on drawing revisions

Improved sidebar and selection styling of image manager.
Allowed image manager imageType to be changed on open.
Created models for image revisions.
---
 app/Http/Controllers/ImageController.php      | 26 ++++++-----
 app/Image.php                                 | 14 +++++-
 app/ImageRevision.php                         | 26 +++++++++++
 ...13_090521_create_image_revisions_table.php | 37 +++++++++++++++
 .../assets/js/components/wysiwyg-editor.js    | 25 +++++++++--
 resources/assets/js/vues/image-manager.js     | 42 +++++++++++------
 resources/assets/sass/_components.scss        | 28 ++++++++----
 resources/assets/sass/styles.scss             |  1 +
 resources/lang/de/components.php              |  3 +-
 resources/lang/en/components.php              |  3 +-
 resources/lang/es/components.php              |  3 +-
 resources/lang/es_AR/components.php           |  3 +-
 resources/lang/fr/components.php              |  3 +-
 resources/lang/it/components.php              |  3 +-
 resources/lang/ja/components.php              |  3 +-
 resources/lang/nl/components.php              |  3 +-
 resources/lang/pl/components.php              |  3 +-
 resources/lang/pt_BR/components.php           |  3 +-
 resources/lang/ru/components.php              |  3 +-
 resources/lang/sk/components.php              |  3 +-
 resources/lang/sv/components.php              |  3 +-
 resources/lang/zh_CN/components.php           |  3 +-
 resources/lang/zh_TW/components.php           |  3 +-
 .../views/components/image-manager.blade.php  | 45 +++++++++++--------
 routes/web.php                                |  1 +
 25 files changed, 217 insertions(+), 73 deletions(-)
 create mode 100644 app/ImageRevision.php
 create mode 100644 database/migrations/2018_05_13_090521_create_image_revisions_table.php

diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php
index 8437c80d7..277c27069 100644
--- a/app/Http/Controllers/ImageController.php
+++ b/app/Http/Controllers/ImageController.php
@@ -245,26 +245,28 @@ class ImageController extends Controller
     }
 
     /**
-     * Deletes an image and all thumbnail/image files
+     * Show the usage of an image on pages.
      * @param EntityRepo $entityRepo
-     * @param Request $request
+     * @param $id
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function usage(EntityRepo $entityRepo, $id)
+    {
+        $image = $this->imageRepo->getById($id);
+        $pageSearch = $entityRepo->searchForImage($image->url);
+        return response()->json($pageSearch);
+    }
+
+    /**
+     * Deletes an image and all thumbnail/image files
      * @param int $id
      * @return \Illuminate\Http\JsonResponse
      */
-    public function destroy(EntityRepo $entityRepo, Request $request, $id)
+    public function destroy($id)
     {
         $image = $this->imageRepo->getById($id);
         $this->checkOwnablePermission('image-delete', $image);
 
-        // Check if this image is used on any pages
-        $isForced = in_array($request->get('force', ''), [true, 'true']);
-        if (!$isForced) {
-            $pageSearch = $entityRepo->searchForImage($image->url);
-            if ($pageSearch !== false) {
-                return response()->json($pageSearch, 400);
-            }
-        }
-
         $this->imageRepo->destroyImage($image);
         return response()->json(trans('components.images_deleted'));
     }
diff --git a/app/Image.php b/app/Image.php
index ad23a077a..30bbe21e2 100644
--- a/app/Image.php
+++ b/app/Image.php
@@ -9,13 +9,23 @@ class Image extends Ownable
 
     /**
      * Get a thumbnail for this image.
-     * @param  int       $width
-     * @param  int       $height
+     * @param  int $width
+     * @param  int $height
      * @param bool|false $keepRatio
      * @return string
+     * @throws \Exception
      */
     public function getThumb($width, $height, $keepRatio = false)
     {
         return Images::getThumbnail($this, $width, $height, $keepRatio);
     }
+
+    /**
+     * Get the revisions for this image.
+     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     */
+    public function revisions()
+    {
+        return $this->hasMany(ImageRevision::class);
+    }
 }
diff --git a/app/ImageRevision.php b/app/ImageRevision.php
new file mode 100644
index 000000000..fde232867
--- /dev/null
+++ b/app/ImageRevision.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace BookStack;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ImageRevision extends Model
+{
+    /**
+     * Relation for the user that created this entity.
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
+    public function createdBy()
+    {
+        return $this->belongsTo(User::class, 'created_by');
+    }
+
+    /**
+     * Get the image that this is a revision of.
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
+    public function image()
+    {
+        return $this->belongsTo(Image::class);
+    }
+}
diff --git a/database/migrations/2018_05_13_090521_create_image_revisions_table.php b/database/migrations/2018_05_13_090521_create_image_revisions_table.php
new file mode 100644
index 000000000..968773a86
--- /dev/null
+++ b/database/migrations/2018_05_13_090521_create_image_revisions_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateImageRevisionsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('image_revisions', function (Blueprint $table) {
+            $table->increments('id');
+            $table->integer('image_id');
+            $table->string('path');
+            $table->string('url');
+            $table->integer('created_by');
+
+            $table->index('image_id');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('image_revisions');
+    }
+}
diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index 56aa294fa..03d73d2b5 100644
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -221,8 +221,6 @@ function codePlugin() {
 
 function drawIoPlugin() {
 
-    const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
-    let iframe = null;
     let pageEditor = null;
     let currentNode = null;
 
@@ -230,6 +228,20 @@ function drawIoPlugin() {
         return node.hasAttribute('drawio-diagram');
     }
 
+    function showDrawingManager(mceEditor, selectedNode = null) {
+        // TODO - Handle how image manager links in.
+        // Show image manager
+        window.ImageManager.show(function (image) {
+
+
+            // // Replace the actively selected content with the linked image
+            // let html = `<a href="${image.url}" target="_blank">`;
+            // html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+            // html += '</a>';
+            // win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
+        }, 'drawio');
+    }
+
     function showDrawingEditor(mceEditor, selectedNode = null) {
         pageEditor = mceEditor;
         currentNode = selectedNode;
@@ -287,7 +299,12 @@ function drawIoPlugin() {
     window.tinymce.PluginManager.add('drawio', function(editor, url) {
 
         editor.addCommand('drawio', () => {
-            showDrawingEditor(editor);
+            let selectedNode = editor.selection.getNode();
+            if (isDrawing(selectedNode)) {
+                showDrawingManager(editor, selectedNode);
+            } else {
+                showDrawingEditor(editor);
+            }
         });
 
         editor.addButton('drawio', {
@@ -443,7 +460,7 @@ class WysiwygEditor {
                         html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
                         html += '</a>';
                         win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
-                    });
+                    }, 'gallery');
                 }
 
             },
diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js
index 89fe6769e..bef666192 100644
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@@ -26,17 +26,22 @@ const data = {
 
     imageUpdateSuccess: false,
     imageDeleteSuccess: false,
+    deleteConfirm: false,
 };
 
 const methods = {
 
-    show(providedCallback) {
+    show(providedCallback, imageType = null) {
         callback = providedCallback;
         this.showing = true;
         this.$el.children[0].components.overlay.show();
 
         // Get initial images if they have not yet been loaded in.
-        if (dataLoaded) return;
+        if (dataLoaded && imageType === this.imageType) return;
+        if (imageType) {
+            this.imageType = imageType;
+            this.resetState();
+        }
         this.fetchData();
         dataLoaded = true;
     },
@@ -62,13 +67,18 @@ const methods = {
     },
 
     setView(viewName) {
+        this.view = viewName;
+        this.resetState();
+        this.fetchData();
+    },
+
+    resetState() {
         this.cancelSearch();
         this.images = [];
         this.hasMore = false;
+        this.deleteConfirm = false;
         page = 0;
-        this.view = viewName;
-        baseUrl = window.baseUrl(`/images/${this.imageType}/${viewName}/`);
-        this.fetchData();
+        baseUrl = window.baseUrl(`/images/${this.imageType}/${this.view}/`);
     },
 
     searchImages() {
@@ -105,6 +115,7 @@ const methods = {
             this.callbackAndHide(image);
         } else {
             this.selectedImage = image;
+            this.deleteConfirm = false;
             this.dependantPages = false;
         }
 
@@ -134,17 +145,22 @@ const methods = {
     },
 
     deleteImage() {
-        let force = this.dependantPages !== false;
-        let url = window.baseUrl('/images/' + this.selectedImage.id);
-        if (force) url += '?force=true';
-        this.$http.delete(url).then(response => {
+
+        if (!this.deleteConfirm) {
+            let url = window.baseUrl(`/images/usage/${this.selectedImage.id}`);
+            this.$http.get(url).then(resp => {
+                this.dependantPages = resp.data;
+            }).catch(console.error).then(() => {
+                this.deleteConfirm = true;
+            });
+            return;
+        }
+
+        this.$http.delete(`/images/${this.selectedImage.id}`).then(resp => {
             this.images.splice(this.images.indexOf(this.selectedImage), 1);
             this.selectedImage = false;
             this.$events.emit('success', trans('components.image_delete_success'));
-        }).catch(error=> {
-            if (error.response.status === 400) {
-                this.dependantPages = error.response.data;
-            }
+            this.deleteConfirm = false;
         });
     },
 
diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 31e006e27..27dcfda64 100644
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -146,7 +146,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .dropzone-container {
   position: relative;
-  border: 3px dashed #DDD;
+  background-color: #EEE;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .image-manager-list .image {
@@ -163,8 +164,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
   overflow: hidden;
   &.selected {
-    transform: scale3d(0.92, 0.92, 0.92);
-    border: 1px solid #444;
+    //transform: scale3d(0.92, 0.92, 0.92);
+    border: 4px solid #FFF;
+    overflow: hidden;
+    border-radius: 8px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   }
   img {
@@ -210,12 +213,21 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 .image-manager-sidebar {
   width: 300px;
   margin-left: 1px;
-  padding: $-m $-l;
   overflow-y: auto;
   overflow-x: hidden;
   border-left: 1px solid #DDD;
+  .inner {
+    padding: $-m;
+  }
+  img {
+    max-width: 100%;
+    max-height: 200px;
+    display: block;
+    margin: 0 auto $-m auto;
+    box-shadow: $bs-light;
+  }
   .dropzone-container {
-    margin-top: $-m;
+    border-bottom: 1px solid #DDD;
   }
 }
 
@@ -242,10 +254,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
  * Copyright (c) 2012 Matias Meno <m@tias.me>
  */
 .dz-message {
-  font-size: 1.2em;
-  line-height: 1.1;
+  font-size: 1em;
+  line-height: 2.35;
   font-style: italic;
-  color: #aaa;
+  color: #888;
   text-align: center;
   cursor: pointer;
   padding: $-l $-m;
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index c7d288ad3..0b2dfbf75 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -154,6 +154,7 @@ $btt-size: 40px;
   }
   input {
     flex: 5;
+    padding: $-xs $-s;
     &:focus, &:active {
       outline: 0;
     }
diff --git a/resources/lang/de/components.php b/resources/lang/de/components.php
index 510af4dd3..af07f2698 100644
--- a/resources/lang/de/components.php
+++ b/resources/lang/de/components.php
@@ -12,7 +12,8 @@ return [
     'image_uploaded' => 'Hochgeladen am :uploadedDate',
     'image_load_more' => 'Mehr',
     'image_image_name' => 'Bildname',
-    'image_delete_confirm' => 'Dieses Bild wird auf den folgenden Seiten benutzt. Bitte klicken Sie erneut auf löschen, wenn Sie dieses Bild wirklich entfernen möchten.',
+    'image_delete_used' => 'Dieses Bild wird auf den folgenden Seiten benutzt. ',
+    'image_delete_confirm' => 'Bitte klicken Sie erneut auf löschen, wenn Sie dieses Bild wirklich entfernen möchten.',
     'image_select_image' => 'Bild auswählen',
     'image_dropzone' => 'Ziehen Sie Bilder hierher oder klicken Sie, um ein Bild auszuwählen',
     'images_deleted' => 'Bilder gelöscht',
diff --git a/resources/lang/en/components.php b/resources/lang/en/components.php
index 2266fe2b2..c093f7316 100644
--- a/resources/lang/en/components.php
+++ b/resources/lang/en/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Uploaded :uploadedDate',
     'image_load_more' => 'Load More',
     'image_image_name' => 'Image Name',
-    'image_delete_confirm' => 'This image is used in the pages below, Click delete again to confirm you want to delete this image.',
+    'image_delete_used' => 'This image is used in the pages below.',
+    'image_delete_confirm' => 'Click delete again to confirm you want to delete this image.',
     'image_select_image' => 'Select Image',
     'image_dropzone' => 'Drop images or click here to upload',
     'images_deleted' => 'Images Deleted',
diff --git a/resources/lang/es/components.php b/resources/lang/es/components.php
index a13d5d4fb..cdcba487d 100644
--- a/resources/lang/es/components.php
+++ b/resources/lang/es/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Subido el :uploadedDate',
     'image_load_more' => 'Cargar más',
     'image_image_name' => 'Nombre de imagen',
-    'image_delete_confirm' => 'Esta imagen está siendo utilizada en las páginas mostradas a continuación, haga click de nuevo para confirmar que quiere borrar esta imagen.',
+    'image_delete_used' => 'Esta imagen está siendo utilizada en las páginas mostradas a continuación.',
+    'image_delete_confirm' => 'Haga click de nuevo para confirmar que quiere borrar esta imagen.',
     'image_select_image' => 'Seleccionar Imagen',
     'image_dropzone' => 'Arrastre las imágenes o hacer click aquí para Subir',
     'images_deleted' => 'Imágenes borradas',
diff --git a/resources/lang/es_AR/components.php b/resources/lang/es_AR/components.php
index ef4f33111..ea61f5f4c 100644
--- a/resources/lang/es_AR/components.php
+++ b/resources/lang/es_AR/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Subido el :uploadedDate',
     'image_load_more' => 'Cargar más',
     'image_image_name' => 'Nombre de imagen',
-    'image_delete_confirm' => 'Esta imagen esta siendo utilizada en las páginas a continuación, haga click de nuevo para confirmar que quiere borrar esta imagen.',
+    'image_delete_used' => 'Esta imagen esta siendo utilizada en las páginas a continuación.',
+    'image_delete_confirm' => 'Haga click de nuevo para confirmar que quiere borrar esta imagen.',
     'image_select_image' => 'Seleccionar Imagen',
     'image_dropzone' => 'Arrastre las imágenes o hacer click aquí para Subir',
     'images_deleted' => 'Imágenes borradas',
diff --git a/resources/lang/fr/components.php b/resources/lang/fr/components.php
index ddfe665d9..438137b5e 100644
--- a/resources/lang/fr/components.php
+++ b/resources/lang/fr/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Ajoutée le :uploadedDate',
     'image_load_more' => 'Charger plus',
     'image_image_name' => 'Nom de l\'image',
-    'image_delete_confirm' => 'Cette image est utilisée dans les pages ci-dessous. Confirmez que vous souhaitez bien supprimer cette image.',
+    'image_delete_used' => 'Cette image est utilisée dans les pages ci-dessous.',
+    'image_delete_confirm' => 'Confirmez que vous souhaitez bien supprimer cette image.',
     'image_select_image' => 'Selectionner l\'image',
     'image_dropzone' => 'Glissez les images ici ou cliquez pour les ajouter',
     'images_deleted' => 'Images supprimées',
diff --git a/resources/lang/it/components.php b/resources/lang/it/components.php
index 081a4c0e6..c9ab18a3e 100755
--- a/resources/lang/it/components.php
+++ b/resources/lang/it/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Uploaded :uploadedDate',
     'image_load_more' => 'Carica Altre',
     'image_image_name' => 'Nome Immagine',
-    'image_delete_confirm' => 'Questa immagine è usata nelle pagine elencate, clicca elimina nuovamente per confermare.',
+    'image_delete_used' => 'Questa immagine è usata nelle pagine elencate.',
+    'image_delete_confirm' => 'Clicca elimina nuovamente per confermare.',
     'image_select_image' => 'Seleziona Immagine',
     'image_dropzone' => 'Rilascia immagini o clicca qui per caricarle',
     'images_deleted' => 'Immagini Eliminate',
diff --git a/resources/lang/ja/components.php b/resources/lang/ja/components.php
index 8e9eb2e47..53a9cda1b 100644
--- a/resources/lang/ja/components.php
+++ b/resources/lang/ja/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'アップロード日時: :uploadedDate',
     'image_load_more' => 'さらに読み込む',
     'image_image_name' => '画像名',
-    'image_delete_confirm' => 'この画像は以下のページで利用されています。削除してもよろしければ、再度ボタンを押して下さい。',
+    'image_delete_used' => 'この画像は以下のページで利用されています。',
+    'image_delete_confirm' => '削除してもよろしければ、再度ボタンを押して下さい。',
     'image_select_image' => '選択',
     'image_dropzone' => '画像をドロップするか、クリックしてアップロード',
     'images_deleted' => '画像を削除しました',
diff --git a/resources/lang/nl/components.php b/resources/lang/nl/components.php
index fb306820e..576298ef2 100644
--- a/resources/lang/nl/components.php
+++ b/resources/lang/nl/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Uploaded :uploadedDate',
     'image_load_more' => 'Meer Laden',
     'image_image_name' => 'Afbeeldingsnaam',
-    'image_delete_confirm' => 'Deze afbeeldingen is op onderstaande pagina\'s in gebruik, Klik opnieuw op verwijderen om de afbeelding echt te verwijderen.',
+    'image_delete_used' => 'Deze afbeeldingen is op onderstaande pagina\'s in gebruik.',
+    'image_delete_confirm' => 'Klik opnieuw op verwijderen om de afbeelding echt te verwijderen.',
     'image_select_image' => 'Kies Afbeelding',
     'image_dropzone' => 'Sleep afbeeldingen hier of klik hier om te uploaden',
     'images_deleted' => 'Verwijderde Afbeeldingen',
diff --git a/resources/lang/pl/components.php b/resources/lang/pl/components.php
index c1dbcd44b..177fdba5f 100644
--- a/resources/lang/pl/components.php
+++ b/resources/lang/pl/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Udostępniono :uploadedDate',
     'image_load_more' => 'Wczytaj więcej',
     'image_image_name' => 'Nazwa obrazka',
-    'image_delete_confirm' => 'Ten obrazek jest używany na stronach poniżej, kliknij ponownie Usuń by potwierdzić usunięcie obrazka.',
+    'image_delete_used' => 'Ten obrazek jest używany na stronach poniżej.',
+    'image_delete_confirm' => 'Kliknij ponownie Usuń by potwierdzić usunięcie obrazka.',
     'image_select_image' => 'Wybierz obrazek',
     'image_dropzone' => 'Upuść obrazki tutaj lub kliknij by wybrać obrazki do udostępnienia',
     'images_deleted' => 'Usunięte obrazki',
diff --git a/resources/lang/pt_BR/components.php b/resources/lang/pt_BR/components.php
index 03fd4ac0c..872c00c9f 100644
--- a/resources/lang/pt_BR/components.php
+++ b/resources/lang/pt_BR/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Carregado :uploadedDate',
     'image_load_more' => 'Carregar Mais',
     'image_image_name' => 'Nome da Imagem',
-    'image_delete_confirm' => 'Essa imagem é usada nas páginas abaixo. Clique em Excluir novamente para confirmar que você deseja mesmo eliminar a imagem.',
+    'image_delete_used' => 'Essa imagem é usada nas páginas abaixo.',
+    'image_delete_confirm' => 'Clique em Excluir novamente para confirmar que você deseja mesmo eliminar a imagem.',
     'image_select_image' => 'Selecionar Imagem',
     'image_dropzone' => 'Arraste imagens ou clique aqui para fazer upload',
     'images_deleted' => 'Imagens excluídas',
diff --git a/resources/lang/ru/components.php b/resources/lang/ru/components.php
index 49aed1e87..6ee44d6be 100644
--- a/resources/lang/ru/components.php
+++ b/resources/lang/ru/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Загруженно :uploadedDate',
     'image_load_more' => 'Загрузить ещё',
     'image_image_name' => 'Имя изображения',
-    'image_delete_confirm' => 'Это изображение используется на странице ниже. Снова кликните удалить для подтверждения того что вы хотите удалить.',
+    'image_delete_used' => 'Это изображение используется на странице ниже.',
+    'image_delete_confirm' => 'Снова кликните удалить для подтверждения того что вы хотите удалить.',
     'image_select_image' => 'Выбрать изображение',
     'image_dropzone' => 'Перетащите изображение или кликните для загрузки',
     'images_deleted' => 'Изображения удалены',
diff --git a/resources/lang/sk/components.php b/resources/lang/sk/components.php
index f4fa92043..c20b62c7a 100644
--- a/resources/lang/sk/components.php
+++ b/resources/lang/sk/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Nahrané :uploadedDate',
     'image_load_more' => 'Načítať viac',
     'image_image_name' => 'Názov obrázka',
-    'image_delete_confirm' => 'Tento obrázok je použitý na stránkach uvedených nižšie, kliknite znova na zmazať pre potvrdenie zmazania tohto obrázka.',
+    'image_delete_used' => 'Tento obrázok je použitý na stránkach uvedených nižšie.',
+    'image_delete_confirm' => 'Kliknite znova na zmazať pre potvrdenie zmazania tohto obrázka.',
     'image_select_image' => 'Vybrať obrázok',
     'image_dropzone' => 'Presuňte obrázky sem alebo kliknite sem pre nahranie',
     'images_deleted' => 'Obrázky zmazané',
diff --git a/resources/lang/sv/components.php b/resources/lang/sv/components.php
index 7249c5c1f..318a2ee5c 100644
--- a/resources/lang/sv/components.php
+++ b/resources/lang/sv/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Laddades upp :uploadedDate',
     'image_load_more' => 'Ladda fler',
     'image_image_name' => 'Bildnamn',
-    'image_delete_confirm' => 'Den här bilden används på nedanstående sidor, klicka på "ta bort" en gång till för att bekräfta att du vill ta bort bilden.',
+    'image_delete_used' => 'Den här bilden används på nedanstående sidor.',
+    'image_delete_confirm' => 'Klicka på "ta bort" en gång till för att bekräfta att du vill ta bort bilden.',
     'image_select_image' => 'Välj bild',
     'image_dropzone' => 'Släpp bilder här eller klicka för att ladda upp',
     'images_deleted' => 'Bilder borttagna',
diff --git a/resources/lang/zh_CN/components.php b/resources/lang/zh_CN/components.php
index 9e6f28649..42857b9e7 100644
--- a/resources/lang/zh_CN/components.php
+++ b/resources/lang/zh_CN/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => '上传于 :uploadedDate',
     'image_load_more' => '显示更多',
     'image_image_name' => '图片名称',
-    'image_delete_confirm' => '该图像用于以下页面，如果你想删除它，请再次按下按钮。',
+    'image_delete_used' => '该图像用于以下页面。',
+    'image_delete_confirm' => '如果你想删除它，请再次按下按钮。',
     'image_select_image' => '选择图片',
     'image_dropzone' => '拖放图片或点击此处上传',
     'images_deleted' => '图片已删除',
diff --git a/resources/lang/zh_TW/components.php b/resources/lang/zh_TW/components.php
index ae0a083ad..e8826eebb 100644
--- a/resources/lang/zh_TW/components.php
+++ b/resources/lang/zh_TW/components.php
@@ -13,7 +13,8 @@ return [
     'image_uploaded' => '上傳於 :uploadedDate',
     'image_load_more' => '載入更多',
     'image_image_name' => '圖片名稱',
-    'image_delete_confirm' => '所使用圖片目前用於以下頁面，如果你想刪除它，請再次按下按鈕。',
+    'image_delete_used' => '所使用圖片目前用於以下頁面。',
+    'image_delete_confirm' => '如果你想刪除它，請再次按下按鈕。',
     'image_select_image' => '選擇圖片',
     'image_dropzone' => '拖曳圖片或點選這裡上傳',
     'images_deleted' => '圖片已刪除',
diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php
index 78c6435d6..45b30697b 100644
--- a/resources/views/components/image-manager.blade.php
+++ b/resources/views/components/image-manager.blade.php
@@ -1,5 +1,5 @@
 <div id="image-manager" image-type="{{ $imageType }}" uploaded-to="{{ $uploaded_to or 0 }}">
-    <div overlay v-cloak @click="hide()">
+    <div overlay v-cloak @click="hide">
         <div class="popup-body" @click.stop="">
 
             <div class="popup-header primary-background">
@@ -40,6 +40,9 @@
                 </div>
 
                 <div class="image-manager-sidebar">
+
+                    <dropzone ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
+
                     <div class="inner">
 
                         <div class="image-manager-details anim fadeIn" v-if="selectedImage">
@@ -47,39 +50,43 @@
                             <form @submit.prevent="saveImageDetails">
                                 <div>
                                     <a :href="selectedImage.url" target="_blank" style="display: block;">
-                                        <img :src="selectedImage.thumbs.gallery" :alt="selectedImage.title"
+                                        <img :src="selectedImage.thumbs.display" :alt="selectedImage.title"
                                              :title="selectedImage.name">
                                     </a>
                                 </div>
                                 <div class="form-group">
                                     <label for="name">{{ trans('components.image_image_name') }}</label>
-                                    <input id="name" name="name" v-model="selectedImage.name">
+                                    <input id="name" class="input-base" name="name" v-model="selectedImage.name">
                                 </div>
                             </form>
 
-                            <div v-show="dependantPages">
-                                <p class="text-neg text-small">
-                                    {{ trans('components.image_delete_confirm') }}
-                                </p>
-                                <ul class="text-neg">
-                                    <li v-for="page in dependantPages">
-                                        <a :href="page.url" target="_blank" class="text-neg" v-text="page.name"></a>
-                                    </li>
-                                </ul>
-                            </div>
-
                             <div class="clearfix">
-                                <form class="float left" @submit.prevent="deleteImage">
-                                    <button class="button icon neg">@icon('delete')</button>
-                                </form>
-                                <button class="button pos anim fadeIn float right" v-show="selectedImage" @click="callbackAndHide(selectedImage)">
+                                <div class="float left">
+                                    <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
+
+                                </div>
+                                <button class="button anim fadeIn float right" v-show="selectedImage" @click="callbackAndHide(selectedImage)">
                                     {{ trans('components.image_select_image') }}
                                 </button>
+                                <div class="clearfix"></div>
+                                <div v-show="dependantPages">
+                                    <p class="text-neg text-small">
+                                        {{ trans('components.image_delete_used') }}
+                                    </p>
+                                    <ul class="text-neg">
+                                        <li v-for="page in dependantPages">
+                                            <a :href="page.url" target="_blank" class="text-neg" v-text="page.name"></a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div v-show="deleteConfirm" class="text-neg text-small">
+                                    {{ trans('components.image_delete_confirm') }}
+                                </div>
                             </div>
 
                         </div>
 
-                        <dropzone ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
+
 
                     </div>
                 </div>
diff --git a/routes/web.php b/routes/web.php
index f7b2347a5..0efd19efe 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -97,6 +97,7 @@ Route::group(['middleware' => 'auth'], function () {
         Route::put('/update/{imageId}', 'ImageController@update');
         Route::post('/drawing/upload', 'ImageController@uploadDrawing');
         Route::put('/drawing/upload/{id}', 'ImageController@replaceDrawing');
+        Route::get('/usage/{id}', 'ImageController@usage');
         Route::post('/{type}/upload', 'ImageController@uploadByType');
         Route::get('/{type}/all', 'ImageController@getAllByType');
         Route::get('/{type}/all/{page}', 'ImageController@getAllByType');

From 13ad0031d64ebaff08c2f7b8e1ff819958f6fce3 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 13 May 2018 17:41:35 +0100
Subject: [PATCH 2/9] Drawings now generate revisions, not replace

Updated drawing update test to accomodate.
Image deletion system now takes revisions into account.
---
 app/Http/Controllers/ImageController.php      |   4 +-
 app/Image.php                                 |  11 ++
 app/Repos/ImageRepo.php                       |   9 +-
 app/Repos/UserRepo.php                        |   2 +-
 app/Services/ImageService.php                 | 112 +++++++++++++-----
 ...13_090521_create_image_revisions_table.php |   1 +
 routes/web.php                                |   2 +-
 tests/ImageTest.php                           |  11 +-
 8 files changed, 112 insertions(+), 40 deletions(-)

diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php
index 277c27069..b156a8425 100644
--- a/app/Http/Controllers/ImageController.php
+++ b/app/Http/Controllers/ImageController.php
@@ -170,7 +170,7 @@ class ImageController extends Controller
      * @param Request $request
      * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\JsonResponse|\Symfony\Component\HttpFoundation\Response
      */
-    public function replaceDrawing(string $id, Request $request)
+    public function updateDrawing(string $id, Request $request)
     {
         $this->validate($request, [
             'image' => 'required|string'
@@ -182,7 +182,7 @@ class ImageController extends Controller
         $this->checkOwnablePermission('image-update', $image);
 
         try {
-            $image = $this->imageRepo->replaceDrawingContent($image, $imageBase64Data);
+            $image = $this->imageRepo->updateDrawing($image, $imageBase64Data);
         } catch (ImageUploadException $e) {
             return response($e->getMessage(), 500);
         }
diff --git a/app/Image.php b/app/Image.php
index 30bbe21e2..ac94d9bf0 100644
--- a/app/Image.php
+++ b/app/Image.php
@@ -28,4 +28,15 @@ class Image extends Ownable
     {
         return $this->hasMany(ImageRevision::class);
     }
+
+    /**
+     * Get the count of revisions made to this image.
+     * Based off numbers on revisions rather than raw count of attached revisions
+     * as they may be cleared up or revisions deleted at some point.
+     * @return int
+     */
+    public function revisionCount()
+    {
+        return intval($this->revisions()->max('revision'));
+    }
 }
diff --git a/app/Repos/ImageRepo.php b/app/Repos/ImageRepo.php
index 245c0f27b..eff856872 100644
--- a/app/Repos/ImageRepo.php
+++ b/app/Repos/ImageRepo.php
@@ -160,9 +160,9 @@ class ImageRepo
      * @return Image
      * @throws \BookStack\Exceptions\ImageUploadException
      */
-    public function replaceDrawingContent(Image $image, string $base64Uri)
+    public function updateDrawing(Image $image, string $base64Uri)
     {
-        return $this->imageService->replaceImageDataFromBase64Uri($image, $base64Uri);
+        return $this->imageService->updateImageFromBase64Uri($image, $base64Uri);
     }
 
     /**
@@ -183,13 +183,14 @@ class ImageRepo
 
 
     /**
-     * Destroys an Image object along with its files and thumbnails.
+     * Destroys an Image object along with its revisions, files and thumbnails.
      * @param Image $image
      * @return bool
+     * @throws \Exception
      */
     public function destroyImage(Image $image)
     {
-        $this->imageService->destroyImage($image);
+        $this->imageService->destroy($image);
         return true;
     }
 
diff --git a/app/Repos/UserRepo.php b/app/Repos/UserRepo.php
index 3cfd61d27..d113b676a 100644
--- a/app/Repos/UserRepo.php
+++ b/app/Repos/UserRepo.php
@@ -166,7 +166,7 @@ class UserRepo
         // Delete user profile images
         $profileImages = $images = Image::where('type', '=', 'user')->where('created_by', '=', $user->id)->get();
         foreach ($profileImages as $image) {
-            Images::destroyImage($image);
+            Images::destroy($image);
         }
     }
 
diff --git a/app/Services/ImageService.php b/app/Services/ImageService.php
index 06ef3a0f0..e83c1860b 100644
--- a/app/Services/ImageService.php
+++ b/app/Services/ImageService.php
@@ -2,12 +2,12 @@
 
 use BookStack\Exceptions\ImageUploadException;
 use BookStack\Image;
+use BookStack\ImageRevision;
 use BookStack\User;
 use Exception;
 use Intervention\Image\Exception\NotSupportedException;
 use Intervention\Image\ImageManager;
 use Illuminate\Contracts\Filesystem\Factory as FileSystem;
-use Illuminate\Contracts\Filesystem\Filesystem as FileSystemInstance;
 use Illuminate\Contracts\Cache\Repository as Cache;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 
@@ -83,28 +83,19 @@ class ImageService extends UploadService
     }
 
     /**
-     * Replace the data for an image via a Base64 encoded string.
      * @param Image $image
      * @param string $base64Uri
      * @return Image
      * @throws ImageUploadException
      */
-    public function replaceImageDataFromBase64Uri(Image $image, string $base64Uri)
+    public function updateImageFromBase64Uri(Image $image, string $base64Uri)
     {
         $splitData = explode(';base64,', $base64Uri);
         if (count($splitData) < 2) {
             throw new ImageUploadException("Invalid base64 image data provided");
         }
         $data = base64_decode($splitData[1]);
-        $storage = $this->getStorage();
-
-        try {
-            $storage->put($image->path, $data);
-        } catch (Exception $e) {
-            throw new ImageUploadException(trans('errors.path_not_writable', ['filePath' => $image->path]));
-        }
-
-        return $image;
+        return $this->update($image, $data);
     }
 
     /**
@@ -178,13 +169,57 @@ class ImageService extends UploadService
     }
 
     /**
-     * Get the storage path, Dependant of storage type.
+     * Update the content of an existing image.
+     * Uploaded the new image content and creates a revision for the old image content.
      * @param Image $image
-     * @return mixed|string
+     * @param $imageData
+     * @return Image
+     * @throws ImageUploadException
      */
-    protected function getPath(Image $image)
+    private function update(Image $image, $imageData)
     {
-        return $image->path;
+        // Save image revision if not previously exists to ensure we always have
+        // a reference to the image files being uploaded.
+        if ($image->revisions()->count() === 0) {
+            $this->saveImageRevision($image);
+        }
+
+        $pathInfo = pathinfo($image->path);
+        $revisionCount = $image->revisionCount() + 1;
+        $newFileName = preg_replace('/^(.+?)(-v\d+)?$/', '$1-v' . $revisionCount, $pathInfo['filename']);
+
+        $image->path = str_replace_last($pathInfo['filename'], $newFileName, $image->path);
+        $image->url = $this->getPublicUrl($image->path);
+        $image->updated_by = user()->id;
+
+        $storage = $this->getStorage();
+
+        try {
+            $storage->put($image->path, $imageData);
+            $storage->setVisibility($image->path, 'public');
+            $image->save();
+            $this->saveImageRevision($image);
+        } catch (Exception $e) {
+            throw new ImageUploadException(trans('errors.path_not_writable', ['filePath' => $image->path]));
+        }
+        return $image;
+    }
+
+    /**
+     * Save a new revision for an image.
+     * @param Image $image
+     * @return ImageRevision
+     */
+    protected function saveImageRevision(Image $image)
+    {
+        $revision = new ImageRevision();
+        $revision->image_id = $image->id;
+        $revision->path = $image->path;
+        $revision->url = $image->url;
+        $revision->created_by = user()->id;
+        $revision->revision = $image->revisionCount() + 1;
+        $revision->save();
+        return $revision;
     }
 
     /**
@@ -194,7 +229,7 @@ class ImageService extends UploadService
      */
     protected function isGif(Image $image)
     {
-        return strtolower(pathinfo($this->getPath($image), PATHINFO_EXTENSION)) === 'gif';
+        return strtolower(pathinfo($image->path, PATHINFO_EXTENSION)) === 'gif';
     }
 
     /**
@@ -212,11 +247,11 @@ class ImageService extends UploadService
     public function getThumbnail(Image $image, $width = 220, $height = 220, $keepRatio = false)
     {
         if ($keepRatio && $this->isGif($image)) {
-            return $this->getPublicUrl($this->getPath($image));
+            return $this->getPublicUrl($image->path);
         }
 
         $thumbDirName = '/' . ($keepRatio ? 'scaled-' : 'thumbs-') . $width . '-' . $height . '/';
-        $imagePath = $this->getPath($image);
+        $imagePath = $image->path;
         $thumbFilePath = dirname($imagePath) . $thumbDirName . basename($imagePath);
 
         if ($this->cache->has('images-' . $image->id . '-' . $thumbFilePath) && $this->cache->get('images-' . $thumbFilePath)) {
@@ -262,43 +297,58 @@ class ImageService extends UploadService
      */
     public function getImageData(Image $image)
     {
-        $imagePath = $this->getPath($image);
+        $imagePath = $image->path;
         $storage = $this->getStorage();
         return $storage->get($imagePath);
     }
 
     /**
-     * Destroys an Image object along with its files and thumbnails.
+     * Destroy an image along with its revisions, thumbnails and remaining folders.
      * @param Image $image
-     * @return bool
      * @throws Exception
      */
-    public function destroyImage(Image $image)
+    public function destroy(Image $image)
+    {
+        // Destroy image revisions
+        foreach ($image->revisions as $revision) {
+            $this->destroyImagesFromPath($revision->path);
+            $revision->delete();
+        }
+
+        // Destroy main image
+        $this->destroyImagesFromPath($image->path);
+        $image->delete();
+    }
+
+    /**
+     * Destroys an image at the given path.
+     * Searches for image thumbnails in addition to main provided path..
+     * @param string $path
+     * @return bool
+     */
+    protected function destroyImagesFromPath(string $path)
     {
         $storage = $this->getStorage();
 
-        $imageFolder = dirname($this->getPath($image));
-        $imageFileName = basename($this->getPath($image));
+        $imageFolder = dirname($path);
+        $imageFileName = basename($path);
         $allImages = collect($storage->allFiles($imageFolder));
 
+        // Delete image files
         $imagesToDelete = $allImages->filter(function ($imagePath) use ($imageFileName) {
             $expectedIndex = strlen($imagePath) - strlen($imageFileName);
             return strpos($imagePath, $imageFileName) === $expectedIndex;
         });
-
         $storage->delete($imagesToDelete->all());
 
         // Cleanup of empty folders
-        foreach ($storage->directories($imageFolder) as $directory) {
+        $foldersInvolved = array_merge([$imageFolder], $storage->directories($imageFolder));
+        foreach ($foldersInvolved as $directory) {
             if ($this->isFolderEmpty($directory)) {
                 $storage->deleteDirectory($directory);
             }
         }
-        if ($this->isFolderEmpty($imageFolder)) {
-            $storage->deleteDirectory($imageFolder);
-        }
 
-        $image->delete();
         return true;
     }
 
diff --git a/database/migrations/2018_05_13_090521_create_image_revisions_table.php b/database/migrations/2018_05_13_090521_create_image_revisions_table.php
index 968773a86..d3032258f 100644
--- a/database/migrations/2018_05_13_090521_create_image_revisions_table.php
+++ b/database/migrations/2018_05_13_090521_create_image_revisions_table.php
@@ -16,6 +16,7 @@ class CreateImageRevisionsTable extends Migration
         Schema::create('image_revisions', function (Blueprint $table) {
             $table->increments('id');
             $table->integer('image_id');
+            $table->integer('revision');
             $table->string('path');
             $table->string('url');
             $table->integer('created_by');
diff --git a/routes/web.php b/routes/web.php
index 0efd19efe..40b00c75d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -96,7 +96,7 @@ Route::group(['middleware' => 'auth'], function () {
         Route::get('/base64/{id}', 'ImageController@getBase64Image');
         Route::put('/update/{imageId}', 'ImageController@update');
         Route::post('/drawing/upload', 'ImageController@uploadDrawing');
-        Route::put('/drawing/upload/{id}', 'ImageController@replaceDrawing');
+        Route::put('/drawing/upload/{id}', 'ImageController@updateDrawing');
         Route::get('/usage/{id}', 'ImageController@usage');
         Route::post('/{type}/upload', 'ImageController@uploadByType');
         Route::get('/{type}/all', 'ImageController@getAllByType');
diff --git a/tests/ImageTest.php b/tests/ImageTest.php
index 49912ec4c..fd1aa010e 100644
--- a/tests/ImageTest.php
+++ b/tests/ImageTest.php
@@ -210,7 +210,7 @@ class ImageTest extends TestCase
         $this->assertTrue($testImageData === $uploadedImageData, "Uploaded image file data does not match our test image as expected");
     }
 
-    public function test_drawing_replacing()
+    public function test_drawing_updating()
     {
         $page = Page::first();
         $editor = $this->getEditor();
@@ -235,6 +235,15 @@ class ImageTest extends TestCase
             'updated_by' => $editor->id,
         ]);
 
+        // Check a revision has been created
+        $this->assertDatabaseHas('image_revisions', [
+            'image_id' => $image->id,
+            'revision' => 2,
+            'created_by' => $editor->id,
+        ]);
+
+        $image = Image::find($image->id);
+
         $this->assertTrue(file_exists(public_path($image->path)), 'Uploaded image not found at path: '. public_path($image->path));
 
         $testImageData = file_get_contents($this->getTestImageFilePath());

From 6cdb94391655a459760d8d20dc138b1f0eb2e4c4 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 19 May 2018 18:44:40 +0100
Subject: [PATCH 3/9] Started work on revisions in image manager

---
 app/Http/Controllers/ImageController.php      | 12 ++++++
 app/Repos/ImageRepo.php                       |  2 +-
 resources/assets/js/vues/image-manager.js     | 15 ++++++++
 resources/assets/sass/_components.scss        | 13 ++++++-
 .../views/components/image-manager.blade.php  | 37 +++++++++++++++++--
 routes/web.php                                |  1 +
 6 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php
index b156a8425..bf7f3bb82 100644
--- a/app/Http/Controllers/ImageController.php
+++ b/app/Http/Controllers/ImageController.php
@@ -257,6 +257,18 @@ class ImageController extends Controller
         return response()->json($pageSearch);
     }
 
+    /**
+     * Get the revisions for an image.
+     * @param $id
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function getRevisions($id)
+    {
+        $image = $this->imageRepo->getById($id);
+        $revisions = $image->revisions()->orderBy('id', 'desc')->get();
+        return response()->json($revisions);
+    }
+
     /**
      * Deletes an image and all thumbnail/image files
      * @param int $id
diff --git a/app/Repos/ImageRepo.php b/app/Repos/ImageRepo.php
index eff856872..384ea5454 100644
--- a/app/Repos/ImageRepo.php
+++ b/app/Repos/ImageRepo.php
@@ -201,7 +201,7 @@ class ImageRepo
      * @throws \BookStack\Exceptions\ImageUploadException
      * @throws \Exception
      */
-    private function loadThumbs(Image $image)
+    protected function loadThumbs(Image $image)
     {
         $image->thumbs = [
             'gallery' => $this->getThumbnail($image, 150, 150),
diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js
index bef666192..2a11a6ff2 100644
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@@ -24,6 +24,9 @@ const data = {
     searching: false,
     searchTerm: '',
 
+    revisions: [],
+    selectedRevision: null,
+
     imageUpdateSuccess: false,
     imageDeleteSuccess: false,
     deleteConfirm: false,
@@ -110,6 +113,8 @@ const methods = {
         let currentTime = Date.now();
         let timeDiff = currentTime - previousClickTime;
         let isDblClick = timeDiff < dblClickTime && image.id === previousClickImage;
+        this.revisions = [];
+        this.selectedRevision = null
 
         if (isDblClick) {
             this.callbackAndHide(image);
@@ -117,6 +122,11 @@ const methods = {
             this.selectedImage = image;
             this.deleteConfirm = false;
             this.dependantPages = false;
+            if (this.imageType === 'drawio') {
+                this.$http.get(window.baseUrl(`/images/revisions/${image.id}`)).then(resp => {
+                    this.revisions = resp.data;
+                })
+            }
         }
 
         previousClickTime = currentTime;
@@ -172,6 +182,11 @@ const methods = {
         this.images.unshift(event.data);
         this.$events.emit('success', trans('components.image_upload_success'));
     },
+
+    selectRevision(revision) {
+        let rev = (this.selectedRevision === revision) ? null : revision;
+        this.selectedRevision = rev;
+    }
 };
 
 const computed = {
diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 27dcfda64..76150fe44 100644
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -221,10 +221,19 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
   img {
     max-width: 100%;
-    max-height: 200px;
+    max-height: 180px;
     display: block;
     margin: 0 auto $-m auto;
-    box-shadow: $bs-light;
+    box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
+  }
+  .image-manager-viewer {
+    height: 196px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    a {
+      display: inline-block;
+    }
   }
   .dropzone-container {
     border-bottom: 1px solid #DDD;
diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php
index 45b30697b..92a69c05d 100644
--- a/resources/views/components/image-manager.blade.php
+++ b/resources/views/components/image-manager.blade.php
@@ -47,10 +47,17 @@
 
                         <div class="image-manager-details anim fadeIn" v-if="selectedImage">
 
-                            <form @submit.prevent="saveImageDetails">
-                                <div>
+                            <div v-if="selectedRevision" class="image-manager-viewer">
+                                <a :href="selectedRevision.url" target="_blank" style="display: block;">
+                                    <img :src="selectedRevision.url" :alt="selectedImage.name"
+                                         :title="selectedImage.name">
+                                </a>
+                            </div>
+
+                            <form @submit.prevent="saveImageDetails" v-if="!selectedRevision">
+                                <div class="image-manager-viewer">
                                     <a :href="selectedImage.url" target="_blank" style="display: block;">
-                                        <img :src="selectedImage.thumbs.display" :alt="selectedImage.title"
+                                        <img :src="selectedImage.thumbs.display" :alt="selectedImage.name"
                                              :title="selectedImage.name">
                                     </a>
                                 </div>
@@ -60,7 +67,7 @@
                                 </div>
                             </form>
 
-                            <div class="clearfix">
+                            <div  v-if="!selectedRevision" class="clearfix">
                                 <div class="float left">
                                     <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
 
@@ -84,6 +91,28 @@
                                 </div>
                             </div>
 
+                            {{--Revisions View--}}
+                            <div v-show="imageType === 'drawio'">
+                                <hr>
+                                <h5>Revisions</h5>
+                                <table v-if="revisions.length > 0" class="table">
+                                    <tr v-for="(revision, index) in revisions" :key="revision.id" :class="{'primary-background-light': selectedRevision === revision}" @click="selectRevision(revision)">
+                                        <td>
+                                            <span v-text="revision.revision"></span>
+                                            <span class="italic text-muted" v-if="index === 0 && revision.path === selectedImage.path">(Current)</span>
+                                        </td>
+                                        <td class="text-small">
+                                            <span v-text="(new Date(revision.created_at + 'Z')).toLocaleTimeString()"></span>
+                                            <br>
+                                            <span v-text="(new Date(revision.created_at + 'Z')).toLocaleDateString()"></span>
+                                        </td>
+                                    </tr>
+                                </table>
+                                <p v-if="revisions.length === 0" class="text-muted italic">
+                                    No revisions found
+                                </p>
+                            </div>
+
                         </div>
 
 
diff --git a/routes/web.php b/routes/web.php
index 40b00c75d..254da9cd4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -98,6 +98,7 @@ Route::group(['middleware' => 'auth'], function () {
         Route::post('/drawing/upload', 'ImageController@uploadDrawing');
         Route::put('/drawing/upload/{id}', 'ImageController@updateDrawing');
         Route::get('/usage/{id}', 'ImageController@usage');
+        Route::get('/revisions/{id}', 'ImageController@getRevisions');
         Route::post('/{type}/upload', 'ImageController@uploadByType');
         Route::get('/{type}/all', 'ImageController@getAllByType');
         Route::get('/{type}/all/{page}', 'ImageController@getAllByType');

From 0c9c1e4c6b7aa38034c65a98a0499ae4fcd323b3 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 20 May 2018 16:40:30 +0100
Subject: [PATCH 4/9] Reverted work on revisions

Improved linkage of drawings and image manager.
Updated image updates to create new versions.
---
 app/Http/Controllers/ImageController.php      | 39 +---------
 app/Image.php                                 | 19 -----
 app/ImageRevision.php                         | 26 -------
 app/Repos/ImageRepo.php                       | 13 +---
 app/Services/ImageService.php                 | 77 -------------------
 ...13_090521_create_image_revisions_table.php | 38 ---------
 .../assets/js/components/wysiwyg-editor.js    | 42 ++++++----
 resources/assets/js/vues/image-manager.js     | 19 +----
 .../views/components/image-manager.blade.php  | 35 +--------
 routes/web.php                                |  2 -
 10 files changed, 33 insertions(+), 277 deletions(-)
 delete mode 100644 app/ImageRevision.php
 delete mode 100644 database/migrations/2018_05_13_090521_create_image_revisions_table.php

diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php
index bf7f3bb82..eb92ae9a8 100644
--- a/app/Http/Controllers/ImageController.php
+++ b/app/Http/Controllers/ImageController.php
@@ -164,32 +164,6 @@ class ImageController extends Controller
         return response()->json($image);
     }
 
-    /**
-     * Replace the data content of a drawing.
-     * @param string $id
-     * @param Request $request
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\JsonResponse|\Symfony\Component\HttpFoundation\Response
-     */
-    public function updateDrawing(string $id, Request $request)
-    {
-        $this->validate($request, [
-            'image' => 'required|string'
-        ]);
-        $this->checkPermission('image-create-all');
-
-        $imageBase64Data = $request->get('image');
-        $image = $this->imageRepo->getById($id);
-        $this->checkOwnablePermission('image-update', $image);
-
-        try {
-            $image = $this->imageRepo->updateDrawing($image, $imageBase64Data);
-        } catch (ImageUploadException $e) {
-            return response($e->getMessage(), 500);
-        }
-
-        return response()->json($image);
-    }
-
     /**
      * Get the content of an image based64 encoded.
      * @param $id
@@ -257,22 +231,11 @@ class ImageController extends Controller
         return response()->json($pageSearch);
     }
 
-    /**
-     * Get the revisions for an image.
-     * @param $id
-     * @return \Illuminate\Http\JsonResponse
-     */
-    public function getRevisions($id)
-    {
-        $image = $this->imageRepo->getById($id);
-        $revisions = $image->revisions()->orderBy('id', 'desc')->get();
-        return response()->json($revisions);
-    }
-
     /**
      * Deletes an image and all thumbnail/image files
      * @param int $id
      * @return \Illuminate\Http\JsonResponse
+     * @throws \Exception
      */
     public function destroy($id)
     {
diff --git a/app/Image.php b/app/Image.php
index ac94d9bf0..412beea90 100644
--- a/app/Image.php
+++ b/app/Image.php
@@ -20,23 +20,4 @@ class Image extends Ownable
         return Images::getThumbnail($this, $width, $height, $keepRatio);
     }
 
-    /**
-     * Get the revisions for this image.
-     * @return \Illuminate\Database\Eloquent\Relations\HasMany
-     */
-    public function revisions()
-    {
-        return $this->hasMany(ImageRevision::class);
-    }
-
-    /**
-     * Get the count of revisions made to this image.
-     * Based off numbers on revisions rather than raw count of attached revisions
-     * as they may be cleared up or revisions deleted at some point.
-     * @return int
-     */
-    public function revisionCount()
-    {
-        return intval($this->revisions()->max('revision'));
-    }
 }
diff --git a/app/ImageRevision.php b/app/ImageRevision.php
deleted file mode 100644
index fde232867..000000000
--- a/app/ImageRevision.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php
-
-namespace BookStack;
-
-use Illuminate\Database\Eloquent\Model;
-
-class ImageRevision extends Model
-{
-    /**
-     * Relation for the user that created this entity.
-     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
-     */
-    public function createdBy()
-    {
-        return $this->belongsTo(User::class, 'created_by');
-    }
-
-    /**
-     * Get the image that this is a revision of.
-     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
-     */
-    public function image()
-    {
-        return $this->belongsTo(Image::class);
-    }
-}
diff --git a/app/Repos/ImageRepo.php b/app/Repos/ImageRepo.php
index 384ea5454..4ccd719ad 100644
--- a/app/Repos/ImageRepo.php
+++ b/app/Repos/ImageRepo.php
@@ -153,17 +153,6 @@ class ImageRepo
         return $image;
     }
 
-    /**
-     * Replace the image content of a drawing.
-     * @param Image $image
-     * @param string $base64Uri
-     * @return Image
-     * @throws \BookStack\Exceptions\ImageUploadException
-     */
-    public function updateDrawing(Image $image, string $base64Uri)
-    {
-        return $this->imageService->updateImageFromBase64Uri($image, $base64Uri);
-    }
 
     /**
      * Update the details of an image via an array of properties.
@@ -251,7 +240,7 @@ class ImageRepo
      */
     public function isValidType($type)
     {
-        $validTypes = ['drawing', 'gallery', 'cover', 'system', 'user'];
+        $validTypes = ['gallery', 'cover', 'system', 'user'];
         return in_array($type, $validTypes);
     }
 }
diff --git a/app/Services/ImageService.php b/app/Services/ImageService.php
index e83c1860b..736b30705 100644
--- a/app/Services/ImageService.php
+++ b/app/Services/ImageService.php
@@ -2,7 +2,6 @@
 
 use BookStack\Exceptions\ImageUploadException;
 use BookStack\Image;
-use BookStack\ImageRevision;
 use BookStack\User;
 use Exception;
 use Intervention\Image\Exception\NotSupportedException;
@@ -82,22 +81,6 @@ class ImageService extends UploadService
         return $this->saveNew($name, $data, $type, $uploadedTo);
     }
 
-    /**
-     * @param Image $image
-     * @param string $base64Uri
-     * @return Image
-     * @throws ImageUploadException
-     */
-    public function updateImageFromBase64Uri(Image $image, string $base64Uri)
-    {
-        $splitData = explode(';base64,', $base64Uri);
-        if (count($splitData) < 2) {
-            throw new ImageUploadException("Invalid base64 image data provided");
-        }
-        $data = base64_decode($splitData[1]);
-        return $this->update($image, $data);
-    }
-
     /**
      * Gets an image from url and saves it to the database.
      * @param             $url
@@ -168,59 +151,6 @@ class ImageService extends UploadService
         return $image;
     }
 
-    /**
-     * Update the content of an existing image.
-     * Uploaded the new image content and creates a revision for the old image content.
-     * @param Image $image
-     * @param $imageData
-     * @return Image
-     * @throws ImageUploadException
-     */
-    private function update(Image $image, $imageData)
-    {
-        // Save image revision if not previously exists to ensure we always have
-        // a reference to the image files being uploaded.
-        if ($image->revisions()->count() === 0) {
-            $this->saveImageRevision($image);
-        }
-
-        $pathInfo = pathinfo($image->path);
-        $revisionCount = $image->revisionCount() + 1;
-        $newFileName = preg_replace('/^(.+?)(-v\d+)?$/', '$1-v' . $revisionCount, $pathInfo['filename']);
-
-        $image->path = str_replace_last($pathInfo['filename'], $newFileName, $image->path);
-        $image->url = $this->getPublicUrl($image->path);
-        $image->updated_by = user()->id;
-
-        $storage = $this->getStorage();
-
-        try {
-            $storage->put($image->path, $imageData);
-            $storage->setVisibility($image->path, 'public');
-            $image->save();
-            $this->saveImageRevision($image);
-        } catch (Exception $e) {
-            throw new ImageUploadException(trans('errors.path_not_writable', ['filePath' => $image->path]));
-        }
-        return $image;
-    }
-
-    /**
-     * Save a new revision for an image.
-     * @param Image $image
-     * @return ImageRevision
-     */
-    protected function saveImageRevision(Image $image)
-    {
-        $revision = new ImageRevision();
-        $revision->image_id = $image->id;
-        $revision->path = $image->path;
-        $revision->url = $image->url;
-        $revision->created_by = user()->id;
-        $revision->revision = $image->revisionCount() + 1;
-        $revision->save();
-        return $revision;
-    }
 
     /**
      * Checks if the image is a gif. Returns true if it is, else false.
@@ -309,13 +239,6 @@ class ImageService extends UploadService
      */
     public function destroy(Image $image)
     {
-        // Destroy image revisions
-        foreach ($image->revisions as $revision) {
-            $this->destroyImagesFromPath($revision->path);
-            $revision->delete();
-        }
-
-        // Destroy main image
         $this->destroyImagesFromPath($image->path);
         $image->delete();
     }
diff --git a/database/migrations/2018_05_13_090521_create_image_revisions_table.php b/database/migrations/2018_05_13_090521_create_image_revisions_table.php
deleted file mode 100644
index d3032258f..000000000
--- a/database/migrations/2018_05_13_090521_create_image_revisions_table.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class CreateImageRevisionsTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('image_revisions', function (Blueprint $table) {
-            $table->increments('id');
-            $table->integer('image_id');
-            $table->integer('revision');
-            $table->string('path');
-            $table->string('url');
-            $table->integer('created_by');
-
-            $table->index('image_id');
-            $table->timestamps();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('image_revisions');
-    }
-}
diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index 03d73d2b5..764b0a929 100644
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -229,16 +229,18 @@ function drawIoPlugin() {
     }
 
     function showDrawingManager(mceEditor, selectedNode = null) {
-        // TODO - Handle how image manager links in.
+        pageEditor = mceEditor;
+        currentNode = selectedNode;
         // Show image manager
         window.ImageManager.show(function (image) {
-
-
-            // // Replace the actively selected content with the linked image
-            // let html = `<a href="${image.url}" target="_blank">`;
-            // html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
-            // html += '</a>';
-            // win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
+            if (selectedNode) {
+                let imgElem = selectedNode.querySelector('img');
+                pageEditor.dom.setAttrib(imgElem, 'src', image.url);
+                pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
+            } else {
+                let imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
+                pageEditor.insertContent(imgHTML);
+            }
         }, 'drawio');
     }
 
@@ -260,9 +262,9 @@ function drawIoPlugin() {
         if (currentNode) {
             DrawIO.close();
             let imgElem = currentNode.querySelector('img');
-            let drawingId = currentNode.getAttribute('drawio-diagram');
-            window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
-                pageEditor.dom.setAttrib(imgElem, 'src', `${resp.data.url}?updated=${Date.now()}`);
+            window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
+                pageEditor.dom.setAttrib(imgElem, 'src', resp.data.url);
+                pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', resp.data.id);
             }).catch(err => {
                 window.$events.emit('error', trans('errors.image_upload_error'));
                 console.log(err);
@@ -300,17 +302,23 @@ function drawIoPlugin() {
 
         editor.addCommand('drawio', () => {
             let selectedNode = editor.selection.getNode();
-            if (isDrawing(selectedNode)) {
-                showDrawingManager(editor, selectedNode);
-            } else {
-                showDrawingEditor(editor);
-            }
+            showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
         });
 
         editor.addButton('drawio', {
+            type: 'splitbutton',
             tooltip: 'Drawing',
             image: window.baseUrl('/icon/drawing.svg?color=000000'),
-            cmd: 'drawio'
+            cmd: 'drawio',
+            menu: [
+                {
+                    text: 'Drawing Manager',
+                    onclick() {
+                        let selectedNode = editor.selection.getNode();
+                        showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
+                    }
+                }
+            ]
         });
 
         editor.on('dblclick', event => {
diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js
index 2a11a6ff2..f355107c0 100644
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@@ -24,9 +24,6 @@ const data = {
     searching: false,
     searchTerm: '',
 
-    revisions: [],
-    selectedRevision: null,
-
     imageUpdateSuccess: false,
     imageDeleteSuccess: false,
     deleteConfirm: false,
@@ -50,9 +47,11 @@ const methods = {
     },
 
     hide() {
+        if (this.$refs.dropzone) {
+            this.$refs.dropzone.onClose();
+        }
         this.showing = false;
         this.selectedImage = false;
-        this.$refs.dropzone.onClose();
         this.$el.children[0].components.overlay.hide();
     },
 
@@ -113,8 +112,6 @@ const methods = {
         let currentTime = Date.now();
         let timeDiff = currentTime - previousClickTime;
         let isDblClick = timeDiff < dblClickTime && image.id === previousClickImage;
-        this.revisions = [];
-        this.selectedRevision = null
 
         if (isDblClick) {
             this.callbackAndHide(image);
@@ -122,11 +119,6 @@ const methods = {
             this.selectedImage = image;
             this.deleteConfirm = false;
             this.dependantPages = false;
-            if (this.imageType === 'drawio') {
-                this.$http.get(window.baseUrl(`/images/revisions/${image.id}`)).then(resp => {
-                    this.revisions = resp.data;
-                })
-            }
         }
 
         previousClickTime = currentTime;
@@ -182,11 +174,6 @@ const methods = {
         this.images.unshift(event.data);
         this.$events.emit('success', trans('components.image_upload_success'));
     },
-
-    selectRevision(revision) {
-        let rev = (this.selectedRevision === revision) ? null : revision;
-        this.selectedRevision = rev;
-    }
 };
 
 const computed = {
diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php
index 92a69c05d..eca35b8aa 100644
--- a/resources/views/components/image-manager.blade.php
+++ b/resources/views/components/image-manager.blade.php
@@ -41,20 +41,13 @@
 
                 <div class="image-manager-sidebar">
 
-                    <dropzone ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
+                    <dropzone v-if="imageType !== 'drawio'" ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
 
                     <div class="inner">
 
                         <div class="image-manager-details anim fadeIn" v-if="selectedImage">
 
-                            <div v-if="selectedRevision" class="image-manager-viewer">
-                                <a :href="selectedRevision.url" target="_blank" style="display: block;">
-                                    <img :src="selectedRevision.url" :alt="selectedImage.name"
-                                         :title="selectedImage.name">
-                                </a>
-                            </div>
-
-                            <form @submit.prevent="saveImageDetails" v-if="!selectedRevision">
+                            <form @submit.prevent="saveImageDetails">
                                 <div class="image-manager-viewer">
                                     <a :href="selectedImage.url" target="_blank" style="display: block;">
                                         <img :src="selectedImage.thumbs.display" :alt="selectedImage.name"
@@ -67,7 +60,7 @@
                                 </div>
                             </form>
 
-                            <div  v-if="!selectedRevision" class="clearfix">
+                            <div class="clearfix">
                                 <div class="float left">
                                     <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
 
@@ -91,28 +84,6 @@
                                 </div>
                             </div>
 
-                            {{--Revisions View--}}
-                            <div v-show="imageType === 'drawio'">
-                                <hr>
-                                <h5>Revisions</h5>
-                                <table v-if="revisions.length > 0" class="table">
-                                    <tr v-for="(revision, index) in revisions" :key="revision.id" :class="{'primary-background-light': selectedRevision === revision}" @click="selectRevision(revision)">
-                                        <td>
-                                            <span v-text="revision.revision"></span>
-                                            <span class="italic text-muted" v-if="index === 0 && revision.path === selectedImage.path">(Current)</span>
-                                        </td>
-                                        <td class="text-small">
-                                            <span v-text="(new Date(revision.created_at + 'Z')).toLocaleTimeString()"></span>
-                                            <br>
-                                            <span v-text="(new Date(revision.created_at + 'Z')).toLocaleDateString()"></span>
-                                        </td>
-                                    </tr>
-                                </table>
-                                <p v-if="revisions.length === 0" class="text-muted italic">
-                                    No revisions found
-                                </p>
-                            </div>
-
                         </div>
 
 
diff --git a/routes/web.php b/routes/web.php
index 254da9cd4..7cad0c585 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -96,9 +96,7 @@ Route::group(['middleware' => 'auth'], function () {
         Route::get('/base64/{id}', 'ImageController@getBase64Image');
         Route::put('/update/{imageId}', 'ImageController@update');
         Route::post('/drawing/upload', 'ImageController@uploadDrawing');
-        Route::put('/drawing/upload/{id}', 'ImageController@updateDrawing');
         Route::get('/usage/{id}', 'ImageController@usage');
-        Route::get('/revisions/{id}', 'ImageController@getRevisions');
         Route::post('/{type}/upload', 'ImageController@uploadByType');
         Route::get('/{type}/all', 'ImageController@getAllByType');
         Route::get('/{type}/all/{page}', 'ImageController@getAllByType');

From 8c4c8cd95b97f4a1a0d4a831673d50982c53e305 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 20 May 2018 16:47:53 +0100
Subject: [PATCH 5/9] Updated secure-images option to not effect image name

Instead only the image path is altered.
Also fixed image manger mode not changing on button press.
---
 app/Services/ImageService.php                    | 8 ++++----
 resources/assets/js/components/wysiwyg-editor.js | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/Services/ImageService.php b/app/Services/ImageService.php
index 736b30705..c087c1e03 100644
--- a/app/Services/ImageService.php
+++ b/app/Services/ImageService.php
@@ -114,16 +114,16 @@ class ImageService extends UploadService
         $secureUploads = setting('app-secure-images');
         $imageName = str_replace(' ', '-', $imageName);
 
-        if ($secureUploads) {
-            $imageName = str_random(16) . '-' . $imageName;
-        }
-
         $imagePath = '/uploads/images/' . $type . '/' . Date('Y-m-M') . '/';
 
         while ($storage->exists($imagePath . $imageName)) {
             $imageName = str_random(3) . $imageName;
         }
+
         $fullPath = $imagePath . $imageName;
+        if ($secureUploads) {
+            $fullPath = $imagePath . str_random(16) . '-' . $imageName;
+        }
 
         try {
             $storage->put($fullPath, $imageData);
diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index 764b0a929..72263e2f2 100644
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -547,7 +547,7 @@ class WysiwygEditor {
                             html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
                             html += '</a>';
                             editor.execCommand('mceInsertContent', false, html);
-                        });
+                        }, 'gallery');
                     }
                 });
 

From 61c9324229c073f9a60d1b7992b85c499ef0878c Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 20 May 2018 17:12:44 +0100
Subject: [PATCH 6/9] Removed old image versions test

---
 tests/ImageTest.php | 41 -----------------------------------------
 1 file changed, 41 deletions(-)

diff --git a/tests/ImageTest.php b/tests/ImageTest.php
index fd1aa010e..810fb3edf 100644
--- a/tests/ImageTest.php
+++ b/tests/ImageTest.php
@@ -210,47 +210,6 @@ class ImageTest extends TestCase
         $this->assertTrue($testImageData === $uploadedImageData, "Uploaded image file data does not match our test image as expected");
     }
 
-    public function test_drawing_updating()
-    {
-        $page = Page::first();
-        $editor = $this->getEditor();
-        $this->actingAs($editor);
-
-        $this->postJson('images/drawing/upload', [
-            'uploaded_to' => $page->id,
-            'image' => 'image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDQ4S1RUeKwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12NctNWSAQkwMaACUvkAfCkBmjyhGl4AAAAASUVORK5CYII='
-        ]);
-
-        $image = Image::where('type', '=', 'drawio')->first();
-
-        $replace = $this->putJson("images/drawing/upload/{$image->id}", [
-            'image' => 'image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII='
-        ]);
-
-        $replace->assertStatus(200);
-        $replace->assertJson([
-            'type' => 'drawio',
-            'uploaded_to' => $page->id,
-            'created_by' => $editor->id,
-            'updated_by' => $editor->id,
-        ]);
-
-        // Check a revision has been created
-        $this->assertDatabaseHas('image_revisions', [
-            'image_id' => $image->id,
-            'revision' => 2,
-            'created_by' => $editor->id,
-        ]);
-
-        $image = Image::find($image->id);
-
-        $this->assertTrue(file_exists(public_path($image->path)), 'Uploaded image not found at path: '. public_path($image->path));
-
-        $testImageData = file_get_contents($this->getTestImageFilePath());
-        $uploadedImageData = file_get_contents(public_path($image->path));
-        $this->assertTrue($testImageData === $uploadedImageData, "Uploaded image file data does not match our test image as expected");
-    }
-
     public function test_user_images_deleted_on_user_deletion()
     {
         $editor = $this->getEditor();

From c31e6a03ce3d45df2d79399820bbbfc7df7fe2b8 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 20 May 2018 18:16:01 +0100
Subject: [PATCH 7/9] Added command to clean-up old images, Unfinished

---
 app/Console/Commands/CleanupImages.php | 68 ++++++++++++++++++++++++++
 app/Providers/CustomFacadeProvider.php |  2 +
 app/Services/ImageService.php          | 51 +++++++++++++++++--
 3 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 app/Console/Commands/CleanupImages.php

diff --git a/app/Console/Commands/CleanupImages.php b/app/Console/Commands/CleanupImages.php
new file mode 100644
index 000000000..310a7bb24
--- /dev/null
+++ b/app/Console/Commands/CleanupImages.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace BookStack\Console\Commands;
+
+use BookStack\Services\ImageService;
+use Illuminate\Console\Command;
+
+class CleanupImages extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'bookstack:cleanup-images
+                            {--a|all : Include images that are used in page revisions}
+                            {--f|force : Actually run the deletions}
+                            ';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Cleanup images and drawings';
+
+
+    protected $imageService;
+
+    /**
+     * Create a new command instance.
+     * @param ImageService $imageService
+     */
+    public function __construct(ImageService $imageService)
+    {
+        $this->imageService = $imageService;
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        $checkRevisions = $this->option('all') ? false : true;
+        $dryRun = $this->option('force') ? false : true;
+
+        if (!$dryRun) {
+            $proceed = $this->confirm('This operation is destructive and is not guaranteed to be fully accurate. Ensure you have a backup of your images. Are you sure you want to proceed?');
+            if (!$proceed) {
+                return;
+            }
+        }
+
+        $deleteCount = $this->imageService->deleteUnusedImages($checkRevisions, ['gallery', 'drawio'], $dryRun);
+
+        if ($dryRun) {
+            $this->comment('Dry run, No images have been deleted');
+            $this->comment($deleteCount . ' images found that would have been deleted');
+            $this->comment('Run with -f or --force to perform deletions');
+            return;
+        }
+
+        $this->comment($deleteCount . ' images deleted');
+    }
+}
diff --git a/app/Providers/CustomFacadeProvider.php b/app/Providers/CustomFacadeProvider.php
index a97512e8c..c81a5529d 100644
--- a/app/Providers/CustomFacadeProvider.php
+++ b/app/Providers/CustomFacadeProvider.php
@@ -3,6 +3,7 @@
 namespace BookStack\Providers;
 
 use BookStack\Activity;
+use BookStack\Image;
 use BookStack\Services\ImageService;
 use BookStack\Services\PermissionService;
 use BookStack\Services\ViewService;
@@ -57,6 +58,7 @@ class CustomFacadeProvider extends ServiceProvider
 
         $this->app->bind('images', function () {
             return new ImageService(
+                $this->app->make(Image::class),
                 $this->app->make(ImageManager::class),
                 $this->app->make(Factory::class),
                 $this->app->make(Repository::class)
diff --git a/app/Services/ImageService.php b/app/Services/ImageService.php
index c087c1e03..ce108e172 100644
--- a/app/Services/ImageService.php
+++ b/app/Services/ImageService.php
@@ -3,6 +3,7 @@
 use BookStack\Exceptions\ImageUploadException;
 use BookStack\Image;
 use BookStack\User;
+use DB;
 use Exception;
 use Intervention\Image\Exception\NotSupportedException;
 use Intervention\Image\ImageManager;
@@ -16,15 +17,18 @@ class ImageService extends UploadService
     protected $imageTool;
     protected $cache;
     protected $storageUrl;
+    protected $image;
 
     /**
      * ImageService constructor.
-     * @param $imageTool
-     * @param $fileSystem
-     * @param $cache
+     * @param Image $image
+     * @param ImageManager $imageTool
+     * @param FileSystem $fileSystem
+     * @param Cache $cache
      */
-    public function __construct(ImageManager $imageTool, FileSystem $fileSystem, Cache $cache)
+    public function __construct(Image $image, ImageManager $imageTool, FileSystem $fileSystem, Cache $cache)
     {
+        $this->image = $image;
         $this->imageTool = $imageTool;
         $this->cache = $cache;
         parent::__construct($fileSystem);
@@ -146,7 +150,7 @@ class ImageService extends UploadService
             $imageDetails['updated_by'] = $userId;
         }
 
-        $image = (new Image());
+        $image = $this->image->newInstance();
         $image->forceFill($imageDetails)->save();
         return $image;
     }
@@ -294,6 +298,43 @@ class ImageService extends UploadService
         return $image;
     }
 
+
+    /**
+     * Delete gallery and drawings that are not within HTML content of pages or page revisions.
+     * @param bool $checkRevisions
+     * @param array $types
+     * @param bool $dryRun
+     * @return int
+     */
+    public function deleteUnusedImages($checkRevisions = true, $types = ['gallery', 'drawio'], $dryRun = true)
+    {
+        // TODO - The checking here isn't really good enough.
+        // Thumbnails would also need to be searched for as we can't guarantee the full image will be in the content.
+        // Would also be best to simplify the string to not include the base host?
+        $types = array_intersect($types, ['gallery', 'drawio']);
+        $deleteCount = 0;
+        $this->image->newQuery()->whereIn('type', $types)
+            ->chunk(1000, function($images) use ($types, $checkRevisions, &$deleteCount, $dryRun) {
+             foreach ($images as $image) {
+                 $inPage = DB::table('pages')
+                     ->where('html', 'like', '%' . $image->url . '%')->count() > 0;
+                 $inRevision = false;
+                 if ($checkRevisions) {
+                     $inRevision =  DB::table('page_revisions')
+                             ->where('html', 'like', '%' . $image->url . '%')->count() > 0;
+                 }
+
+                 if (!$inPage && !$inRevision) {
+                     $deleteCount++;
+                     if (!$dryRun) {
+                         $this->destroy($image);
+                     }
+                 }
+             }
+        });
+        return $deleteCount;
+    }
+
     /**
      * Convert a image URI to a Base64 encoded string.
      * Attempts to find locally via set storage method first.

From 1df0bcaf852511add1a6e77c568af574e4215d27 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 27 May 2018 14:33:50 +0100
Subject: [PATCH 8/9] Made image cleanup safer

Also fixed drawing update in markdown editor.
Added shortcut for MD editor to view drawing manager.
---
 app/Console/Commands/CleanupImages.php        | 19 ++++++++++--
 app/Services/ImageService.php                 | 23 ++++++++-------
 .../assets/js/components/markdown-editor.js   | 29 ++++++++++++++-----
 resources/assets/js/vues/image-manager.js     |  1 +
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/app/Console/Commands/CleanupImages.php b/app/Console/Commands/CleanupImages.php
index 310a7bb24..5eadf2751 100644
--- a/app/Console/Commands/CleanupImages.php
+++ b/app/Console/Commands/CleanupImages.php
@@ -4,6 +4,7 @@ namespace BookStack\Console\Commands;
 
 use BookStack\Services\ImageService;
 use Illuminate\Console\Command;
+use Symfony\Component\Console\Output\OutputInterface;
 
 class CleanupImages extends Command
 {
@@ -48,21 +49,35 @@ class CleanupImages extends Command
         $dryRun = $this->option('force') ? false : true;
 
         if (!$dryRun) {
-            $proceed = $this->confirm('This operation is destructive and is not guaranteed to be fully accurate. Ensure you have a backup of your images. Are you sure you want to proceed?');
+            $proceed = $this->confirm("This operation is destructive and is not guaranteed to be fully accurate.\nEnsure you have a backup of your images.\nAre you sure you want to proceed?");
             if (!$proceed) {
                 return;
             }
         }
 
-        $deleteCount = $this->imageService->deleteUnusedImages($checkRevisions, ['gallery', 'drawio'], $dryRun);
+        $deleted = $this->imageService->deleteUnusedImages($checkRevisions, ['gallery', 'drawio'], $dryRun);
+        $deleteCount = count($deleted);
 
         if ($dryRun) {
             $this->comment('Dry run, No images have been deleted');
             $this->comment($deleteCount . ' images found that would have been deleted');
+            $this->showDeletedImages($deleted);
             $this->comment('Run with -f or --force to perform deletions');
             return;
         }
 
+        $this->showDeletedImages($deleted);
         $this->comment($deleteCount . ' images deleted');
     }
+
+    protected function showDeletedImages($paths)
+    {
+        if ($this->getOutput()->getVerbosity() <= OutputInterface::VERBOSITY_NORMAL) return;
+        if (count($paths) > 0) {
+            $this->line('Images to delete:');
+        }
+        foreach ($paths as $path) {
+            $this->line($path);
+        }
+    }
 }
diff --git a/app/Services/ImageService.php b/app/Services/ImageService.php
index ce108e172..d1193ab4f 100644
--- a/app/Services/ImageService.php
+++ b/app/Services/ImageService.php
@@ -301,38 +301,41 @@ class ImageService extends UploadService
 
     /**
      * Delete gallery and drawings that are not within HTML content of pages or page revisions.
+     * Checks based off of only the image name.
+     * Could be much improved to be more specific but kept it generic for now to be safe.
+     *
+     * Returns the path of the images that would be/have been deleted.
      * @param bool $checkRevisions
      * @param array $types
      * @param bool $dryRun
-     * @return int
+     * @return array
      */
     public function deleteUnusedImages($checkRevisions = true, $types = ['gallery', 'drawio'], $dryRun = true)
     {
-        // TODO - The checking here isn't really good enough.
-        // Thumbnails would also need to be searched for as we can't guarantee the full image will be in the content.
-        // Would also be best to simplify the string to not include the base host?
         $types = array_intersect($types, ['gallery', 'drawio']);
-        $deleteCount = 0;
+        $deletedPaths = [];
+
         $this->image->newQuery()->whereIn('type', $types)
-            ->chunk(1000, function($images) use ($types, $checkRevisions, &$deleteCount, $dryRun) {
+            ->chunk(1000, function($images) use ($types, $checkRevisions, &$deletedPaths, $dryRun) {
              foreach ($images as $image) {
+                 $searchQuery = '%' . basename($image->path) . '%';
                  $inPage = DB::table('pages')
-                     ->where('html', 'like', '%' . $image->url . '%')->count() > 0;
+                         ->where('html', 'like', $searchQuery)->count() > 0;
                  $inRevision = false;
                  if ($checkRevisions) {
                      $inRevision =  DB::table('page_revisions')
-                             ->where('html', 'like', '%' . $image->url . '%')->count() > 0;
+                             ->where('html', 'like', $searchQuery)->count() > 0;
                  }
 
                  if (!$inPage && !$inRevision) {
-                     $deleteCount++;
+                     $deletedPaths[] = $image->path;
                      if (!$dryRun) {
                          $this->destroy($image);
                      }
                  }
              }
         });
-        return $deleteCount;
+        return $deletedPaths;
     }
 
     /**
diff --git a/resources/assets/js/components/markdown-editor.js b/resources/assets/js/components/markdown-editor.js
index 46c54408b..06426bf34 100644
--- a/resources/assets/js/components/markdown-editor.js
+++ b/resources/assets/js/components/markdown-editor.js
@@ -52,6 +52,10 @@ class MarkdownEditor {
             let action = button.getAttribute('data-action');
             if (action === 'insertImage') this.actionInsertImage();
             if (action === 'insertLink') this.actionShowLinkSelector();
+            if (action === 'insertDrawing' && event.ctrlKey) {
+                this.actionShowImageManager();
+                return;
+            }
             if (action === 'insertDrawing') this.actionStartDrawing();
         });
 
@@ -293,7 +297,14 @@ class MarkdownEditor {
             this.cm.focus();
             this.cm.replaceSelection(newText);
             this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
-        });
+        }, 'gallery');
+    }
+
+    actionShowImageManager() {
+        let cursorPos = this.cm.getCursor('from');
+        window.ImageManager.show(image => {
+            this.insertDrawing(image, cursorPos);
+        }, 'drawio');
     }
 
     // Show the popup link selector and insert a link when finished
@@ -324,10 +335,7 @@ class MarkdownEditor {
             };
 
             window.$http.post(window.baseUrl('/images/drawing/upload'), data).then(resp => {
-                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
-                this.cm.focus();
-                this.cm.replaceSelection(newText);
-                this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
+                this.insertDrawing(resp.data, cursorPos);
                 DrawIO.close();
             }).catch(err => {
                 window.$events.emit('error', trans('errors.image_upload_error'));
@@ -336,6 +344,13 @@ class MarkdownEditor {
         });
     }
 
+    insertDrawing(image, originalCursor) {
+        let newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
+        this.cm.focus();
+        this.cm.replaceSelection(newText);
+        this.cm.setCursor(originalCursor.line, originalCursor.ch + newText.length);
+    }
+
     // Show draw.io if enabled and handle save.
     actionEditDrawing(imgContainer) {
         if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') !== 'true') return;
@@ -353,8 +368,8 @@ class MarkdownEditor {
                 uploaded_to: Number(document.getElementById('page-editor').getAttribute('page-id'))
             };
 
-            window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
-                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url + `?updated=${Date.now()}`}"></div>`;
+            window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
+                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
                 let newContent = this.cm.getValue().split('\n').map(line => {
                     if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
                         return newText;
diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js
index f355107c0..16c8ef9cf 100644
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@@ -101,6 +101,7 @@ const methods = {
     },
 
     cancelSearch() {
+        if (!this.searching) return;
         this.searching = false;
         this.searchTerm = '';
         this.images = preSearchImages;

From 2bd6ba98955bea62be0bedd09cf3a6d20f42c50a Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 27 May 2018 19:40:07 +0100
Subject: [PATCH 9/9] Added maintenance view with image-cleanup

---
 app/Console/Commands/CleanupImages.php        |  2 +-
 app/Http/Controllers/SettingController.php    | 47 ++++++++++++++-
 app/Services/ImageService.php                 |  4 +-
 resources/assets/icons/spanner.svg            |  4 ++
 resources/lang/en/settings.php                | 13 +++++
 .../views/settings/maintenance.blade.php      | 49 ++++++++++++++++
 resources/views/settings/navbar.blade.php     |  1 +
 routes/web.php                                |  4 ++
 tests/ImageTest.php                           | 57 +++++++++++++++++++
 9 files changed, 177 insertions(+), 4 deletions(-)
 create mode 100644 resources/assets/icons/spanner.svg
 create mode 100644 resources/views/settings/maintenance.blade.php

diff --git a/app/Console/Commands/CleanupImages.php b/app/Console/Commands/CleanupImages.php
index 5eadf2751..e05508d5e 100644
--- a/app/Console/Commands/CleanupImages.php
+++ b/app/Console/Commands/CleanupImages.php
@@ -55,7 +55,7 @@ class CleanupImages extends Command
             }
         }
 
-        $deleted = $this->imageService->deleteUnusedImages($checkRevisions, ['gallery', 'drawio'], $dryRun);
+        $deleted = $this->imageService->deleteUnusedImages($checkRevisions, $dryRun);
         $deleteCount = count($deleted);
 
         if ($dryRun) {
diff --git a/app/Http/Controllers/SettingController.php b/app/Http/Controllers/SettingController.php
index e0e351458..d9d66042e 100644
--- a/app/Http/Controllers/SettingController.php
+++ b/app/Http/Controllers/SettingController.php
@@ -1,5 +1,6 @@
 <?php namespace BookStack\Http\Controllers;
 
+use BookStack\Services\ImageService;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Setting;
@@ -13,7 +14,7 @@ class SettingController extends Controller
     public function index()
     {
         $this->checkPermission('settings-manage');
-        $this->setPageTitle('Settings');
+        $this->setPageTitle(trans('settings.settings'));
 
         // Get application version
         $version = trim(file_get_contents(base_path('version')));
@@ -43,4 +44,48 @@ class SettingController extends Controller
         session()->flash('success', trans('settings.settings_save_success'));
         return redirect('/settings');
     }
+
+    /**
+     * Show the page for application maintenance.
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function showMaintenance()
+    {
+        $this->checkPermission('settings-manage');
+        $this->setPageTitle(trans('settings.maint'));
+
+        // Get application version
+        $version = trim(file_get_contents(base_path('version')));
+
+        return view('settings/maintenance', ['version' => $version]);
+    }
+
+    /**
+     * Action to clean-up images in the system.
+     * @param Request $request
+     * @param ImageService $imageService
+     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
+     */
+    public function cleanupImages(Request $request, ImageService $imageService)
+    {
+        $this->checkPermission('settings-manage');
+
+        $checkRevisions = !($request->get('ignore_revisions', 'false') === 'true');
+        $dryRun = !($request->has('confirm'));
+
+        $imagesToDelete = $imageService->deleteUnusedImages($checkRevisions, $dryRun);
+        $deleteCount = count($imagesToDelete);
+        if ($deleteCount === 0) {
+            session()->flash('warning', trans('settings.maint_image_cleanup_nothing_found'));
+            return redirect('/settings/maintenance')->withInput();
+        }
+
+        if ($dryRun) {
+            session()->flash('cleanup-images-warning', trans('settings.maint_image_cleanup_warning', ['count' => $deleteCount]));
+        } else {
+            session()->flash('success', trans('settings.maint_image_cleanup_success', ['count' => $deleteCount]));
+        }
+
+        return redirect('/settings/maintenance#image-cleanup')->withInput();
+    }
 }
diff --git a/app/Services/ImageService.php b/app/Services/ImageService.php
index d1193ab4f..73a677ac2 100644
--- a/app/Services/ImageService.php
+++ b/app/Services/ImageService.php
@@ -306,11 +306,11 @@ class ImageService extends UploadService
      *
      * Returns the path of the images that would be/have been deleted.
      * @param bool $checkRevisions
-     * @param array $types
      * @param bool $dryRun
+     * @param array $types
      * @return array
      */
-    public function deleteUnusedImages($checkRevisions = true, $types = ['gallery', 'drawio'], $dryRun = true)
+    public function deleteUnusedImages($checkRevisions = true, $dryRun = true, $types = ['gallery', 'drawio'])
     {
         $types = array_intersect($types, ['gallery', 'drawio']);
         $deletedPaths = [];
diff --git a/resources/assets/icons/spanner.svg b/resources/assets/icons/spanner.svg
new file mode 100644
index 000000000..8ab25a247
--- /dev/null
+++ b/resources/assets/icons/spanner.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path clip-rule="evenodd" fill="none" d="M0 0h24v24H0z"/>
+    <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/>
+</svg>
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index de4894280..3a3dbb9a4 100755
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -50,6 +50,19 @@ return [
     'reg_confirm_restrict_domain_desc' => 'Enter a comma separated list of email domains you would like to restrict registration to. Users will be sent an email to confirm their address before being allowed to interact with the application. <br> Note that users will be able to change their email addresses after successful registration.',
     'reg_confirm_restrict_domain_placeholder' => 'No restriction set',
 
+    /**
+     * Maintenance settings
+     */
+
+    'maint' => 'Maintenance',
+    'maint_image_cleanup' => 'Cleanup Images',
+    'maint_image_cleanup_desc' => "Scans page & revision content to check which images and drawings are currently in use and which images are redundant. Ensure you create a full database and image backup before running this.",
+    'maint_image_cleanup_ignore_revisions' => 'Ignore images in revisions',
+    'maint_image_cleanup_run' => 'Run Cleanup',
+    'maint_image_cleanup_warning' => ':count potentially unused images were found. Are you sure you want to delete these images?',
+    'maint_image_cleanup_success' => ':count potentially unused images found and deleted!',
+    'maint_image_cleanup_nothing_found' => 'No unused images found, Nothing deleted!',
+
     /**
      * Role settings
      */
diff --git a/resources/views/settings/maintenance.blade.php b/resources/views/settings/maintenance.blade.php
new file mode 100644
index 000000000..abf793ade
--- /dev/null
+++ b/resources/views/settings/maintenance.blade.php
@@ -0,0 +1,49 @@
+@extends('simple-layout')
+
+@section('toolbar')
+    @include('settings/navbar', ['selected' => 'maintenance'])
+@stop
+
+@section('body')
+<div class="container small">
+
+    <div class="text-right text-muted container">
+        <br>
+        BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
+    </div>
+
+
+    <div class="card" id="image-cleanup">
+        <h3>@icon('images') {{ trans('settings.maint_image_cleanup') }}</h3>
+        <div class="body">
+            <div class="row">
+                <div class="col-sm-6">
+                    <p class="small muted">{{ trans('settings.maint_image_cleanup_desc') }}</p>
+                </div>
+                <div class="col-sm-6">
+                    <form method="POST" action="{{ baseUrl('/settings/maintenance/cleanup-images') }}">
+                        {!! csrf_field()  !!}
+                        <input type="hidden" name="_method" value="DELETE">
+                        <div>
+                            @if(session()->has('cleanup-images-warning'))
+                                <p class="text neg">
+                                    {{ session()->get('cleanup-images-warning') }}
+                                </p>
+                                <input type="hidden" name="ignore_revisions" value="{{ session()->getOldInput('ignore_revisions', 'false') }}">
+                                <input type="hidden" name="confirm" value="true">
+                            @else
+                                <label>
+                                    <input type="checkbox" name="ignore_revisions" value="true">
+                                    {{ trans('settings.maint_image_cleanup_ignore_revisions') }}
+                                </label>
+                            @endif
+                        </div>
+                        <button class="button outline">{{ trans('settings.maint_image_cleanup_run') }}</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+@stop
diff --git a/resources/views/settings/navbar.blade.php b/resources/views/settings/navbar.blade.php
index 0547b168c..f9db96894 100644
--- a/resources/views/settings/navbar.blade.php
+++ b/resources/views/settings/navbar.blade.php
@@ -2,6 +2,7 @@
 <div class="col-md-12 setting-nav nav-tabs">
     @if($currentUser->can('settings-manage'))
         <a href="{{ baseUrl('/settings') }}" @if($selected == 'settings') class="selected text-button" @endif>@icon('settings'){{ trans('settings.settings') }}</a>
+        <a href="{{ baseUrl('/settings/maintenance') }}" @if($selected == 'maintenance') class="selected text-button" @endif>@icon('spanner'){{ trans('settings.maint') }}</a>
     @endif
     @if($currentUser->can('users-manage'))
         <a href="{{ baseUrl('/settings/users') }}" @if($selected == 'users') class="selected text-button" @endif>@icon('users'){{ trans('settings.users') }}</a>
diff --git a/routes/web.php b/routes/web.php
index 7cad0c585..7c9a5a60e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -152,6 +152,10 @@ Route::group(['middleware' => 'auth'], function () {
         Route::get('/', 'SettingController@index')->name('settings');
         Route::post('/', 'SettingController@update');
 
+        // Maintenance
+        Route::get('/maintenance', 'SettingController@showMaintenance');
+        Route::delete('/maintenance/cleanup-images', 'SettingController@cleanupImages');
+
         // Users
         Route::get('/users', 'UserController@index');
         Route::get('/users/create', 'UserController@create');
diff --git a/tests/ImageTest.php b/tests/ImageTest.php
index 810fb3edf..0f1e772e9 100644
--- a/tests/ImageTest.php
+++ b/tests/ImageTest.php
@@ -2,6 +2,8 @@
 
 use BookStack\Image;
 use BookStack\Page;
+use BookStack\Repos\EntityRepo;
+use BookStack\Services\ImageService;
 
 class ImageTest extends TestCase
 {
@@ -234,4 +236,59 @@ class ImageTest extends TestCase
         ]);
     }
 
+    public function test_deleted_unused_images()
+    {
+        $page = Page::first();
+        $admin = $this->getAdmin();
+        $this->actingAs($admin);
+
+        $imageName = 'unused-image.png';
+        $relPath = $this->getTestImagePath('gallery', $imageName);
+        $this->deleteImage($relPath);
+
+        $upload = $this->uploadImage($imageName, $page->id);
+        $upload->assertStatus(200);
+        $image = Image::where('type', '=', 'gallery')->first();
+
+        $entityRepo = app(EntityRepo::class);
+        $entityRepo->updatePage($page, $page->book_id, [
+            'name' => $page->name,
+            'html' => $page->html . "<img src=\"{$image->url}\">",
+            'summary' => ''
+        ]);
+
+        // Ensure no images are reported as deletable
+        $imageService = app(ImageService::class);
+        $toDelete = $imageService->deleteUnusedImages(true, true);
+        $this->assertCount(0, $toDelete);
+
+        // Save a revision of our page without the image;
+        $entityRepo->updatePage($page, $page->book_id, [
+            'name' => $page->name,
+            'html' => "<p>Hello</p>",
+            'summary' => ''
+        ]);
+
+        // Ensure revision images are picked up okay
+        $imageService = app(ImageService::class);
+        $toDelete = $imageService->deleteUnusedImages(true, true);
+        $this->assertCount(0, $toDelete);
+        $toDelete = $imageService->deleteUnusedImages(false, true);
+        $this->assertCount(1, $toDelete);
+
+        // Check image is found when revisions are destroyed
+        $page->revisions()->delete();
+        $toDelete = $imageService->deleteUnusedImages(true, true);
+        $this->assertCount(1, $toDelete);
+
+        // Check the image is deleted
+        $absPath = public_path($relPath);
+        $this->assertTrue(file_exists($absPath), "Existing uploaded file at path {$absPath} exists");
+        $toDelete = $imageService->deleteUnusedImages(true, false);
+        $this->assertCount(1, $toDelete);
+        $this->assertFalse(file_exists($absPath));
+
+        $this->deleteImage($relPath);
+    }
+
 }
\ No newline at end of file