enhance(fileuploader): handle removeal via ajax

laravolt · Nov 19, 2019 · f280fa4 · f280fa4
1 parent ed50391
commit f280fa4
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 2 deletions.
diff --git a/public/js/all.js b/public/js/all.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,6 +1,6 @@
 {
     "/css/app.css": "/css/app.css?id=9ccf21a457016100da27",
-    "/js/all.js": "/js/all.js?id=3eba0bcff9d88ae04719",
+    "/js/all.js": "/js/all.js?id=ab3c35e8986e524c8081",
     "/css/all.css": "/css/all.css?id=7b2e7f4696f2d3bf19b0",
     "/semantic/semantic.min.css": "/semantic/semantic.min.css?id=395cd6af3c3778570b67"
 }
diff --git a/resources/js/init/ui.js b/resources/js/init/ui.js
@@ -223,11 +223,73 @@ $(function () {
       extensions = null;
     }
 
+    var upload = null;
+
+    if ($(elm).data('media-url')) {
+      upload = {
+        url: $(elm).data('media-url'),
+        data: {_token: $(elm).data('token'), _key: $(elm).attr('name'), _action: 'upload'},
+        type: 'POST',
+        enctype: 'multipart/form-data',
+        start: true,
+        synchron: true,
+        chunk: false,
+        onSuccess: function (data, item, listEl, parentEl, newInputEl, inputEl, textStatus, jqXHR) {
+
+          item.local = data.files[0].file;
+          item.html.find('.fileuploader-action-remove').addClass('fileuploader-action-success');
+
+          setTimeout(function () {
+            item.html.find('.progress-bar2').fadeOut(400);
+          }, 400);
+        },
+        onError: function (item, listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus, errorThrown) {
+          var progressBar = item.html.find('.progress-bar2');
+
+          if (progressBar.length > 0) {
+            progressBar.find('span').html(0 + "%");
+            progressBar.find('.fileuploader-progressbar .bar').width(0 + "%");
+            item.html.find('.progress-bar2').fadeOut(400);
+          }
+
+          item.upload.status != 'cancelled' && item.html.find('.fileuploader-action-retry').length == 0 ? item.html.find('.column-actions').prepend(
+            '<a class="fileuploader-action fileuploader-action-retry" title="Retry"><i></i></a>'
+          ) : null;
+        },
+        onProgress: function (data, item, listEl, parentEl, newInputEl, inputEl) {
+          var progressBar = item.html.find('.progress-bar2');
+
+          if (progressBar.length > 0) {
+            progressBar.show();
+            progressBar.find('span').html(data.percentage + "%");
+            progressBar.find('.fileuploader-progressbar .bar').width(data.percentage + "%");
+          }
+        },
+        onComplete: function (listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus) {
+          // callback will go here
+        }
+      }
+    }
+
     $(elm).fileuploader({
       theme: 'simple',
       limit: $(elm).data('limit'),
       extensions: extensions,
       addMore: true,
+      upload: upload,
+      onRemove: function (item) {
+        if ($(elm).data('media-url')) {
+          console.log(item);
+          $.post($(elm).data('media-url'), {
+            _token: $(elm).data('token'),
+            _action: 'delete',
+            file: item.file,
+            id: item.data.id
+          });
+        }
+
+        return true;
+      },
       changeInput: '<div class="fileuploader-input">' +
         '<div class="fileuploader-input-inner">' +
         '<div><span>${captions.browse}</span></div>' +