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

Finish single file uploader 

FileUpload now supports:
- optional 'useCaption' flag
- imageWidth and imageHeight are now optional
- default file uploader uses default file types
This commit is contained in:
Samuel Georges 2015-06-10 22:13:24 +10:00
parent ffc91879e7
commit 6420027a6a
14 changed files with 580 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -1,7 +1,8 @@
* **Build 26x** (2015-06-xx)
- Improved the back-end administrator permissions UI.
- Introduced the October Storm client-side library.
- Improved the back-end administrator permissions and `RelationController` UI.
- The page setting `hidden` has been renamed to `is_hidden`, this setting may need to be reapplied for some themes.
- FileUpload widget has been rebuilt from scratch, it now uses an interface similar to the Media Manager.
- `FileUpload` form widget has been rebuilt from scratch, it now uses an interface similar to the Media Manager (see Backend > Forms docs).
* **Build 260** (2015-05-16)
- The `|page` filter now supports passing an empty string to generate a link to the current page.

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

@ -12,13 +12,6 @@ use Backend\Classes\FormWidgetBase;
use ValidationException;
use Exception;
/*
Requirements for this new uploader
- Fluid single image
- Prevent uploading of PHP files, etc
- Avatar mode
*/
/**
* File upload field
@ -41,12 +34,12 @@ class FileUpload extends FormWidgetBase
/**
* @var int Preview image width
*/
public $imageWidth = 100;
public $imageWidth = null;
/**
* @var int Preview image height
*/
public $imageHeight = 100;
public $imageHeight = null;
/**
* @var string Text to display when no file is associated
@ -66,6 +59,11 @@ class FileUpload extends FormWidgetBase
'extension' => 'auto'
];
/**
* @var boolean Allow the user to set a caption.
*/
public $useCaption = true;
//
// Object properties
//
@ -85,7 +83,8 @@ class FileUpload extends FormWidgetBase
'imageHeight',
'previewNoFilesMessage',
'fileTypes',
'thumbOptions'
'thumbOptions',
'useCaption'
]);
$this->checkUploadPostback();
@ -113,6 +112,7 @@ class FileUpload extends FormWidgetBase
$this->vars['imageWidth'] = $this->imageWidth;
$this->vars['acceptedFileTypes'] = $this->getAcceptedFileTypes(true);
$this->vars['cssDimensions'] = $this->getCssDimensions();
$this->vars['useCaption'] = $this->useCaption;
}
protected function getFileList()
@ -180,11 +180,13 @@ class FileUpload extends FormWidgetBase
public function getAcceptedFileTypes($includeDot = false)
{
$types = $this->fileTypes;
if ($types === false && starts_with($this->getDisplayMode(), 'image')) {
$types = 'jpg,jpeg,bmp,png,gif,svg';
if ($types === false) {
$isImage = starts_with($this->getDisplayMode(), 'image');
$types = implode(',', File::getDefaultFileTypes($isImage));
}
if (!$types) {
if (!$types || $types == '*') {
return null;
}
@ -273,6 +275,7 @@ class FileUpload extends FormWidgetBase
$this->vars['file'] = $file;
$this->vars['displayMode'] = $this->getDisplayMode();
$this->vars['cssDimensions'] = $this->getCssDimensions();
return $this->makePartial('config_form');
}
@ -364,7 +367,12 @@ class FileUpload extends FormWidgetBase
$file = $this->decorateFileAttributes($file);
$result = ['id' => $file->id, 'thumb' => $file->thumb];
$result = [
'id' => $file->id,
'thumb' => $file->thumb,
'path' => $file->path
];
Response::json($result, 200)->send();
}
@ -381,7 +389,9 @@ class FileUpload extends FormWidgetBase
*/
protected function decorateFileAttributes($file)
{
$file->thumb = $file->getThumb($this->imageWidth, $this->imageHeight, $this->thumbOptions);
$file->thumb = ($this->imageWidth || $this->imageHeight)
? $file->getThumb($this->imageWidth, $this->imageHeight, $this->thumbOptions)
: $file->path;
// Internal download link
if (!$file->isImage() || !$file->isPublic()) {

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

@ -64,6 +64,7 @@
display: block;
}
.field-fileupload .upload-object .info h4 a,
.field-fileupload .upload-object .meta a.upload-remove-button,
.field-fileupload .upload-object .meta a.drag-handle {
color: #2b3e50;
display: none;
@ -111,7 +112,7 @@
animation: none;
font-size: 40px;
color: #ab2a1c;
margin-top: -30px;
margin-top: -20px;
margin-left: -20px;
text-shadow: 2px 2px 0 #fff;
}
@ -131,9 +132,8 @@
-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 h4 a,
.field-fileupload .upload-object.is-success:hover .meta .upload-remove-button,
.field-fileupload .upload-object.is-success:hover .meta .drag-handle {
display: block;
}
@ -141,6 +141,10 @@
cursor: pointer;
}
.field-fileupload .upload-object.is-error .icon-container {
opacity: 1;
}
.field-fileupload .upload-object.is-error .icon-container > img,
.field-fileupload .upload-object.is-error .icon-container > i {
opacity: .5;
}
.field-fileupload .upload-object.is-error .info h4 {
@ -169,13 +173,40 @@
display: none;
}
@media (max-width: 1024px) {
.field-fileupload .upload-object.is-success h4 a {
display: block !important;
}
.field-fileupload .upload-object.is-success h4 a,
.field-fileupload .upload-object.is-success .meta .upload-remove-button,
.field-fileupload .upload-object.is-success .meta .drag-handle {
display: block !important;
}
}
.fileupload-config-form .fileupload-url-button {
padding-left: 0;
}
.fileupload-config-form .fileupload-url-button > i {
color: #666;
}
.fileupload-config-form .file-upload-modal-image-header {
background-color: #FEFEFE;
background-image: -webkit-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -webkit-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
background-image: -moz-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -moz-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
background-image: -o-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -o-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
background-image: -ms-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -ms-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
.fileupload-config-form .file-upload-modal-image-header,
.fileupload-config-form .file-upload-modal-image-header img {
border-top-right-radius: 2px;
border-top-left-radius: 2px;
}
.fileupload-config-form .file-upload-modal-image-header .close {
position: absolute;
top: 20px;
right: 20px;
}
.field-fileupload.style-image-multi .upload-button,
.field-fileupload.style-image-multi .upload-object {
margin: 0 10px 10px 0;
@ -264,6 +295,8 @@
.field-fileupload.style-image-multi .upload-object .icon-container {
border-right: 1px solid #f6f8f9;
float: left;
display: inline-block;
overflow: hidden;
width: 75px;
height: 75px;
}
@ -273,6 +306,7 @@
.field-fileupload.style-image-multi .upload-object .icon-container.image img {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
width: auto;
}
.field-fileupload.style-image-multi .upload-object .info {
margin-left: 90px;
@ -383,6 +417,11 @@
color: #5cb85c;
color: rgba(0, 0, 0, 0.2);
}
.field-fileupload.style-image-single .upload-button,
.field-fileupload.style-image-single .upload-button > table {
min-height: 100px;
min-width: 100px;
}
.field-fileupload.style-image-single .upload-object {
padding-bottom: 66px;
}
@ -394,6 +433,9 @@
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: block;
max-width: 100%;
height: auto;
}
.field-fileupload.style-image-single .upload-object .progress-bar {
display: block;
@ -437,6 +479,11 @@
.field-fileupload.style-image-single .upload-object:hover h4 {
padding-right: 20px;
}
@media (max-width: 1024px) {
.field-fileupload.style-image-single .upload-object h4 {
padding-right: 20px !important;
}
}
.field-fileupload.style-file-multi .upload-button {
margin-bottom: 10px;
}
@ -549,6 +596,9 @@
margin-left: -10px;
background-size: 20px 20px;
}
.field-fileupload.style-file-multi .upload-object.is-error .icon-container:after {
font-size: 20px;
}
.field-fileupload.style-file-multi .upload-object.is-success .info p.size {
display: block;
}
@ -576,17 +626,141 @@
padding-right: 35px;
}
@media (max-width: 1024px) {
.field-fileupload .upload-object h4 {
.field-fileupload.style-file-multi .upload-object h4 {
padding-right: 35px !important;
}
.field-fileupload .info {
.field-fileupload.style-file-multi .info {
margin-right: 25% !important;
}
.field-fileupload .info p.size {
.field-fileupload.style-file-multi .info p.size {
width: 25% !important;
padding-right: 35px !important;
}
.field-fileupload .meta {
.field-fileupload.style-file-multi .meta {
width: 25% !important;
}
}
.field-fileupload.style-file-single {
background-color: #ffffff;
border: 1px solid #e0e0e0;
overflow: hidden;
position: relative;
padding-right: 30px;
}
.field-fileupload.style-file-single .upload-button {
position: absolute;
top: 50%;
margin-top: -44px;
height: 88px;
background: transparent;
right: -2px;
color: #595959;
}
.field-fileupload.style-file-single .upload-button i {
font-size: 14px;
}
.field-fileupload.style-file-single .upload-button:hover {
color: #333333;
}
.field-fileupload.style-file-single .upload-empty-message {
padding: 10px 0 10px 11px;
font-size: 13px;
}
.field-fileupload.style-file-single.is-populated .upload-empty-message {
display: none;
}
.field-fileupload.style-file-single .upload-object {
display: block;
width: 100%;
padding: 8px 0 10px 0;
}
.field-fileupload.style-file-single .upload-object .icon-container {
position: absolute;
top: 0;
left: 0;
width: 15px;
padding: 0 5px;
margin: 8px 0 0 7px;
text-align: center;
}
.field-fileupload.style-file-single .upload-object .icon-container i {
line-height: 150%;
font-size: 15px;
}
.field-fileupload.style-file-single .upload-object .icon-container img {
display: none;
}
.field-fileupload.style-file-single .upload-object .info {
margin-left: 34px;
margin-right: 15%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.field-fileupload.style-file-single .upload-object .info h4,
.field-fileupload.style-file-single .upload-object .info p {
display: inline;
margin: 0;
padding: 0;
font-size: 12px;
line-height: 150%;
color: #666666;
}
.field-fileupload.style-file-single .upload-object .info p.size {
font-weight: normal;
}
.field-fileupload.style-file-single .upload-object .info p.size:before {
content: " - ";
}
.field-fileupload.style-file-single .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: 50%;
margin-top: -2px;
right: 5px;
}
.field-fileupload.style-file-single .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-single .upload-object .meta {
position: absolute;
top: 50%;
margin-top: -44px;
height: 88px;
right: 0;
width: 15%;
}
.field-fileupload.style-file-single .upload-object .meta .upload-remove-button {
position: absolute;
top: 50%;
right: 0;
height: 20px;
margin-top: -10px;
margin-right: 10px;
}
.field-fileupload.style-file-single .upload-object .icon-container:after {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
background-size: 20px 20px;
}
.field-fileupload.style-file-single .upload-object.is-error .icon-container:after {
font-size: 20px;
}

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

@ -99,18 +99,26 @@
}
this.dropzone = new Dropzone(this.$el.get(0), this.uploaderOptions)
this.dropzone.on('error', this.proxy(this.onUploadFail))
this.dropzone.on('success', this.proxy(this.onUploadComplete))
this.dropzone.on('addedfile', this.proxy(this.onUploadAddedFile))
this.dropzone.on('sending', this.proxy(this.onUploadSending))
this.dropzone.on('addedfile', this.proxy(this.evalIsPopulated))
this.dropzone.on('success', this.proxy(this.onUploadSuccess))
this.dropzone.on('error', this.proxy(this.onUploadError))
}
FileUpload.prototype.onUploadFail = function(file, error) {
var $preview = $(file.previewElement)
$preview.addClass('is-error')
FileUpload.prototype.onUploadAddedFile = function(file) {
// Remove any exisiting objects for single variety
if (!this.options.isMulti) {
$('> *', this.$filesContainer).not(file.previewElement).remove()
}
FileUpload.prototype.onUploadComplete = function(file, response) {
this.evalIsPopulated()
}
FileUpload.prototype.onUploadSending = function(file, xhr, formData) {
this.addExtraFormData(formData)
}
FileUpload.prototype.onUploadSuccess = function(file, response) {
var $preview = $(file.previewElement),
$img = $('.image img', $preview)
@ -118,13 +126,15 @@
if (response.id) {
$preview.data('id', response.id)
$preview.data('path', response.path)
$('.upload-remove-button', $preview).data('request-data', { file_id: response.id })
$img.attr('src', response.thumb)
}
}
FileUpload.prototype.onUploadSending = function(file, xhr, formData) {
this.addExtraFormData(formData)
FileUpload.prototype.onUploadError = function(file, error) {
var $preview = $(file.previewElement)
$preview.addClass('is-error')
}
FileUpload.prototype.addExtraFormData = function(formData) {
@ -213,6 +223,11 @@
FileUpload.prototype.onClickSuccessObject = function(ev) {
var $target = $(ev.target).closest('.upload-object')
if (!this.options.configHandler) {
window.open($target.data('path'))
return
}
$target.popup({
handler: this.options.configHandler,
extraData: { file_id: $target.data('id') }
@ -257,7 +272,13 @@
//
FileUpload.prototype.evalIsPopulated = function() {
this.$el.toggleClass('is-populated', !!$('.upload-object', this.$filesContainer).length)
var isPopulated = !!$('.upload-object', this.$filesContainer).length
this.$el.toggleClass('is-populated', isPopulated)
// Reset maxFiles counter
if (!isPopulated) {
this.dropzone.removeAllFiles()
}
}
FileUpload.DEFAULTS = {

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

@ -89,6 +89,21 @@
}
}
.uploader-small-loader() {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
background-size: 20px 20px;
}
.uploader-vertical-align() {
position: absolute;
top: 50%;
margin-top: -44px;
height: 88px;
}
//
// Shared
//
@ -175,6 +190,7 @@
}
.info h4 a,
.meta a.upload-remove-button,
.meta a.drag-handle {
color: #2b3e50;
display: none;
@ -228,7 +244,7 @@
.animation(none);
font-size: 40px;
color: #ab2a1c;
margin-top: -30px;
margin-top: -20px;
margin-left: -20px;
text-shadow: 2px 2px 0 #fff;
}
@ -258,7 +274,8 @@
}
&:hover {
h4 a { display: block; }
h4 a,
.meta .upload-remove-button,
.meta .drag-handle { display: block; }
}
}
@ -271,8 +288,11 @@
cursor: pointer;
.icon-container {
opacity: 1;
> img, > i {
opacity: .5;
}
}
.info h4 {
color: #ab2a1c;
@ -316,8 +336,52 @@
@media (max-width: 1024px) {
.field-fileupload {
.upload-object.is-success {
h4 a { display: block !important; }
h4 a,
.meta .upload-remove-button,
.meta .drag-handle { display: block !important; }
}
}
}
//
// Config form
//
.fileupload-config-form {
.fileupload-url-button{
padding-left: 0;
> i {
color: #666;
}
}
.file-upload-modal-image-header {
// Alternative color if below doesn't look nice
//background-color: #5a6060;
// Photoshop transparent background
// Based on: http://lea.verou.me/css3patterns/#checkerboard
background-color: #FEFEFE;
background-image: -webkit-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -webkit-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
background-image: -moz-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -moz-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
background-image: -o-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -o-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
background-image: -ms-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -ms-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
background-image: linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
&, img {
.border-top-radius(2px);
}
.close {
position: absolute;
top: 20px;
right: 20px;
}
}
}

18
modules/backend/formwidgets/fileupload/assets/less/fileupload.filemulti.less
View File

@ -21,7 +21,6 @@
.upload-object {
display: block;
width: 100%;
//background-color: #fff;
border-bottom: 1px solid @fileupload-list-border-color;
padding-left: 10px;
@ -100,16 +99,12 @@
}
}
//
// Smaller Loader
//
.icon-container:after {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
background-size: 20px 20px;
.uploader-small-loader();
}
&.is-error .icon-container:after {
font-size: 20px;
}
//
@ -133,6 +128,7 @@
//
// Hover
//
&:hover {
.uploader-object-active();
h4 { padding-right: 35px; }
@ -145,7 +141,7 @@
//
@media (max-width: 1024px) {
.field-fileupload {
.field-fileupload.style-file-multi {
.upload-object {
h4 { padding-right: 35px !important; }
}

111
modules/backend/formwidgets/fileupload/assets/less/fileupload.filesingle.less
View File

@ -3,4 +3,115 @@
//
.field-fileupload.style-file-single {
background-color: @color-form-field-bg;
border: 1px solid @color-form-field-border;
overflow: hidden;
position: relative;
padding-right: 30px;
.upload-button {
.uploader-vertical-align();
background: transparent;
right: -2px;
color: lighten(@color-form-field-recordfinder-btn, 15%);
i {
font-size: 14px;
}
&:hover {
color: @color-form-field-recordfinder-btn;
}
}
.upload-empty-message {
padding: 10px 0 10px 11px;
font-size: 13px;
}
&.is-populated {
.upload-empty-message {
display: none;
}
}
.upload-object {
display: block;
width: 100%;
padding: 8px 0 10px 0;
.icon-container {
position: absolute;
top: 0;
left: 0;
width: 15px;
padding: 0 5px;
margin: 8px 0 0 7px;
text-align: center;
i {
line-height: 150%;
font-size: 15px;
}
img { display: none; }
}
.info {
margin-left: 34px;
margin-right: 15%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
h4, p {
display: inline;
margin: 0;
padding: 0;
font-size: 12px;
line-height: 150%;
color: #666666;
}
p.size {
font-weight: normal;
&:before {
content: " - ";
}
}
}
.progress-bar {
.uploader-progress-bar();
position: absolute;
top: 50%;
margin-top: -2px;
right: 5px;
}
.meta {
.uploader-vertical-align();
right: 0;
width: 15%;
.upload-remove-button {
position: absolute;
top: 50%;
right: 0;
height: 20px;
margin-top: -10px;
margin-right: 10px;
}
}
.icon-container:after {
.uploader-small-loader();
}
&.is-error .icon-container:after {
font-size: 20px;
}
}
}

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

@ -33,6 +33,8 @@
.icon-container {
border-right: 1px solid #f6f8f9;
float: left;
display: inline-block;
overflow: hidden;
width: 75px;
height: 75px;
@ -42,6 +44,7 @@
&.image img {
.border-left-radius(3px);
width: auto;
}
}

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

@ -11,6 +11,10 @@
.upload-button {
.uploader-block-button();
&, > table {
min-height: 100px;
min-width: 100px;
}
}
.upload-object {
@ -22,6 +26,7 @@
&.image img {
.border-radius(3px);
.img-responsive();
}
}
@ -54,3 +59,16 @@
}
}
//
// Media
//
@media (max-width: 1024px) {
.field-fileupload.style-image-single {
.upload-object {
h4 { padding-right: 20px !important; }
}
}
}

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

@ -1,21 +1,23 @@
<div class="fileupload-config-form">
<?= Form::open() ?>
<input type="hidden" name="file_id" value="<?= $file->id ?>" />
<div class="modal-header">
<?php if (starts_with($displayMode, 'image')): ?>
<!--<button type="button" class="close" data-dismiss="popup">&times;</button>-->
<a href="<?= $file->path ?>" target="_blank">
<div class="file-upload-modal-image-header">
<button type="button" class="close" data-dismiss="popup">&times;</button>
<img
src="<?= $file->path ?>"
src="<?= $file->thumb ?>"
class="img-responsive center-block"
alt=""
title="<?= e(trans('backend::lang.fileupload.attachment')) ?>: <?= e($file->file_name) ?>" />
</a>
title="<?= e(trans('backend::lang.fileupload.attachment')) ?>: <?= e($file->file_name) ?>"
style="<?= $cssDimensions ?>" />
</div>
<?php else: ?>
<div class="modal-header">
<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>
<?php endif ?>
<div class="modal-body">
<p><?= e(trans('backend::lang.fileupload.help')) ?></p>
@ -37,6 +39,9 @@
</div>
<div class="modal-footer">
<a href="<?= $file->path ?>" class="pull-left btn btn-link fileupload-url-button" target="_blank">
<i class="oc-icon-link"></i>Attachment URL
</a>
<button
type="submit"
class="btn btn-primary"
@ -52,3 +57,4 @@
</button>
</div>
<?= Form::close() ?>
</div>

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

@ -5,25 +5,26 @@
data-template="#<?= $this->getId('template') ?>"
data-error-template="#<?= $this->getId('errorTemplate') ?>"
data-sort-handler="<?= $this->getEventHandler('onSortAttachments') ?>"
data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"
data-unique-id="<?= $this->getId() ?>"
<?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>>
<?php if ($useCaption): ?>data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"<?php endif ?>
<?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
>
<!-- Upload Button -->
<a href="javascript:;" class="btn btn-sm btn-primary oc-icon-upload upload-button">
<button type="button" class="btn btn-sm btn-primary oc-icon-upload upload-button">
Upload file
</a>
</button>
<!-- Existing files -->
<div class="upload-files-container">
<?php foreach ($fileList as $file): ?>
<div class="upload-object is-success" data-id="<?= $file->id ?>">
<div class="upload-object is-success" data-id="<?= $file->id ?>" data-path="<?= $file->path ?>">
<div class="icon-container">
<i class="icon-file"></i>
</div>
<div class="info">
<h4 class="filename">
<span data-dz-name><?= $file->title ?: $file->disk_name ?></span>
<span data-dz-name><?= $file->title ?: $file->file_name ?></span>
<a
href="javascript:;"
class="upload-remove-button"

112
modules/backend/formwidgets/fileupload/partials/_file_single.htm
View File

@ -1,74 +1,74 @@
<div
id="<?= $this->getId() ?>"
class="field-fileupload <?= $singleFile ? 'has-attachments' : '' ?>"
class="field-fileupload style-file-single <?= $singleFile ? 'is-populated' : '' ?>"
data-control="fileupload"
data-template="#<?= $this->getId('template') ?>"
data-error-template="#<?= $this->getId('errorTemplate') ?>"
data-unique-id="<?= $this->getId() ?>"
<?php if ($useCaption): ?>data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"<?php endif ?>
<?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
data-item-template="<?= $this->getId('template') ?>">
>
<div class="file-single attachment-item" data-attachment-id="<?= $singleFile ? $singleFile->id : '' ?>">
<!-- Add New Image -->
<a
href="javascript:;"
class="uploader-link no-attachment"
<?php if ($singleFile): ?>style="display:none"<?php endif ?>>
<table><tr><td class="oc-<?= $emptyIcon ?>"></td></tr></table>
</a>
<!-- Upload Button -->
<button type="button" class="btn btn-default upload-button">
<i class="icon-upload"></i>
</button>
<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>
<!-- Populated File -->
<script type="text/template" id="<?= $this->getId('template') ?>">
<a href="{{path}}" target="_blank" class="active-file">
<span class="file-icon">
<!-- Existing file -->
<div class="upload-files-container">
<?php if ($singleFile): ?>
<div class="upload-object is-success" data-id="<?= $singleFile->id ?>" data-path="<?= $singleFile->path ?>">
<div class="icon-container">
<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>
<div class="info">
<h4 class="filename">
<span data-dz-name><?= $singleFile->title ?: $singleFile->file_name ?></span>
</h4>
<p class="size"><?= e($singleFile->sizeToString()) ?></p>
</div>
<div class="meta">
<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?"
data-request-data="file_id: <?= $singleFile->id ?>"
><i class="icon-times"></i></a>
</div>
</div>
<?php endif ?>
</div>
<div class="controls">
<?php if (!$this->previewMode): ?>
<!-- Empty message -->
<div class="upload-empty-message">
<span class="text-muted">Click the <i class="icon-upload"></i> or drag a file here to upload</span>
</div>
</div>
<!-- Template for new file -->
<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>
</h4>
<p class="size" data-dz-size></p>
</div>
<div class="meta">
<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>
class="upload-remove-button"
data-request="<?= $this->getEventHandler('onRemoveAttachment') ?>"
data-request-confirm="Are you sure?"
><i class="icon-times"></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>
<!-- Existing images -->
<script> $('#<?= $this->getId() ?>').data('populatedData', <?= $fileList ?>); </script>
</div>

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

@ -5,9 +5,10 @@
data-template="#<?= $this->getId('template') ?>"
data-error-template="#<?= $this->getId('errorTemplate') ?>"
data-sort-handler="<?= $this->getEventHandler('onSortAttachments') ?>"
data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"
data-unique-id="<?= $this->getId() ?>"
<?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>>
<?php if ($useCaption): ?>data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"<?php endif ?>
<?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
>
<!-- Upload Button -->
<a href="javascript:;" class="upload-button">
@ -17,13 +18,13 @@
<!-- Existing files -->
<div class="upload-files-container">
<?php foreach ($fileList as $file): ?>
<div class="upload-object is-success" data-id="<?= $file->id ?>">
<div class="upload-object is-success" data-id="<?= $file->id ?>" data-path="<?= $file->path ?>">
<div class="icon-container image">
<img src="<?= $file->thumb ?>" />
</div>
<div class="info">
<h4 class="filename">
<span data-dz-name><?= $file->title ?: $file->disk_name ?></span>
<span data-dz-name><?= $file->title ?: $file->file_name ?></span>
<a
href="javascript:;"
class="upload-remove-button"

9
modules/backend/formwidgets/fileupload/partials/_image_single.htm
View File

@ -4,9 +4,10 @@
data-control="fileupload"
data-template="#<?= $this->getId('template') ?>"
data-error-template="#<?= $this->getId('errorTemplate') ?>"
data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"
data-unique-id="<?= $this->getId() ?>"
<?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>>
<?php if ($useCaption): ?>data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"<?php endif ?>
<?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
>
<!-- Add New Image -->
<a
@ -19,13 +20,13 @@
<!-- Existing file -->
<div class="upload-files-container">
<?php if ($singleFile): ?>
<div class="upload-object is-success" data-id="<?= $singleFile->id ?>">
<div class="upload-object is-success" data-id="<?= $singleFile->id ?>" data-path="<?= $singleFile->path ?>">
<div class="icon-container image">
<img src="<?= $singleFile->thumb ?>" />
</div>
<div class="info">
<h4 class="filename">
<span data-dz-name><?= $singleFile->title ?: $singleFile->disk_name ?></span>
<span data-dz-name><?= $singleFile->title ?: $singleFile->file_name ?></span>
<a
href="javascript:;"
class="upload-remove-button"