winix/winixd/html/fun_upload.html

244 lines
9.3 KiB
HTML

[if winix_function_param_is "ckeditor_upload"]
<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction([upload_ckeditor_funnum], '[item.link]');</script>
[end]
[if any_not [winix_function_param_is "ckeditor_upload"] [winix_function_param_is "jquery_upload"]]
<div class="winix">
<h1>{upload_header}</h1>
[# the code below are copied from common/fileupload/jquery-ui.html]
[# The file upload form used as target for the file upload widget]
<form id="fileupload" action="[doc_base_url][dir]/upload" method="POST" enctype="multipart/form-data">
[if false]
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
[end]
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>{upload_button_add_files}</span>
<input type="file" name="files\[\]" multiple />
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>{upload_button_start_upload}</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>{upload_button_cancel_upload}</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>{upload_button_delete}</span>
</button>
[# to the checkbox added form-check-input class and style element]
<input type="checkbox" class="toggle form-check-input" style="transform: none;">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div
class="progress progress-striped active"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
>
<div
class="progress-bar progress-bar-success"
style="width: 0%;"
></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped">
<tbody class="files"></tbody>
</table>
</form>
[# The blueimp Gallery widget]
<div
id="blueimp-gallery"
class="blueimp-gallery blueimp-gallery-controls"
aria-label="image gallery"
aria-modal="true"
role="dialog"
data-filter=":even"
>
<div class="slides" aria-live="polite"></div>
<h3 class="title"></h3>
<a
class="prev"
aria-controls="blueimp-gallery"
aria-label="previous slide"
aria-keyshortcuts="ArrowLeft"
></a>
<a
class="next"
aria-controls="blueimp-gallery"
aria-label="next slide"
aria-keyshortcuts="ArrowRight"
></a>
<a
class="close"
aria-controls="blueimp-gallery"
aria-label="close"
aria-keyshortcuts="Escape"
></a>
<a
class="play-pause"
aria-controls="blueimp-gallery"
aria-label="play slideshow"
aria-keyshortcuts="Space"
aria-pressed="false"
role="button"
></a>
<ol class="indicator"></ol>
</div>
[# The template to display files available for upload]
<script id="template-upload" type="text/x-tmpl">
\{% for (var i=0, file; file=o.files\[i\]; i++) \{ %\}
<tr class="template-upload fade\{%=o.options.loadImageFileTypes.test(file.type)?' image':''%\}">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">\{%=file.name%\}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">{upload_processing}</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
\{% if (!o.options.autoUpload && o.options.edit && o.options.loadImageFileTypes.test(file.type)) \{ %\}
<button class="btn btn-success edit" data-index="\{%=i%\}" disabled>
<i class="glyphicon glyphicon-edit"></i>
<span>{upload_button_edit}</span>
</button>
\{% \} %\}
\{% if (!i && !o.options.autoUpload) \{ %\}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>{upload_button_start_upload}</span>
</button>
\{% \} %\}
\{% if (!i) \{ %\}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>{upload_button_cancel_upload}</span>
</button>
\{% \} %\}
</td>
</tr>
\{% \} %\}</script>
[# The template to display files available for download]
<script id="template-download" type="text/x-tmpl">
\{% for (var i=0, file; file=o.files\[i\]; i++) \{ %\}
<tr class="template-download fade\{%=file.thumbnailUrl?' image':''%\}">
<td>
<span class="preview">
\{% if (file.thumbnailUrl) \{ %\}
<a href="\{%=file.url%\}" title="\{%=file.name%\}" download="\{%=file.name%\}" data-gallery><img src="\{%=file.thumbnailUrl%\}"></a>
\{% \} %\}
</span>
</td>
<td>
<p class="name">
\{% if (file.url) \{ %\}
<a href="\{%=file.url%\}" title="\{%=file.name%\}" download="\{%=file.name%\}" \{%=file.thumbnailUrl?'data-gallery':''%\}>\{%=file.name%\}</a>
\{% \} else \{ %\}
<span>\{%=file.name%\}</span>
\{% \} %\}
</p>
\{% if (file.error) \{ %\}
<div><span class="label label-danger">{upload_error}</span> \{%=file.error%\}</div>
\{% \} %\}
</td>
<td>
<span class="size">\{%=o.formatFileSize(file.size)%\}</span>
</td>
<td>
\{% if (file.deleteUrl) \{ %\}
[# added one div to inline the button with the checkbox]
[# to the checkbox added form-check-input class and style element]
<div class="form-inline" style="white-space: nowrap;">
<button class="btn btn-danger delete" data-type="\{%=file.deleteType%\}" data-url="\{%=file.deleteUrl%\}"\{% if (file.deleteWithCredentials) \{ %\} data-xhr-fields='\{"withCredentials":true\}'\{% \} %\}>
<i class="glyphicon glyphicon-trash"></i>
<span>{upload_button_delete}</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle form-check-input" style="transform: none;">
</div>
\{% \} else \{ %\}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>{upload_button_cancel}</span>
</button>
\{% \} %\}
</td>
</tr>
\{% \} %\}</script>
<script type="text/javascript">
$('#fileupload button.start').css('display', 'none');
$('#fileupload').fileupload(\{
"url": "[doc_base_url][dir]upload/jquery_upload/container:json/answer:data",
"autoUpload": true,
"dataType": "json",
\});
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/\[^\/\]*$/,
'/cors/result.html?%s'
));
[# loading existing files]
[# copied from common/fileupload/js/main.js]
$('#fileupload').addClass('fileupload-processing');
$.ajax(\{
[# // Uncomment the following to send cross-domain cookies:]
[# //xhrFields: \{withCredentials: true\},]
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')\[0\]
\}).always(function () \{
$(this).removeClass('fileupload-processing');
\}).done(function (result) \{
$(this).fileupload('option', 'done')
.call(this, $.Event('done'), \{result: result\});
\});</script>
</div>
[end]