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

@@ -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'));
     }

app/Image.php

@@ -9,13 +9,23 @@ class Image extends Ownable
 
     /**
      * Get a thumbnail for this image.
-     * @param  int       $width
+     * @param  int $width
-     * @param  int       $height
+     * @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);
+    }
 }

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);
+    }
+}

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');
+    }
+}

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');
                 }
 
             },

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}/${this.view}/`);
-        baseUrl = window.baseUrl(`/images/${this.imageType}/${viewName}/`);
-        this.fetchData();
     },
 
     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 (!this.deleteConfirm) {
-        if (force) url += '?force=true';
+            let url = window.baseUrl(`/images/usage/${this.selectedImage.id}`);
-        this.$http.delete(url).then(response => {
+            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=> {
+            this.deleteConfirm = false;
-            if (error.response.status === 400) {
-                this.dependantPages = error.response.data;
-            }
         });
     },
 

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);
+    //transform: scale3d(0.92, 0.92, 0.92);
-    border: 1px solid #444;
+    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;
+  font-size: 1em;
-  line-height: 1.1;
+  line-height: 2.35;
   font-style: italic;
-  color: #aaa;
+  color: #888;
   text-align: center;
   cursor: pointer;
   padding: $-l $-m;

resources/assets/sass/styles.scss

@@ -154,6 +154,7 @@ $btt-size: 40px;
   }
   input {
     flex: 5;
+    padding: $-xs $-s;
     &:focus, &:active {
       outline: 0;
     }

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',

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',

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',

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',

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',

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',

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' => '画像を削除しました',

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',

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',

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',

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' => 'Изображения удалены',

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é',

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',

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' => '图片已删除',

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' => '圖片已刪除',

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">
+                                <div class="float left">
-                                    <button class="button icon neg">@icon('delete')</button>
+                                    <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
-                                </form>
+
-                                <button class="button pos anim fadeIn float right" v-show="selectedImage" @click="callbackAndHide(selectedImage)">
+                                </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>

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');