Article editor: images gallery

Author: Zane

assets/article-edit.js

@@ -4,4 +4,4 @@ import './js/article-edit-contenteditable';
 import './js/modal-ajax';
 import './js/article-edit-authors';
 import './js/article-edit-tags';
-import './js/article-edit-images';
+import './js/article-edit-upload-images';

assets/js/article-edit-images.js

@@ -0,0 +1,68 @@
+//import $ from 'jquery';
+
+
+jQuery(document).on('click', '.tli-image-upload',  function(event) {
+    $(this).siblings('input[type="file"]').click();
+});
+
+
+$(document).on('change', '#tli-article-editor-image-gallery input[type="file"]', function() {
+
+    const files = this.files;
+    if (files.length === 0) {
+        return;
+    }
+
+    const formData = new FormData();
+    for (let i = 0; i < files.length; i++) {
+        formData.append('images[]', files[i]);
+    }
+
+    const uploadCommandContainer = $('.tli-image-upload');
+    uploadCommandContainer.addClass('d-none');
+
+    const progressBarContainer = $('#tli-image-upload-progress');
+    progressBarContainer.removeClass('d-none');
+
+    const progressBar = progressBarContainer.find('.progress-bar');
+    progressBar.addClass('progress-bar-animated progress-bar-striped');
+    progressBar.removeClass('bg-success bg-danger');
+
+    $.ajax({
+        url: $('#tli-article-editor-image-gallery').data('save-url'),
+        type: 'POST',
+        data: formData,
+        processData: false,
+        contentType: false,
+        xhr: function() {
+            const xhr = new window.XMLHttpRequest();
+            // Upload progress
+            xhr.upload.addEventListener('progress', function(evt) {
+                if (evt.lengthComputable) {
+                    const percentComplete = Math.round((evt.loaded / evt.total) * 100);
+                    progressBar.width(percentComplete + '%');
+                    progressBar.attr('aria-valuenow', percentComplete).text(percentComplete + '%');
+                }
+            }, false);
+            return xhr;
+        },
+        success: function(response) {
+            debugger;
+            progressBar.addClass('bg-success');
+            //progressBarContainer.append('<div class="alert alert-success mt-2">✅ ' + response.message + '</div>');
+        },
+        error: function(jqXHR, textStatus, errorThrown) {
+            debugger;
+            progressBar.addClass('bg-danger');
+            //const errorMsg = jqXHR.responseJSON ? jqXHR.responseJSON.error : 'An unknown error occurred.';
+            //progressBarContainer.append('<div class="alert alert-danger mt-2">❌ ' + errorMsg + '</div>');
+        },
+        complete: function() {
+
+            $(this).val('');
+            uploadCommandContainer.removeClass('d-none');
+            //progressBarContainer.addClass('d-none');
+            progressBar.removeClass('progress-bar-animated progress-bar-striped');
+        }
+    });
+});

assets/js/article-edit-upload-images.js

@@ -12,6 +12,8 @@ class ArticleUploadImages extends ArticleEditBaseController
     public function upload(int $articleId) : JsonResponse|Response
     {
         try {
+            return new Response('OK');
+
             dd("TODO");
             $arrIdsAndTags = $this->request->get('tags') ?? [];
             $this->loadArticleEditor($articleId)->setTagsFromIdsAndTags($arrIdsAndTags);

src/Controller/Editor/ArticleUploadImages.php

@@ -34,9 +34,9 @@
 
         <input type="file" multiple accept="image/*" class="d-none">
 
-        <div id="tli-image-upload-progress" class="progress d-none" role="progressbar"
+        <div id="tli-image-upload-progress" class="progress d-none mt-2" role="progressbar"
              aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>
+            <div class="progress-bar" style="width: 0%"></div>
         </div>
 
     </div>