Se agrega mensaje cuando no se carga los archivos

resources/views/admin/eventos/show.blade.php

@@ -98,6 +98,42 @@
 
 @push('scripts')
   <script type="text/javascript">
+    class Elem {
+      constructor(tag, attrs, close = true) {
+        this.tag = '<' + tag
+        if (close) {
+          this.tag += '></' + tag + '>'
+        } else {
+          this.tag += '/>'
+        }
+        this.attrs = attrs
+        this.children = []
+      }
+      addChild(child) {
+        if (typeof child != 'object' || typeof child.tag == 'undefined') {
+          return this
+        }
+        this.children.push(child)
+        return this
+      }
+      html(text) {
+        this.text = text
+        return this
+      }
+      build() {
+        let obj = $(this.tag)
+        $.each(this.attrs, (key, el) => {
+          obj.attr(key, el)
+        })
+        $.each(this.children, (i, el) => {
+          obj.append(el.build())
+        })
+        if (typeof this.text !== 'undefined') {
+          obj.html(this.text)
+        }
+        return obj
+      }
+    }
     var imagenes = {
       imagenes: [
         @if ($imagenes)
@@ -115,6 +151,30 @@
           imagenes.deleteImage(i)
         })
       },
+      buildForm: () => {
+        let form = new Elem('form', {class: 'ui form', id: 'add_image'}).addChild(
+          new Elem('div', {class: 'ui grid'}).addChild(
+            new Elem('div', {class: 'row'}).addChild(
+              new Elem('div', {class: 'sixteen wide column'}).addChild(
+                new Elem('div', {class: 'ui fluid input'}).addChild(
+                  new Elem('input', {type: 'file', name: 'imagen[]', multiple: 'multiple'}, false)
+                )
+              )
+            )
+          ).addChild(
+            new Elem('div', {class: 'row'}).addChild(
+              new Elem('div', {class: 'two wide column'}).addChild(
+                new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
+              )
+            ).addChild(
+              new Elem('div', {class: 'fourteen wide column'}).addChild(
+                new Elem('div', {id: 'resultado', class: 'ui fluid basic segment'})
+              )
+            )
+          )
+        )
+        return form.build()
+      },
       add: () => {
         var imgs = $('#imagenes')
         var div = imgs.next('.modal')
@@ -134,21 +194,17 @@
           div.modal('show')
           return
         }
+
         div.append(
           $('<div></div>').attr('class', 'header').html('Media')
         ).append(
-          $('<div></div>').attr('class', 'content').append(
+          $('<div></div>').attr('class', 'content').append(imagenes.buildForm())
-            $('<form></form>').attr('class', 'ui form').attr('id', 'add_image').append(
-              $('<div></div>').attr('class', 'ui fluid input').append(
-                $('<input />').attr('type', 'file').attr('name', 'imagen[]').attr('multiple', 'multiple')
-              )
-            ).append(
-              $('<button></button>').attr('class', 'ui button').html('Agregar')
-            )
-          )
         )
         imgs.after(div)
         div.modal('show')
+        div.find('form .button').click((e) => {
+          div.find('form').submit()
+        })
         div.find('form').submit((e) => {
           e.preventDefault()
           imagenes.addImage()
@@ -157,6 +213,10 @@
       },
       addImage: () => {
         let form = $('#add_image')
+        $('#resultado').html('')
+        $('#resultado').append(
+          $('<div></div>').attr('class', 'ui active loader')
+        )
         let data = new FormData(form[0])
         let url = '{{$urls->admin}}/evento/{{$evento->id}}/add'
         $.ajax({
@@ -169,6 +229,28 @@
             if (output.estado) {
               window.location.reload()
             }
+            $('#resultado').html('')
+            $('#resultado').append(
+              $('<div></div>').attr('class', 'ui negative message')
+                .append($('<i></i>').attr('class', 'inline close icon'))
+                .append('<p>No se pudo agregar.</p>')
+            )
+            $('#resultado .message .close').on('click', function() {
+              $(this).closest('.message')
+                  .transition('fade');
+            });
+          },
+          error: () => {
+            $('#resultado').html('')
+            $('#resultado').append(
+              $('<div></div>').attr('class', 'ui negative message')
+                .append($('<i></i>').attr('class', 'inline close icon'))
+                .append('<p>No se pudo agregar.</p>')
+            )
+            $('#resultado .message .close').on('click', function() {
+              $(this).closest('.message')
+                  .transition('fade');
+            });
           }
         })
       },