Change image-selector to not use manager

- Now changes the images directly for user, system & cover.
- Extra permission checks added to edit & delete actions.

resources/assets/js/components/image-picker.js

@@ -4,54 +4,50 @@ class ImagePicker {
     constructor(elem) {
         this.elem = elem;
         this.imageElem = elem.querySelector('img');
-        this.input = elem.querySelector('input');
+        this.imageInput = elem.querySelector('input[type=file]');
+        this.resetInput = elem.querySelector('input[data-reset-input]');
+        this.removeInput = elem.querySelector('input[data-remove-input]');
 
-        this.isUsingIds = elem.getAttribute('data-current-id') !== '';
-        this.isResizing = elem.getAttribute('data-resize-height') && elem.getAttribute('data-resize-width');
-        this.isResizeCropping = elem.getAttribute('data-resize-crop') !== '';
+        this.defaultImage = elem.getAttribute('data-default-image');
 
-        let selectButton = elem.querySelector('button[data-action="show-image-manager"]');
-        selectButton.addEventListener('click', this.selectImage.bind(this));
-
-        let resetButton = elem.querySelector('button[data-action="reset-image"]');
+        const resetButton = elem.querySelector('button[data-action="reset-image"]');
         resetButton.addEventListener('click', this.reset.bind(this));
 
-        let removeButton = elem.querySelector('button[data-action="remove-image"]');
+        const removeButton = elem.querySelector('button[data-action="remove-image"]');
         if (removeButton) {
             removeButton.addEventListener('click', this.removeImage.bind(this));
         }
+
+        this.imageInput.addEventListener('change', this.fileInputChange.bind(this));
     }
 
-    selectImage() {
-        window.ImageManager.show(image => {
-            if (!this.isResizing) {
-                this.setImage(image);
-                return;
-            }
+    fileInputChange() {
+        this.resetInput.setAttribute('disabled', 'disabled');
+        if (this.removeInput) {
+            this.removeInput.setAttribute('disabled', 'disabled');
+        }
 
-            let requestString = '/images/thumb/' + image.id + '/' + this.elem.getAttribute('data-resize-width') + '/' + this.elem.getAttribute('data-resize-height') + '/' + (this.isResizeCropping ? 'true' : 'false');
-
-            window.$http.get(window.baseUrl(requestString)).then(resp => {
-                image.url = resp.data.url;
-                this.setImage(image);
-            });
-        });
+        for (let file of this.imageInput.files) {
+            this.imageElem.src = window.URL.createObjectURL(file);
+        }
+        this.imageElem.classList.remove('none');
     }
 
     reset() {
-        this.setImage({id: 0, url: this.elem.getAttribute('data-default-image')});
-    }
-
-    setImage(image) {
-        this.imageElem.src = image.url;
-        this.input.value = this.isUsingIds ? image.id : image.url;
+        this.imageInput.value = '';
+        this.imageElem.src = this.defaultImage;
+        this.resetInput.removeAttribute('disabled');
+        if (this.removeInput) {
+            this.removeInput.setAttribute('disabled', 'disabled');
+        }
         this.imageElem.classList.remove('none');
     }
 
     removeImage() {
-        this.imageElem.src = this.elem.getAttribute('data-default-image');
+        this.imageInput.value = '';
         this.imageElem.classList.add('none');
-        this.input.value = 'none';
+        this.removeInput.removeAttribute('disabled');
+        this.resetInput.setAttribute('disabled', 'disabled');
     }
 
 }

resources/assets/js/components/markdown-editor.js

@@ -394,9 +394,7 @@ class MarkdownEditor {
         const drawingId = imgContainer.getAttribute('drawio-diagram');
 
         DrawIO.show(() => {
-            return window.$http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
-                return `data:image/png;base64,${resp.data.content}`;
-            });
+            return DrawIO.load(drawingId);
         }, (pngData) => {
 
             let data = {

resources/assets/js/components/wysiwyg-editor.js

@@ -299,9 +299,7 @@ function drawIoPlugin() {
         }
 
         let drawingId = currentNode.getAttribute('drawio-diagram');
-        return window.$http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
-            return `data:image/png;base64,${resp.data.content}`;
-        });
+        return DrawIO.load(drawingId);
     }
 
     window.tinymce.PluginManager.add('drawio', function(editor, url) {

resources/assets/js/services/drawio.js

@@ -75,4 +75,14 @@ async function upload(imageData, pageUploadedToId) {
     return resp.data;
 }
 
-export default {show, close, upload};
+/**
+ * Load an existing image, by fetching it as Base64 from the system.
+ * @param drawingId
+ * @returns {Promise<string>}
+ */
+async function load(drawingId) {
+    const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
+    return `data:image/png;base64,${resp.data.content}`;
+}
+
+export default {show, close, upload, load};

resources/assets/sass/_layout.scss

@@ -140,6 +140,10 @@ body.flexbox {
   display: inline-block;
 }
 
+.hidden {
+  display: none;
+}
+
 .float {
   float: left;
   &.right {

resources/lang/en/validation.php

@@ -71,6 +71,7 @@ return [
     'timezone'             => 'The :attribute must be a valid zone.',
     'unique'               => 'The :attribute has already been taken.',
     'url'                  => 'The :attribute format is invalid.',
+    'uploaded'             => 'The file could not be uploaded. The server may not accept files of this size.',
 
     // Custom validation lines
     'custom' => [

resources/views/books/create.blade.php

@@ -33,5 +33,4 @@
         </div>
     </div>
 
-    @include('components.image-manager', ['imageType' => 'cover'])
 @stop

resources/views/books/edit.blade.php

@@ -16,12 +16,10 @@
 
         <div class="content-wrap card">
             <h1 class="list-heading">{{ trans('entities.books_edit') }}</h1>
-            <form action="{{ $book->getUrl() }}" method="POST">
+            <form action="{{ $book->getUrl() }}" method="POST" enctype="multipart/form-data">
                 <input type="hidden" name="_method" value="PUT">
                 @include('books.form', ['model' => $book])
             </form>
         </div>
     </div>
-
-    @include('components.image-manager', ['imageType' => 'cover', 'uploaded_to'])
 @stop

resources/views/books/form.blade.php

@@ -18,13 +18,9 @@
         <p class="small">{{ trans('common.cover_image_description') }}</p>
 
         @include('components.image-picker', [
-            'resizeHeight' => '512',
-            'resizeWidth' => '512',
-            'showRemove' => false,
             'defaultImage' => baseUrl('/book_default_cover.png'),
-            'currentImage' => isset($model) ? $model->getBookCover() : baseUrl('/book_default_cover.png') ,
-            'currentId' => isset($model) && $model->image_id ? $model->image_id : 0,
-            'name' => 'image_id',
+            'currentImage' => (isset($model) && $model->cover) ? $model->getBookCover() : baseUrl('/book_default_cover.png') ,
+            'name' => 'image',
             'imageClass' => 'cover'
         ])
     </div>

resources/views/components/image-picker.blade.php

@@ -1,22 +1,32 @@
-<div class="image-picker" image-picker="{{$name}}" data-default-image="{{ $defaultImage }}" data-resize-height="{{ $resizeHeight }}" data-resize-width="{{ $resizeWidth }}" data-current-id="{{ $currentId ?? '' }}" data-resize-crop="{{ $resizeCrop ?? '' }}">
+<div class="image-picker @if($errors->has($name)) has-error @endif"
+     image-picker="{{$name}}"
+     data-default-image="{{ $defaultImage }}">
 
     <div class="grid half">
         <div class="text-center">
             <img @if($currentImage && $currentImage !== 'none') src="{{$currentImage}}" @else src="{{$defaultImage}}" @endif  class="{{$imageClass}} @if($currentImage=== 'none') none @endif" alt="{{ trans('components.image_preview') }}">
         </div>
         <div class="text-center">
-            <button class="button outline small" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
+
+            <label for="{{ $name }}" class="button outline">{{ trans('components.image_select_image') }}</label>
+            <input type="file" class="hidden" accept="image/*" name="{{ $name }}" id="{{ $name }}">
+            <input type="hidden" data-reset-input name="{{ $name }}_reset" value="true" disabled="disabled">
+            @if(isset($removeName))
+                <input type="hidden" data-remove-input name="{{ $removeName }}" value="{{ $removeValue }}" disabled="disabled">
+            @endif
+
             <br>
             <button class="text-button text-muted" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
 
-            @if ($showRemove)
+            @if(isset($removeName))
                 <span class="sep">|</span>
                 <button class="text-button text-muted" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
             @endif
         </div>
     </div>
 
-    <input type="hidden" name="{{$name}}" id="{{$name}}" value="{{ isset($currentId) && ($currentId !== 0 && $currentId !== false) ? $currentId : $currentImage}}">
-{{--    TODO - Revamp to be custom file upload button, instead of being linked to image manager--}}
-{{--    TODO - Remove image manager use where this is used and clean image manager for drawing/gallery use.--}}
+    @if($errors->has($name))
+        <div class="text-neg text-small">{{ $errors->first($name) }}</div>
+    @endif
+
 </div>

resources/views/settings/index.blade.php

@@ -79,7 +79,7 @@
 
         <div class="card content-wrap auto-height">
             <h2 class="list-heading">{{ trans('settings.app_customization') }}</h2>
-            <form action="{{ baseUrl("/settings") }}" method="POST">
+            <form action="{{ baseUrl("/settings") }}" method="POST" enctype="multipart/form-data">
                 {!! csrf_field() !!}
 
                 <div class="setting-list">
@@ -119,14 +119,12 @@
                         </div>
                         <div>
                             @include('components.image-picker', [
-                                     'resizeHeight' => '43',
-                                     'resizeWidth' => '200',
-                                     'showRemove' => true,
+                                     'removeName' => 'setting-app-logo',
+                                     'removeValue' => 'none',
                                      'defaultImage' => baseUrl('/logo.png'),
                                      'currentImage' => setting('app-logo'),
-                                     'name' => 'setting-app-logo',
+                                     'name' => 'app_logo',
                                      'imageClass' => 'logo-image',
-                                     'currentId' => false
                                  ])
                         </div>
                     </div>

resources/views/shelves/create.blade.php

@@ -26,6 +26,4 @@
 
     </div>
 
-    @include('components.image-manager', ['imageType' => 'cover'])
-
 @stop

resources/views/shelves/edit.blade.php

@@ -16,7 +16,7 @@
 
         <div class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.shelves_edit') }}</h1>
-            <form action="{{ $shelf->getUrl() }}" method="POST">
+            <form action="{{ $shelf->getUrl() }}" method="POST" enctype="multipart/form-data">
                 <input type="hidden" name="_method" value="PUT">
                 @include('shelves.form', ['model' => $shelf])
             </form>

resources/views/shelves/form.blade.php

@@ -53,13 +53,9 @@
         <p class="small">{{ trans('common.cover_image_description') }}</p>
 
         @include('components.image-picker', [
-            'resizeHeight' => '512',
-            'resizeWidth' => '512',
-            'showRemove' => false,
             'defaultImage' => baseUrl('/book_default_cover.png'),
-            'currentImage' => isset($shelf) ? $shelf->getBookCover() : baseUrl('/book_default_cover.png') ,
-            'currentId' => isset($shelf) && $shelf->image_id ? $shelf->image_id : 0,
-            'name' => 'image_id',
+            'currentImage' => (isset($shelf) && $shelf->cover) ? $shelf->getBookCover() : baseUrl('/book_default_cover.png') ,
+            'name' => 'image',
             'imageClass' => 'cover'
         ])
     </div>

resources/views/users/edit.blade.php

@@ -9,7 +9,7 @@
 
         <div class="card content-wrap">
             <h1 class="list-heading">{{ $user->id === $currentUser->id ? trans('settings.users_edit_profile') : trans('settings.users_edit') }}</h1>
-            <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="post">
+            <form action="{{ baseUrl("/settings/users/{$user->id}") }}" method="post" enctype="multipart/form-data">
                 {!! csrf_field() !!}
                 <input type="hidden" name="_method" value="PUT">
 
@@ -29,7 +29,7 @@
                                 'defaultImage' => baseUrl('/user_avatar.png'),
                                 'currentImage' => $user->getAvatar(80),
                                 'currentId' => $user->image_id,
-                                'name' => 'image_id',
+                                'name' => 'profile_image',
                                 'imageClass' => 'avatar large'
                             ])
                         </div>
@@ -87,5 +87,4 @@
         @endif
     </div>
 
-    @include('components.image-manager', ['imageType' => 'user', 'uploaded_to' => $user->id])
 @stop