Article editor: images gallery

Author: Zane

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

@@ -18,6 +18,8 @@ $(document).on('change', '#tli-article-editor-image-gallery input[type="file"]',
         formData.append('images[]', files[i]);
     }
 
+    let editorImageGallery = $('#tli-article-editor-image-gallery');
+
     const uploadCommandContainer = $('.tli-image-upload');
     uploadCommandContainer.addClass('d-none');
 
@@ -30,8 +32,11 @@ $(document).on('change', '#tli-article-editor-image-gallery input[type="file"]',
     progressBar.width('0%');
     progressBar.attr('aria-valuenow', 0).text('0%');
 
+    let errorMessage = editorImageGallery.find('.alert-danger');
+    errorMessage.addClass('collapse');
+
     $.ajax({
-        url: $('#tli-article-editor-image-gallery').data('save-url'),
+        url: editorImageGallery.data('save-url'),
         type: 'POST',
         data: formData,
         processData: false,
@@ -49,20 +54,23 @@ $(document).on('change', '#tli-article-editor-image-gallery input[type="file"]',
             return xhr;
         },
         success: function(response) {
-            debugger;
+
             progressBar.addClass('bg-success');
-            //progressBarContainer.append('<div class="alert alert-success mt-2">✅ ' + response.message + '</div>');
 
-            $('#tli-article-editor-image-gallery .tli-no-images-guide').fadeOut('slow', function(){
-                $('#tli-article-editor-image-gallery .tli-images-guide').fadeIn('fast');
+            $('#tli-images-gallery').append(response);
+
+            editorImageGallery.find('.tli-no-images-guide').fadeOut('slow', function(){
+                editorImageGallery.find('.tli-images-guide').fadeIn('fast');
             });
 
         },
         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>');
+
+            errorMessage
+                .removeClass('collapse')
+                .html(jqXHR.responseText);
         },
         complete: function() {
 

templates/article/editor/images-new-uploaded.html.twig

@@ -0,0 +1,8 @@
+{% for Image in Images %}
+    <div class="col">
+        <div class="ratio ratio-1x1">
+            <img src="{{ Image.url(Article, 'med') }}" loading="lazy" class="img-fluid object-fit-cover"
+                 alt="{{ Image.title }}" title="{{ Image.title }}">
+        </div>
+    </div>
+{% endfor %}

templates/article/editor/images.html.twig

@@ -14,7 +14,7 @@
         {% block alertBody %}Carica un'immagine per inserirla nell'articolo{% endblock %}
     {% endembed %}
 
-    <div class="row row-cols-2 g-1">
+    <div id="tli-images-gallery" class="row row-cols-2 g-1">
         {% for Image in Article.Images %}
             <div class="col">
                 <div class="ratio ratio-1x1">
@@ -39,6 +39,11 @@
             <div class="progress-bar" style="width: 0%"></div>
         </div>
 
+        {% embed 'parts/alert-error-message.html.twig' %}
+            {% block alertStyle %}mt-2 collapse{% endblock %}
+            {% block alertBodyIcon %}{% endblock %}
+        {% endembed %}
+
     </div>
 
 </div>

templates/parts/alert-error-message.html.twig

@@ -0,0 +1,8 @@
+<div class="alert alert-danger {% block alertStyle %}{% endblock %}" role="alert">
+
+    <div class="{% block alertBodyStyle %}text-center{% endblock %}">
+        {% block alertBodyIcon %}<i class="fa-solid fa-xmark" style="color: red;"></i>{% endblock %}
+        {% block alertBody %}{% endblock %}
+    </div>
+
+</div>