Finish rebuilding multi file uploader

Create stub for single file uploader

modules/backend/formwidgets/FileUpload.php

@@ -270,7 +270,10 @@ class FileUpload extends FormWidgetBase
     {
         if (($file_id = post('file_id')) && ($file = File::find($file_id))) {
             $file = $this->decorateFileAttributes($file);
+
             $this->vars['file'] = $file;
+            $this->vars['displayMode'] = $this->getDisplayMode();
+
             return $this->makePartial('config_form');
         }
 

modules/backend/formwidgets/fileupload/assets/css/fileupload.css

@@ -1,49 +1,3 @@
-.field-fileupload .upload-button {
-  display: block;
-  float: left;
-  border: 2px dotted rgba(0, 0, 0, 0.1);
-  position: relative;
-  outline: none;
-}
-.field-fileupload .upload-button table {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-}
-.field-fileupload .upload-button table td {
-  line-height: 16px;
-  font-size: 11px;
-  vertical-align: middle;
-  height: 100%;
-}
-.field-fileupload .upload-button table td:before {
-  text-align: center;
-  width: 100%;
-  display: block;
-  font-size: 22px;
-  color: rgba(0, 0, 0, 0.1);
-  vertical-align: middle;
-}
-.field-fileupload .upload-button table td span {
-  display: block;
-  padding: 10px;
-  text-align: center;
-}
-.field-fileupload .upload-button:hover {
-  border: 2px dotted rgba(0, 0, 0, 0.2);
-}
-.field-fileupload .upload-button:hover table td:before {
-  color: #5cb85c;
-  color: rgba(0, 0, 0, 0.2);
-}
-.field-fileupload .upload-button:focus {
-  border: 2px solid rgba(0, 0, 0, 0.3);
-  background: transparent;
-}
-.field-fileupload .upload-button:focus table td:before {
-  color: #5cb85c;
-  color: rgba(0, 0, 0, 0.2);
-}
 .field-fileupload .upload-object {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -93,6 +47,7 @@
   right: 0;
   top: 0;
   display: none;
+  font-weight: 400;
 }
 .field-fileupload .upload-object p.size {
   font-size: 12px;
@@ -106,6 +61,7 @@
   bottom: 0;
   right: 0;
   cursor: move;
+  display: block;
 }
 .field-fileupload .upload-object .info h4 a,
 .field-fileupload .upload-object .meta a.drag-handle {
@@ -133,6 +89,9 @@
   -webkit-animation: spin 1s linear infinite;
   animation: spin 1s linear infinite;
 }
+.field-fileupload .upload-object.is-success .icon-container {
+  opacity: 1;
+}
 .field-fileupload .upload-object.is-success .icon-container:after {
   opacity: 0;
   -webkit-transition: opacity 0.3s ease;
@@ -156,17 +115,28 @@
   margin-left: -20px;
   text-shadow: 2px 2px 0 #fff;
 }
+.field-fileupload .upload-object.is-loading .icon-container {
+  opacity: .6;
+}
+.field-fileupload .upload-object.is-loading .icon-container:after {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+}
 .field-fileupload .upload-object.is-success {
   cursor: pointer;
 }
-.field-fileupload .upload-object.is-success .icon-container {
-  opacity: 1;
-}
 .field-fileupload .upload-object.is-success .progress-bar {
   opacity: 0;
   -webkit-transition: opacity 0.3s ease;
   transition: opacity 0.3s ease;
 }
+.field-fileupload .upload-object.is-success:hover h4 a {
+  display: block;
+}
+.field-fileupload .upload-object.is-success:hover .meta .drag-handle {
+  display: block;
+}
 .field-fileupload .upload-object.is-error {
   cursor: pointer;
 }
@@ -198,17 +168,11 @@
 .field-fileupload.is-sortable .upload-object.dragged .uploader-toolbar {
   display: none;
 }
-body:not(.no-select) .field-fileupload .upload-object:hover h4 a {
-  display: block;
-}
-body:not(.no-select) .field-fileupload .upload-object:hover .meta .drag-handle {
-  display: block;
-}
 @media (max-width: 1024px) {
-  .field-fileupload .upload-object h4 a {
+  .field-fileupload .upload-object.is-success h4 a {
     display: block !important;
   }
-  .field-fileupload .upload-object .meta .drag-handle {
+  .field-fileupload .upload-object.is-success .meta .drag-handle {
     display: block !important;
   }
 }
@@ -217,9 +181,53 @@ body:not(.no-select) .field-fileupload .upload-object:hover .meta .drag-handle {
   margin: 0 10px 10px 0;
 }
 .field-fileupload.style-image-multi .upload-button {
+  display: block;
+  float: left;
+  border: 2px dotted rgba(0, 0, 0, 0.1);
+  position: relative;
+  outline: none;
   width: 76px;
   height: 76px;
 }
+.field-fileupload.style-image-multi .upload-button table {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+.field-fileupload.style-image-multi .upload-button table td {
+  line-height: 16px;
+  font-size: 11px;
+  vertical-align: middle;
+  height: 100%;
+}
+.field-fileupload.style-image-multi .upload-button table td:before {
+  text-align: center;
+  width: 100%;
+  display: block;
+  font-size: 22px;
+  color: rgba(0, 0, 0, 0.1);
+  vertical-align: middle;
+}
+.field-fileupload.style-image-multi .upload-button table td span {
+  display: block;
+  padding: 10px;
+  text-align: center;
+}
+.field-fileupload.style-image-multi .upload-button:hover {
+  border: 2px dotted rgba(0, 0, 0, 0.2);
+}
+.field-fileupload.style-image-multi .upload-button:hover table td:before {
+  color: #5cb85c;
+  color: rgba(0, 0, 0, 0.2);
+}
+.field-fileupload.style-image-multi .upload-button:focus {
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  background: transparent;
+}
+.field-fileupload.style-image-multi .upload-button:focus table td:before {
+  color: #5cb85c;
+  color: rgba(0, 0, 0, 0.2);
+}
 .field-fileupload.style-image-multi .upload-files-container {
   margin-left: 90px;
 }
@@ -262,6 +270,10 @@ body:not(.no-select) .field-fileupload .upload-object:hover .meta .drag-handle {
 .field-fileupload.style-image-multi .upload-object .icon-container i {
   font-size: 35px;
 }
+.field-fileupload.style-image-multi .upload-object .icon-container.image img {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
 .field-fileupload.style-image-multi .upload-object .info {
   margin-left: 90px;
 }
@@ -288,21 +300,21 @@ body:not(.no-select) .field-fileupload .upload-object:hover .meta .drag-handle {
 .field-fileupload.style-image-multi .upload-object.upload-placeholder:after {
   opacity: 0;
 }
-body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover {
+.field-fileupload.style-image-multi .upload-object:hover {
   background: #4da7e8 !important;
 }
-body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover i,
+.field-fileupload.style-image-multi .upload-object:hover i,
-body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover p.size {
+.field-fileupload.style-image-multi .upload-object:hover p.size {
   color: #ecf0f1;
 }
-body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover h4 {
+.field-fileupload.style-image-multi .upload-object:hover h4 {
   color: white;
 }
-body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover .icon-container {
+.field-fileupload.style-image-multi .upload-object:hover .icon-container {
   border-right-color: #4da7e8 !important;
 }
-body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover h4 {
+.field-fileupload.style-image-multi .upload-object:hover h4 {
-  padding-right: 35px !important;
+  padding-right: 35px;
 }
 @media (max-width: 1280px) {
   .field-fileupload.style-image-multi .upload-object {
@@ -325,10 +337,64 @@ body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover h4
 .field-fileupload.style-image-single.is-populated .upload-button {
   display: none;
 }
+.field-fileupload.style-image-single .upload-button {
+  display: block;
+  float: left;
+  border: 2px dotted rgba(0, 0, 0, 0.1);
+  position: relative;
+  outline: none;
+}
+.field-fileupload.style-image-single .upload-button table {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+.field-fileupload.style-image-single .upload-button table td {
+  line-height: 16px;
+  font-size: 11px;
+  vertical-align: middle;
+  height: 100%;
+}
+.field-fileupload.style-image-single .upload-button table td:before {
+  text-align: center;
+  width: 100%;
+  display: block;
+  font-size: 22px;
+  color: rgba(0, 0, 0, 0.1);
+  vertical-align: middle;
+}
+.field-fileupload.style-image-single .upload-button table td span {
+  display: block;
+  padding: 10px;
+  text-align: center;
+}
+.field-fileupload.style-image-single .upload-button:hover {
+  border: 2px dotted rgba(0, 0, 0, 0.2);
+}
+.field-fileupload.style-image-single .upload-button:hover table td:before {
+  color: #5cb85c;
+  color: rgba(0, 0, 0, 0.2);
+}
+.field-fileupload.style-image-single .upload-button:focus {
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  background: transparent;
+}
+.field-fileupload.style-image-single .upload-button:focus table td:before {
+  color: #5cb85c;
+  color: rgba(0, 0, 0, 0.2);
+}
+.field-fileupload.style-image-single .upload-object {
+  padding-bottom: 66px;
+}
 .field-fileupload.style-image-single .upload-object .icon-container {
   border: 1px solid #f6f8f9;
   background: rgba(255, 255, 255, 0.5);
 }
+.field-fileupload.style-image-single .upload-object .icon-container.image img {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
 .field-fileupload.style-image-single .upload-object .progress-bar {
   display: block;
   width: 100%;
@@ -354,6 +420,13 @@ body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover h4
   -webkit-transition: width 0.6s ease;
   transition: width 0.6s ease;
 }
+.field-fileupload.style-image-single .upload-object .info {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 66px;
+}
 .field-fileupload.style-image-single .upload-object .meta {
   position: absolute;
   bottom: 65px;
@@ -361,3 +434,159 @@ body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover h4
   right: 0;
   margin: 0 15px;
 }
+.field-fileupload.style-image-single .upload-object:hover h4 {
+  padding-right: 20px;
+}
+.field-fileupload.style-file-multi .upload-button {
+  margin-bottom: 10px;
+}
+.field-fileupload.style-file-multi .upload-files-container {
+  border: 1px solid #eeeeee;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  border-bottom: none;
+  display: none;
+}
+.field-fileupload.style-file-multi.is-populated .upload-files-container {
+  display: block;
+}
+.field-fileupload.style-file-multi .upload-object {
+  display: block;
+  width: 100%;
+  border-bottom: 1px solid #eeeeee;
+  padding-left: 10px;
+}
+.field-fileupload.style-file-multi .upload-object:nth-child(even) {
+  background-color: #f5f5f5;
+}
+.field-fileupload.style-file-multi .upload-object .icon-container {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  width: 15px;
+  padding: 11px 7px;
+}
+.field-fileupload.style-file-multi .upload-object .icon-container i {
+  line-height: 150%;
+  font-size: 15px;
+}
+.field-fileupload.style-file-multi .upload-object .icon-container img {
+  display: none;
+}
+.field-fileupload.style-file-multi .upload-object .info {
+  margin-left: 35px;
+  margin-right: 15%;
+}
+.field-fileupload.style-file-multi .upload-object .info h4,
+.field-fileupload.style-file-multi .upload-object .info p {
+  margin: 0;
+  padding: 11px 0;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 150%;
+  color: #666666;
+}
+.field-fileupload.style-file-multi .upload-object .info h4 {
+  padding-right: 15px;
+}
+.field-fileupload.style-file-multi .upload-object .info h4 a {
+  padding: 10px 0;
+  right: 15px;
+}
+.field-fileupload.style-file-multi .upload-object .info p.size {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 15%;
+  display: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.field-fileupload.style-file-multi .upload-object .progress-bar {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  height: 5px;
+  background-color: #f5f5f5;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 18px;
+  left: 0;
+}
+.field-fileupload.style-file-multi .upload-object .progress-bar .upload-progress {
+  float: left;
+  width: 0%;
+  height: 100%;
+  line-height: 5px;
+  color: #ffffff;
+  background-color: #5fb6f5;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.field-fileupload.style-file-multi .upload-object .meta {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-right: 15px;
+  width: 15%;
+}
+.field-fileupload.style-file-multi .upload-object .meta a.drag-handle {
+  top: 0;
+  bottom: auto;
+  line-height: 150%;
+  padding: 10px 0;
+}
+.field-fileupload.style-file-multi .upload-object .icon-container:after {
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  background-size: 20px 20px;
+}
+.field-fileupload.style-file-multi .upload-object.is-success .info p.size {
+  display: block;
+}
+.field-fileupload.style-file-multi .upload-object.upload-placeholder {
+  height: 35px;
+  background-color: transparent;
+}
+.field-fileupload.style-file-multi .upload-object.upload-placeholder:after {
+  opacity: 0;
+}
+.field-fileupload.style-file-multi .upload-object:hover {
+  background: #4da7e8 !important;
+}
+.field-fileupload.style-file-multi .upload-object:hover i,
+.field-fileupload.style-file-multi .upload-object:hover p.size {
+  color: #ecf0f1;
+}
+.field-fileupload.style-file-multi .upload-object:hover h4 {
+  color: white;
+}
+.field-fileupload.style-file-multi .upload-object:hover .icon-container {
+  border-right-color: #4da7e8 !important;
+}
+.field-fileupload.style-file-multi .upload-object:hover h4 {
+  padding-right: 35px;
+}
+@media (max-width: 1024px) {
+  .field-fileupload .upload-object h4 {
+    padding-right: 35px !important;
+  }
+  .field-fileupload .info {
+    margin-right: 25% !important;
+  }
+  .field-fileupload .info p.size {
+    width: 25% !important;
+    padding-right: 35px !important;
+  }
+  .field-fileupload .meta {
+    width: 25% !important;
+  }
+}

modules/backend/formwidgets/fileupload/assets/js/fileupload.js

@@ -199,7 +199,7 @@
         $(ev.target)
             .closest('.upload-remove-button')
             .one('ajaxPromise', function(){
-                $object.removeClass('is-success')
+                $object.addClass('is-loading')
             })
             .one('ajaxDone', function(){
                 $object.remove()

modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less

@@ -35,70 +35,66 @@
     }
 }
 
+.uploader-block-button() {
+    display: block;
+    float: left;
+    border: 2px dotted rgba(0,0,0,.1);
+    position: relative;
+    outline: none;
+    table {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+
+    table td {
+        line-height: 16px;
+        font-size: 11px;
+        vertical-align: middle;
+        height: 100%;
+
+        &:before {
+            text-align: center;
+            width: 100%;
+            display: block;
+            font-size: 22px;
+            color: rgba(0,0,0,.1);
+            vertical-align: middle;
+        }
+
+        span {
+            display: block;
+            padding: 10px;
+            text-align: center;
+        }
+    }
+
+    &:hover {
+        border: 2px dotted rgba(0,0,0,.2);
+
+        table td:before {
+            color: @brand-success;
+            color: rgba(0,0,0,.2);
+        }
+    }
+
+    &:focus {
+        border: 2px solid rgba(0,0,0,.3);
+        background: transparent;
+
+        table td:before {
+            color: @brand-success;
+            color: rgba(0,0,0,.2);
+        }
+    }
+}
+
 //
 // Shared
 //
 
 .field-fileupload {
 
-    //
-    // Upload button
-    //
-
-    .upload-button {
-        display: block;
-        float: left;
-        border: 2px dotted rgba(0,0,0,.1);
-        position: relative;
-        outline: none;
-        table {
-            position: absolute;
-            height: 100%;
-            width: 100%;
-        }
-
-        table td {
-            line-height: 16px;
-            font-size: 11px;
-            vertical-align: middle;
-            height: 100%;
-
-            &:before {
-                text-align: center;
-                width: 100%;
-                display: block;
-                font-size: 22px;
-                color: rgba(0,0,0,.1);
-                vertical-align: middle;
-            }
-
-            span {
-                display: block;
-                padding: 10px;
-                text-align: center;
-            }
-        }
-
-        &:hover {
-            border: 2px dotted rgba(0,0,0,.2);
-
-            table td:before {
-                color: @brand-success;
-                color: rgba(0,0,0,.2);
-            }
-        }
-
-        &:focus {
-            border: 2px solid rgba(0,0,0,.3);
-            background: transparent;
-
-            table td:before {
-                color: @brand-success;
-                color: rgba(0,0,0,.2);
-            }
-        }
-    }
-
     //
     // Uploaded item
     //
@@ -158,6 +154,7 @@
                 right: 0;
                 top: 0;
                 display: none;
+                font-weight: 400;
             }
         }
 
@@ -173,6 +170,7 @@
                 bottom: 0;
                 right: 0;
                 cursor: move;
+                display: block;
             }
         }
 
@@ -212,6 +210,9 @@
         }
 
         &.is-success {
+            .icon-container {
+                opacity: 1;
+            }
             .icon-container:after {
                 opacity: 0;
                 .transition(opacity .3s ease);
@@ -232,6 +233,16 @@
                 text-shadow: 2px 2px 0 #fff;
             }
         }
+
+        &.is-loading {
+            .icon-container {
+                opacity: .6;
+            }
+            .icon-container:after {
+                opacity: 1;
+                .transition(opacity .3s ease);
+            }
+        }
     }
 
     //
@@ -240,14 +251,16 @@
 
     .upload-object.is-success {
         cursor: pointer;
-        .icon-container {
-            opacity: 1;
-        }
 
         .progress-bar {
             opacity: 0;
             .transition(opacity .3s ease);
         }
+
+        &:hover {
+            h4 a { display: block; }
+            .meta .drag-handle { display: block; }
+        }
     }
 
     //
@@ -300,18 +313,9 @@
 // Media
 //
 
-body:not(.no-select) {
-    .field-fileupload {
-        .upload-object:hover {
-            h4 a { display: block; }
-            .meta .drag-handle { display: block; }
-        }
-    }
-}
-
 @media (max-width: 1024px) {
     .field-fileupload {
-        .upload-object {
+        .upload-object.is-success {
             h4 a { display: block !important; }
             .meta .drag-handle { display: block !important; }
         }

modules/backend/formwidgets/fileupload/assets/less/fileupload.filemulti.less

@@ -0,0 +1,165 @@
+//
+// Multi File
+//
+
+.field-fileupload.style-file-multi {
+    .upload-button {
+        margin-bottom: 10px;
+    }
+
+    .upload-files-container {
+        border: 1px solid @fileupload-list-border-color;
+        .border-radius(3px);
+        border-bottom: none;
+        display: none;
+    }
+
+    &.is-populated .upload-files-container {
+        display: block;
+    }
+
+    .upload-object {
+        display: block;
+        width: 100%;
+        //background-color: #fff;
+        border-bottom: 1px solid @fileupload-list-border-color;
+        padding-left: 10px;
+
+        &:nth-child(even) {
+            background-color: @fileupload-list-accent-bg;
+        }
+
+        .icon-container {
+            position: absolute;
+            top: 0;
+            left: 10px;
+            width: 15px;
+            padding: 11px 7px;
+
+            i {
+                line-height: 150%;
+                font-size: 15px;
+            }
+
+            img { display: none; }
+        }
+
+        .info {
+            margin-left: 35px;
+            margin-right: 15%;
+
+            h4, p {
+                margin: 0;
+                padding: 11px 0;
+                font-size: 12px;
+                font-weight: normal;
+                line-height: 150%;
+                color: #666666;
+            }
+
+            h4 {
+                padding-right: 15px;
+
+                a {
+                    padding: 10px 0;
+                    right: 15px;
+                }
+            }
+
+            p.size {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 15%;
+                display: none;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .progress-bar {
+            .uploader-progress-bar();
+            position: absolute;
+            top: 18px;
+            left: 0;
+        }
+
+        .meta {
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin-right: 15px;
+            width: 15%;
+
+            a.drag-handle {
+                top: 0;
+                bottom: auto;
+                line-height: 150%;
+                padding: 10px 0;
+            }
+        }
+
+        //
+        // Smaller Loader
+        //
+
+        .icon-container:after {
+            width: 20px;
+            height: 20px;
+            margin-top: -10px;
+            margin-left: -10px;
+            background-size: 20px 20px;
+        }
+
+        //
+        // Success
+        //
+
+        &.is-success {
+            .info p.size { display: block; }
+        }
+
+        //
+        // Sorting
+        //
+
+        &.upload-placeholder {
+            height: 35px;
+            background-color: transparent;
+            &:after { opacity: 0; }
+        }
+
+        //
+        // Hover
+        //
+        &:hover {
+            .uploader-object-active();
+            h4 { padding-right: 35px; }
+        }
+    }
+}
+
+//
+// Media
+//
+
+@media (max-width: 1024px) {
+    .field-fileupload {
+        .upload-object {
+            h4 { padding-right: 35px !important; }
+        }
+
+        .info {
+            margin-right: 25% !important;
+            p.size {
+                width: 25% !important;
+                padding-right: 35px !important;
+            }
+        }
+
+        .meta {
+            width: 25% !important;
+        }
+    }
+}

modules/backend/formwidgets/fileupload/assets/less/fileupload.filesingle.less

@@ -0,0 +1,6 @@
+//
+// Single File
+//
+
+.field-fileupload.style-file-single {
+}

modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less

@@ -9,6 +9,7 @@
     }
 
     .upload-button {
+        .uploader-block-button();
         width: 76px;
         height: 76px;
     }
@@ -38,6 +39,10 @@
             i {
                 font-size: 35px;
             }
+
+            &.image img {
+                .border-left-radius(3px);
+            }
         }
 
         .info {
@@ -68,6 +73,11 @@
             background-color: transparent;
             &:after { opacity: 0; }
         }
+
+        &:hover {
+            .uploader-object-active();
+            h4 { padding-right: 35px; }
+        }
     }
 }
 
@@ -75,15 +85,6 @@
 // Media
 //
 
-body:not(.no-select) {
-    .field-fileupload.style-image-multi {
-        .upload-object:hover {
-            .uploader-object-active();
-            h4 { padding-right: 35px !important; }
-        }
-    }
-}
-
 @media (max-width: 1280px) {
     .field-fileupload.style-image-multi {
         .upload-object {

modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less

@@ -9,10 +9,20 @@
         }
     }
 
+    .upload-button {
+        .uploader-block-button();
+    }
+
     .upload-object {
+        padding-bottom: 66px;
+
         .icon-container {
             border: 1px solid #f6f8f9;
             background: rgba(255,255,255,.5);
+
+            &.image img {
+                .border-radius(3px);
+            }
         }
 
         .progress-bar {
@@ -22,6 +32,14 @@
             left: 0;
         }
 
+        .info {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 66px;
+        }
+
         .meta {
             position: absolute;
             bottom: 65px;
@@ -30,7 +48,9 @@
             margin: 0 15px;
         }
 
+        &:hover {
+            h4 { padding-right: 20px; }
+        }
     }
 
-
 }

modules/backend/formwidgets/fileupload/assets/less/fileupload.less

@@ -1,11 +1,15 @@
 @import "../../../../assets/less/core/boot.less";
 
 @fileupload-progress-bar-height: 5px;
-@fileupload-progress-bar-color: #fff;
+@fileupload-progress-bar-color:  #fff;
-@fileupload-progress-bar-bg: #f5f5f5;
+@fileupload-progress-bar-bg:     #f5f5f5;
-@fileupload-inactive-icon: #808b93;
+@fileupload-inactive-icon:       #808b93;
-@fileupload-object-active-bg: #4da7e8;
+@fileupload-object-active-bg:    #4da7e8;
+@fileupload-list-accent-bg:      #f5f5f5;
+@fileupload-list-border-color:   #eeeeee;
 
 @import "fileupload.base.less";
 @import "fileupload.imagemulti.less";
 @import "fileupload.imagesingle.less";
+@import "fileupload.filemulti.less";
+@import "fileupload.filesingle.less";

modules/backend/formwidgets/fileupload/partials/_config_form.htm

@@ -2,14 +2,19 @@
     <input type="hidden" name="file_id" value="<?= $file->id ?>" />
 
     <div class="modal-header">
-        <!--<button type="button" class="close" data-dismiss="popup">&times;</button>-->
+        <?php if (starts_with($displayMode, 'image')): ?>
-        <a href="<?= $file->path ?>" target="_blank">
+            <!--<button type="button" class="close" data-dismiss="popup">&times;</button>-->
-            <img
+            <a href="<?= $file->path ?>" target="_blank">
-                src="<?= $file->path ?>"
+                <img
-                class="img-responsive center-block"
+                    src="<?= $file->path ?>"
-                alt=""
+                    class="img-responsive center-block"
-                title="<?= e(trans('backend::lang.fileupload.attachment')) ?>: <?= e($file->file_name) ?>" />
+                    alt=""
-        </a>
+                    title="<?= e(trans('backend::lang.fileupload.attachment')) ?>: <?= e($file->file_name) ?>" />
+            </a>
+        <?php else: ?>
+            <button type="button" class="close" data-dismiss="popup">&times;</button>
+            <h4 class="modal-title"><?= e(trans('backend::lang.fileupload.attachment')) ?>: <?= $file->file_name ?></h4>
+        <?php endif ?>
     </div>
     <div class="modal-body">
         <p><?= e(trans('backend::lang.fileupload.help')) ?></p>

modules/backend/formwidgets/fileupload/partials/_file_multi.htm

@@ -1,81 +1,70 @@
 <div
     id="<?= $this->getId() ?>"
-    class="field-fileupload is-multi <?= count($fileList) ? 'has-attachments' : '' ?> is-sortable"
+    class="field-fileupload style-file-multi is-sortable is-multi <?= count($fileList) ? 'is-populated' : '' ?>"
     data-control="fileupload"
-    data-unique-id="<?= $this->getId() ?>"
+    data-template="#<?= $this->getId('template') ?>"
+    data-error-template="#<?= $this->getId('errorTemplate') ?>"
     data-sort-handler="<?= $this->getEventHandler('onSortAttachments') ?>"
-    <?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
+    data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"
-    data-item-template="<?= $this->getId('template') ?>">
+    data-unique-id="<?= $this->getId() ?>"
+    <?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>>
 
-    <div class="file-multi">
+    <!-- Upload Button -->
+    <a href="javascript:;" class="btn btn-sm btn-primary oc-icon-upload upload-button">
+        Upload file
+    </a>
 
-        <ul>
+    <!-- Existing files -->
-            <!-- Add New File -->
+    <div class="upload-files-container">
-            <li class="attachment-item attachment-uploader">
+        <?php foreach ($fileList as $file): ?>
-                <a href="javascript:;" class="uploader-link no-attachment">
+            <div class="upload-object is-success" data-id="<?= $file->id ?>">
-                    <table><tr><td class="oc-<?= $emptyIcon ?>"></td></tr></table>
+                <div class="icon-container">
-                </a>
+                    <i class="icon-file"></i>
-
-                <div class="uploader-progress">
-                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                 </div>
-                <div class="uploader-loading"></div>
+                <div class="info">
-            </li>
+                    <h4 class="filename">
-        </ul>
+                        <span data-dz-name><?= $file->title ?: $file->disk_name ?></span>
-
-    </div>
-
-    <!-- Populated File -->
-    <script type="text/template" id="<?= $this->getId('template') ?>">
-        <li>
-            <div
-                class="attachment-item"
-                data-attachment-id="{{id}}">
-                <a href="{{path}}" target="_blank" class="active-file">
-                    <span class="file-icon">
-                        <i class="icon-file"></i>
-                        <b class="file-extension">{{extension}}</b>
-                    </span>
-                    <span class="caption">{{file_name}}</span>
-                </a>
-                <div class="uploader-toolbar">
-                    <h3>
-                        <abbr title="{{#title}}{{title}}{{/title}}{{^title}}{{file_name}}{{/title}}">
-                            {{#title}}{{title}}{{/title}}{{^title}}{{file_name}}{{/title}}
-                        </abbr>
-                    </h3>
-                    {{#description}}
-                        <p><abbr title="{{description}}">{{description}}</abbr></p>
-                    {{/description}}
-
-                    <?php if (!$this->previewMode): ?>
                         <a
                             href="javascript:;"
-                            class="uploader-remove oc-icon-times"
+                            class="upload-remove-button"
                             data-request="<?= $this->getEventHandler('onRemoveAttachment') ?>"
-                            data-request-data="file_id: {{id}}"></a>
+                            data-request-confirm="Are you sure?"
-                    <?php endif ?>
+                            data-request-data="file_id: <?= $file->id ?>"
-
+                            ><i class="icon-times"></i></a>
-                    <div class="controls">
+                    </h4>
-                        <?php if (!$this->previewMode): ?>
+                    <p class="size"><?= e($file->sizeToString()) ?></p>
-                            <a
+                </div>
-                                href="javascript:;"
+                <div class="meta">
-                                class="uploader-config oc-icon-cog"
+                    <a href="javascript:;" class="drag-handle"><i class="icon-bars"></i></a>
-                                data-control="popup"
-                                data-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"
-                                data-request-data="file_id: {{id}}"></a>
-                        <?php endif ?>
-                        <a
-                            href="{{path}}"
-                            class="uploader-file-link oc-icon-paperclip"
-                            target="_blank"></a>
-                    </div>
                 </div>
-                <div class="uploader-loading"></div>
             </div>
-        </li>
+        <?php endforeach ?>
-    </script>
+    </div>
-
-    <!-- Existing images -->
-    <script> $('#<?= $this->getId() ?>').data('populatedData', <?= $fileList ?>); </script>
 </div>
+
+<!-- Template for new files -->
+<script type="text/template" id="<?= $this->getId('template') ?>">
+    <div class="upload-object dz-preview dz-file-preview">
+        <div class="icon-container">
+            <i class="icon-file"></i>
+            <img data-dz-thumbnail />
+        </div>
+        <div class="info">
+            <h4 class="filename">
+                <span data-dz-name></span>
+                <a
+                    href="javascript:;"
+                    class="upload-remove-button"
+                    data-request="<?= $this->getEventHandler('onRemoveAttachment') ?>"
+                    data-request-confirm="Are you sure?"
+                    ><i class="icon-times"></i></a>
+            </h4>
+            <p class="size" data-dz-size></p>
+        </div>
+        <div class="meta">
+            <a href="javascript:;" class="drag-handle"><i class="icon-bars"></i></a>
+            <div class="progress-bar"><span class="upload-progress" data-dz-uploadprogress></span></div>
+            <div class="error-message"><span data-dz-errormessage></span></div>
+        </div>
+    </div>
+</script>

modules/backend/formwidgets/fileupload/partials/_image_multi.htm

@@ -1,6 +1,6 @@
 <div
     id="<?= $this->getId() ?>"
-    class="field-fileupload style-image-multi is-sortable is-multi"
+    class="field-fileupload style-image-multi is-sortable is-multi <?= count($fileList) ? 'is-populated' : '' ?>"
     data-control="fileupload"
     data-template="#<?= $this->getId('template') ?>"
     data-error-template="#<?= $this->getId('errorTemplate') ?>"