TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish rebuilding multi file uploader 

Create stub for single file uploader
This commit is contained in:
Samuel Georges 2015-06-09 18:51:35 +10:00
parent 0a5e6adad1
commit f95af91ef1
12 changed files with 654 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/backend/formwidgets/FileUpload.php
View File

@ -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');
}

357
modules/backend/formwidgets/fileupload/assets/css/fileupload.css
View File

@ -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,
body:not(.no-select) .field-fileupload.style-image-multi .upload-object:hover p.size {
.field-fileupload.style-image-multi .upload-object:hover i,
.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 {
padding-right: 35px !important;
.field-fileupload.style-image-multi .upload-object:hover h4 {
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;
}
}

2
modules/backend/formwidgets/fileupload/assets/js/fileupload.js
View File

@ -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()

146
modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less
View File

@ -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; }
}

165
modules/backend/formwidgets/fileupload/assets/less/fileupload.filemulti.less Normal file
View File

@ -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;
}
}
}

6
modules/backend/formwidgets/fileupload/assets/less/fileupload.filesingle.less Normal file
View File

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

19
modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less
View File

@ -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 {

24
modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less
View File

@ -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; }
}
}
}
}

12
modules/backend/formwidgets/fileupload/assets/less/fileupload.less
View File

@ -1,11 +1,15 @@
@import "../../../../assets/less/core/boot.less";
@fileupload-progress-bar-height: 5px;
@fileupload-progress-bar-color: #fff;
@fileupload-progress-bar-bg: #f5f5f5;
@fileupload-inactive-icon: #808b93;
@fileupload-object-active-bg: #4da7e8;
@fileupload-progress-bar-color: #fff;
@fileupload-progress-bar-bg: #f5f5f5;
@fileupload-inactive-icon: #808b93;
@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";

21
modules/backend/formwidgets/fileupload/partials/_config_form.htm
View File

@ -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>-->
<a href="<?= $file->path ?>" target="_blank">
<img
src="<?= $file->path ?>"
class="img-responsive center-block"
alt=""
title="<?= e(trans('backend::lang.fileupload.attachment')) ?>: <?= e($file->file_name) ?>" />
</a>
<?php if (starts_with($displayMode, 'image')): ?>
<!--<button type="button" class="close" data-dismiss="popup">&times;</button>-->
<a href="<?= $file->path ?>" target="_blank">
<img
src="<?= $file->path ?>"
class="img-responsive center-block"
alt=""
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>

125
modules/backend/formwidgets/fileupload/partials/_file_multi.htm
View File

@ -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-item-template="<?= $this->getId('template') ?>">
data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"
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>
<!-- Add New File -->
<li class="attachment-item attachment-uploader">
<a href="javascript:;" class="uploader-link no-attachment">
<table><tr><td class="oc-<?= $emptyIcon ?>"></td></tr></table>
</a>
<div class="uploader-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<!-- Existing files -->
<div class="upload-files-container">
<?php foreach ($fileList as $file): ?>
<div class="upload-object is-success" data-id="<?= $file->id ?>">
<div class="icon-container">
<i class="icon-file"></i>
</div>
<div class="uploader-loading"></div>
</li>
</ul>
</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): ?>
<div class="info">
<h4 class="filename">
<span data-dz-name><?= $file->title ?: $file->disk_name ?></span>
<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>
<?php endif ?>
<div class="controls">
<?php if (!$this->previewMode): ?>
<a
href="javascript:;"
class="uploader-config oc-icon-cog"
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>
data-request-confirm="Are you sure?"
data-request-data="file_id: <?= $file->id ?>"
><i class="icon-times"></i></a>
</h4>
<p class="size"><?= e($file->sizeToString()) ?></p>
</div>
<div class="meta">
<a href="javascript:;" class="drag-handle"><i class="icon-bars"></i></a>
</div>
<div class="uploader-loading"></div>
</div>
</li>
</script>
<!-- Existing images -->
<script> $('#<?= $this->getId() ?>').data('populatedData', <?= $fileList ?>); </script>
<?php endforeach ?>
</div>
</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>

2
modules/backend/formwidgets/fileupload/partials/_image_multi.htm
View File

@ -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') ?>"