Merge pull request #4193 from BookStackApp/custom_dropzone

Custom dropzone implementation

app/Http/Controllers/Images/GalleryImageController.php

@@ -42,9 +42,14 @@ public function list(Request $request)
     public function create(Request $request)
     {
         $this->checkPermission('image-create-all');
-        $this->validate($request, [
-            'file' => $this->getImageValidationRules(),
-        ]);
+
+        try {
+            $this->validate($request, [
+                'file' => $this->getImageValidationRules(),
+            ]);
+        } catch (ValidationException $exception) {
+            return $this->jsonError(implode("\n", $exception->errors()['file']));
+        }
 
         try {
             $imageUpload = $request->file('file');

lang/en/components.php

@@ -6,6 +6,9 @@
 
     // Image Manager
     'image_select' => 'Image Select',
+    'image_upload' => 'Upload Image',
+    'image_intro' => 'Here you can select and manage images that have been previously uploaded to the system.',
+    'image_intro_upload' => 'Upload a new image by dragging an image file into this window, or by using the "Upload Image" button above.',
     'image_all' => 'All',
     'image_all_title' => 'View all images',
     'image_book_title' => 'View images uploaded to this book',
@@ -18,12 +21,12 @@
     'image_delete_confirm_text' => 'Are you sure you want to delete this image?',
     'image_select_image' => 'Select Image',
     'image_dropzone' => 'Drop images or click here to upload',
+    'image_dropzone_drop' => 'Drop images here to upload',
     'images_deleted' => 'Images Deleted',
     'image_preview' => 'Image Preview',
     'image_upload_success' => 'Image uploaded successfully',
     'image_update_success' => 'Image details successfully updated',
     'image_delete_success' => 'Image successfully deleted',
-    'image_upload_remove' => 'Remove',
 
     // Code Editor
     'code_editor' => 'Edit Code',

lang/en/entities.php

@@ -311,12 +311,12 @@
     'attachments' => 'Attachments',
     'attachments_explain' => 'Upload some files or attach some links to display on your page. These are visible in the page sidebar.',
     'attachments_explain_instant_save' => 'Changes here are saved instantly.',
-    'attachments_items' => 'Attached Items',
     'attachments_upload' => 'Upload File',
     'attachments_link' => 'Attach Link',
+    'attachments_upload_drop' => 'Alternatively you can drag and drop a file here to upload it as an attachment.',
     'attachments_set_link' => 'Set Link',
     'attachments_delete' => 'Are you sure you want to delete this attachment?',
-    'attachments_dropzone' => 'Drop files or click here to attach a file',
+    'attachments_dropzone' => 'Drop files here to upload',
     'attachments_no_files' => 'No files have been uploaded',
     'attachments_explain_link' => 'You can attach a link if you\'d prefer not to upload a file. This can be a link to another page or a link to a file in the cloud.',
     'attachments_link_name' => 'Link Name',

lang/en/errors.php

@@ -45,7 +45,6 @@
     'cannot_create_thumbs' => 'The server cannot create thumbnails. Please check you have the GD PHP extension installed.',
     'server_upload_limit' => 'The server does not allow uploads of this size. Please try a smaller file size.',
     'uploaded'  => 'The server does not allow uploads of this size. Please try a smaller file size.',
-    'file_upload_timeout' => 'The file upload has timed out.',
 
     // Drawing & Images
     'image_upload_error' => 'An error occurred uploading the image',
@@ -54,6 +53,7 @@
 
     // Attachments
     'attachment_not_found' => 'Attachment not found',
+    'attachment_upload_error' => 'An error occurred uploading the attachment file',
 
     // Pages
     'page_draft_autosave_fail' => 'Failed to save draft. Ensure you have internet connection before saving this page',

package.json

@@ -46,7 +46,6 @@
     "@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
     "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
     "codemirror": "^6.0.1",
-    "dropzone": "^5.9.3",
     "markdown-it": "^13.0.1",
     "markdown-it-task-lists": "^2.1.1",
     "snabbdom": "^3.5.1",

readme.md

@@ -133,7 +133,6 @@ Note: This is not an exhaustive list of all libraries and projects that would be
 * [CodeMirror](https://codemirror.net) - _[MIT](https://github.com/codemirror/CodeMirror/blob/master/LICENSE)_
 * [Sortable](https://github.com/SortableJS/Sortable) - _[MIT](https://github.com/SortableJS/Sortable/blob/master/LICENSE)_
 * [Google Material Icons](https://github.com/google/material-design-icons) - _[Apache-2.0](https://github.com/google/material-design-icons/blob/master/LICENSE)_
-* [Dropzone.js](http://www.dropzonejs.com/) - _[MIT](https://github.com/dropzone/dropzone/blob/main/LICENSE)_
 * [markdown-it](https://github.com/markdown-it/markdown-it) and [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - _[MIT](https://github.com/markdown-it/markdown-it/blob/master/LICENSE) and [ISC](https://github.com/revin/markdown-it-task-lists/blob/master/LICENSE)_
 * [Dompdf](https://github.com/dompdf/dompdf) - _[LGPL v2.1](https://github.com/dompdf/dompdf/blob/master/LICENSE.LGPL)_
 * [BarryVD/Dompdf](https://github.com/barryvdh/laravel-dompdf) - _[MIT](https://github.com/barryvdh/laravel-dompdf/blob/master/LICENSE)_

resources/js/components/attachments.js

@@ -8,15 +8,16 @@ export class Attachments extends Component {
         this.pageId = this.$opts.pageId;
         this.editContainer = this.$refs.editContainer;
         this.listContainer = this.$refs.listContainer;
-        this.mainTabs = this.$refs.mainTabs;
-        this.list = this.$refs.list;
+        this.linksContainer = this.$refs.linksContainer;
+        this.listPanel = this.$refs.listPanel;
+        this.attachLinkButton = this.$refs.attachLinkButton;
 
         this.setupListeners();
     }
 
     setupListeners() {
         const reloadListBound = this.reloadList.bind(this);
-        this.container.addEventListener('dropzone-success', reloadListBound);
+        this.container.addEventListener('dropzone-upload-success', reloadListBound);
         this.container.addEventListener('ajax-form-success', reloadListBound);
 
         this.container.addEventListener('sortable-list-sort', event => {
@@ -39,16 +40,29 @@ export class Attachments extends Component {
                 markdown: contentTypes['text/plain'],
             });
         });
+
+        this.attachLinkButton.addEventListener('click', () => {
+            this.showSection('links');
+        });
+    }
+
+    showSection(section) {
+        const sectionMap = {
+            links: this.linksContainer,
+            edit: this.editContainer,
+            list: this.listContainer,
+        };
+
+        for (const [name, elem] of Object.entries(sectionMap)) {
+            elem.toggleAttribute('hidden', name !== section);
+        }
     }
 
     reloadList() {
         this.stopEdit();
-        /** @var {Tabs} */
-        const tabs = window.$components.firstOnElement(this.mainTabs, 'tabs');
-        tabs.show('attachment-panel-items');
         window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
-            this.list.innerHTML = resp.data;
-            window.$components.init(this.list);
+            this.listPanel.innerHTML = resp.data;
+            window.$components.init(this.listPanel);
         });
     }
 
@@ -59,8 +73,7 @@ export class Attachments extends Component {
     }
 
     async startEdit(id) {
-        this.editContainer.classList.remove('hidden');
-        this.listContainer.classList.add('hidden');
+        this.showSection('edit');
 
         showLoading(this.editContainer);
         const resp = await window.$http.get(`/attachments/edit/${id}`);
@@ -69,8 +82,7 @@ export class Attachments extends Component {
     }
 
     stopEdit() {
-        this.editContainer.classList.add('hidden');
-        this.listContainer.classList.remove('hidden');
+        this.showSection('list');
     }
 
 }