mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-23 18:03:17 +00:00
425 lines
22 KiB
Twig
425 lines
22 KiB
Twig
<div id="uploadBox">
|
|
{# jQuery tab wrapper #}
|
|
<div class="upload-tabs">
|
|
{# tab nav bar #}
|
|
<ul>
|
|
<li>
|
|
<a href="#tab-upload">
|
|
{{ 'Upload' | trans }}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
{# template prod/upload/lazaret.html.twig loaded via ajax #}
|
|
<a href="{{ path('lazaret_elements') }}">
|
|
{# <span> </span> element is required for the jQuery loading spinner appears && disappears properly #}
|
|
{{ 'Quarantine' | trans }}<span> </span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
{# upload tab content #}
|
|
<div id="tab-upload">
|
|
<form id="fileupload" enctype="multipart/form-data" method="POST" action="{{ path('upload_form') }}">
|
|
|
|
<div id="uploadBoxLeft" class="well">
|
|
|
|
{# <h5 style="margin-top: 10px;">{{ 'Choose files to add' | trans }} :</h5> #}
|
|
{# action bar #}
|
|
<table id="addFileList">
|
|
<tr>
|
|
<td class='uploader-button'>
|
|
<span id="spanSWFUploadButton" class="span2"></span>
|
|
<br />
|
|
<span class="comment">
|
|
({% trans with {'%maxFileSizeReadable%' : maxFileSizeReadable} %}maximum : %maxFileSizeReadable%{% endtrans %})
|
|
</span>
|
|
</td>
|
|
<td class='uploader-icon'>
|
|
<img src='/skins/icons/logo-flash.png' width="32px" heigh="32px" title="{{ 'You are using the Flash uploader.' | trans }}"/>
|
|
</td>
|
|
<td class='uploader-info'>
|
|
<p>
|
|
{{ 'You are using the Flash uploader.' | trans }}
|
|
{% if not app['browser'].supportFileAPI() %}
|
|
{{ 'This version does not allow you to access all the features offered by the HTML5 uploader' | trans }}
|
|
{% endif %}
|
|
</p>
|
|
{% if app['browser'].supportFileAPI() %}
|
|
<a id="UPLOAD_HTML5_LINK" href="{{ path('upload_html5_form') }}" class="dialog full-dialog">{{ 'Use the HTML5 uploader' | trans }}</a>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
{# settings box #}
|
|
<div class='settings-box'>
|
|
<h5>{{ 'upload:: Destination (collection) :' | trans }} :</h5>
|
|
{# collections list #}
|
|
{% if collections|length > 0 %}
|
|
<select name="base_id" class="span3" style="margin-left: 10px;">
|
|
{% for sbasId, availableCollections in collections %}
|
|
<optgroup label="{{ availableCollections['databox'].get_label(app['locale']) }}" class="select-label">
|
|
{% for collection in availableCollections['databox_collections'] %}
|
|
<option value="{{ collection.get_base_id() }}" class="select-row">{{ collection.get_label(app['locale']) }}</option>
|
|
{% endfor %}
|
|
</optgroup>
|
|
{% endfor %}
|
|
</select>
|
|
{# collections status #}
|
|
{% for availableCollections in collections %}
|
|
{% for collection in availableCollections['databox_collections'] %}
|
|
<div id="status-{{ collection.get_base_id() }}" class='collection-status' style='{{ loop.parent.loop.first and loop.first ? "display:block" :"display:none" }}'>
|
|
<h5>{{ 'upload:: Status :' | trans }} :</h5>
|
|
<table class="status-tab">
|
|
<tbody>
|
|
{% for bit, status in availableCollections['databox'].getStatusStructure() %}
|
|
<tr>
|
|
<td class="status-tab-left">
|
|
{% if status['img_off'] is not empty %}
|
|
<img src="{{ status['img_off'] }}" width="16" height="16" />
|
|
{% endif %}
|
|
<span>{{ status['labels_off_i18n'][app['locale']]|default('off') }}</span>
|
|
<input type="radio" name="status[{{ collection.get_base_id() }}][{{ bit }}]" value="0" checked="checked"/>
|
|
</td>
|
|
<td class="status-tab-right">
|
|
<input type="radio" name="status[{{ collection.get_base_id() }}][{{ bit }}]" value="1" />
|
|
<span for="labelon">{{ status['labels_on_i18n'][app['locale']]|default('on') }}</span>
|
|
{% if status['img_on'] is not empty %}
|
|
<img src="{{ status['img_on'] }}" width="16" height="16" />
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% else %}
|
|
{{ 'You can not upload files' | trans }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# upload box #}
|
|
<div class='upload-box' style="display: none;">
|
|
<h5>{{ 'Selected files' | trans }} :</h5>
|
|
<button type="button" class="clear-queue btn btn-inverse input-medium" style="margin-bottom: 10px;">{{ 'Clear list' | trans }}</button>
|
|
<button type="button" class="upload-submitter btn btn-inverse input-medium" style="margin-bottom: 10px;">{{ 'Send' | trans }}</button>
|
|
<div class="clear"></div>
|
|
<div class='upload-box-addedfiles flash-box'></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="uploadBoxRight" class="well">
|
|
<h5 style="margin-top: 10px;">{{ 'Transmited files' | trans }} : </h5>
|
|
<div class='well-small'>
|
|
<button id="cancel-all" class="btn disabled" type="button" disabled="disabled">
|
|
{{ "Cancel all" | trans }}
|
|
</button>
|
|
</div>
|
|
{# download box #}
|
|
<div class="download-box flash-box"></div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "prod/templates/upload.html.twig" %}
|
|
<script type="text/javascript" src="/assets/upload/js/uploadFlash{% if not app.debug %}.min{% endif %}.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
|
|
//Upload management
|
|
var UploaderManager = new p4.UploaderManager({
|
|
container: $('#uploadBox'),
|
|
uploadBox: $('#uploadBox .upload-box-addedfiles'),
|
|
settingsBox: $('#uploadBox .settings-box'),
|
|
downloadBox: $('#uploadBox .download-box')
|
|
});
|
|
|
|
{# Create tabs #}
|
|
$(".upload-tabs").tabs({
|
|
beforeLoad: function( event, ui ) {
|
|
ui.jqXHR.success(function( xhr, status, index, anchor ) {
|
|
var lazaretBox = $("#lazaretBox");
|
|
|
|
$('.userTips', lazaretBox).tooltip();
|
|
});
|
|
ui.jqXHR.error(function( xhr, status, index, anchor ) {
|
|
//display error message if ajax failed
|
|
$( anchor.hash ).html(language.error);
|
|
});
|
|
|
|
ui.tab.find('span').html(language.loading + '<img src="/skins/icons/loader404040.gif"/>');
|
|
},
|
|
load: function(event, ui)
|
|
{
|
|
ui.tab.find('span').empty();
|
|
},
|
|
create : function () {
|
|
$('#tab-upload').css('overflow', 'hidden');
|
|
},
|
|
heightStyle: "fill"
|
|
});
|
|
|
|
//Show the good collection status box
|
|
$('select[name="base_id"]', UploaderManager.getSettingsBox()).bind('change', function(){
|
|
var selectedCollId = $(this).find('option:selected').val();
|
|
|
|
$('#uploadBox .settings-box .collection-status').hide();
|
|
|
|
$('#uploadBox #status-' + selectedCollId).show();
|
|
});
|
|
//global file order, start uploads from swf.queue, following
|
|
//order of "file_order"
|
|
var file_order = [];
|
|
|
|
var swfu = new SWFUpload({
|
|
upload_url : "/prod/upload/",
|
|
post_params: {"php_session_id" : "{{ sessionId }}"},
|
|
flash_url : "/include/jslibs/SWFUpload/swfupload.swf",
|
|
file_upload_limit : 0,
|
|
file_size_limit: "{{ maxFileSize ~ " B"}}",
|
|
requeue_on_error : true,
|
|
file_post_name : "files[]",
|
|
file_queue_limit : 0,
|
|
button_placeholder_id : "spanSWFUploadButton",
|
|
button_image_url : "/skins/icons/theme_button_background.png",
|
|
button_width : 170,
|
|
button_height : 40,
|
|
button_text : "<span class='btn'>{{ 'Select files...' | trans }}</span>",
|
|
button_text_style :
|
|
".btn {"
|
|
+ "font-family: verdana, Helvetica Neue, Helvetica, Arial, sans-serif; "
|
|
+ "color: #777777;"
|
|
+ "font-size: 12px; "
|
|
+ "font-weight: bold;"
|
|
+ "}",
|
|
button_text_left_padding : 5,
|
|
button_text_top_padding : 10,
|
|
button_window_mode:SWFUpload.WINDOW_MODE.TRANSPARENT,
|
|
button_cursor : SWFUpload.CURSOR.HAND,
|
|
button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
|
|
file_queued_handler : function(file) {
|
|
var $this = this;
|
|
if ( ! UploaderManager.getUploadBox().is(':visible')) {
|
|
UploaderManager.getUploadBox().closest('.upload-box').show();
|
|
}
|
|
|
|
var formatedFile = {
|
|
id: file.id,
|
|
size: typeof file.size !== "undefined" ? UploaderManager.Formater.size(file.size) : '',
|
|
name: file.name,
|
|
type: typeof file.type !== "undefined" ? file.type : '',
|
|
uploadIndex: file.index,
|
|
language: language
|
|
};
|
|
|
|
var html = _.template($("#upload_items_tpl").html(), formatedFile);
|
|
UploaderManager.getUploadBox().append(html);
|
|
$("#"+file.id).find('.canva-wrapper').remove();
|
|
$("#"+file.id).find(".remove-element").bind('click', function(){
|
|
$this.cancelUpload(file.id);
|
|
$(this).closest("li").remove();
|
|
});
|
|
},
|
|
file_queue_error_handler : function(file, errorCode, message) {
|
|
if ( ! UploaderManager.getUploadBox().is(':visible')) {
|
|
UploaderManager.getUploadBox().closest('.upload-box').show();
|
|
}
|
|
|
|
if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
|
|
alert(" {{ "You have attempted to queue too many files" | trans }}");
|
|
return false;
|
|
}
|
|
|
|
var error = "{{ "Unknow Error" | trans }}";
|
|
|
|
switch (errorCode) {
|
|
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
|
|
error = language.errorFileApiTooBig;
|
|
break;
|
|
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
|
|
error = "{{ "Cannot upload Zero Byte files" | trans }}";
|
|
break;
|
|
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
|
|
error = "{{ "Invalid file type" | trans }}";
|
|
break;
|
|
default:
|
|
if (file !== null) {
|
|
error = "{{ "Unhandled Error" | trans }}";
|
|
}
|
|
break;
|
|
}
|
|
|
|
var params = $.extend({}, file, {error: error, language: language});
|
|
var html = _.template($("#upload_items_error_tpl").html(), params);
|
|
UploaderManager.getUploadBox().append(html);
|
|
$("#"+file.id, UploaderManager.getDownloadBox()).find('.canva-wrapper').remove();
|
|
},
|
|
file_dialog_complete_handler : function(numFilesSelected, numFilesQueued) {
|
|
if (numFilesQueued > 0) {
|
|
$("button.clear-queue", UploaderManager.getContainer()).attr("disabled", false).removeClass("disabled");
|
|
$("button.upload-submitter", UploaderManager.getContainer()).attr("disabled", false).removeClass("disabled");
|
|
}
|
|
},
|
|
upload_start_handler : function(file) {
|
|
var $this = this;
|
|
$("#cancel-all", UploaderManager.getContainer()).removeClass("disabled").attr("disabled", false);
|
|
|
|
$.each(UploaderManager.getSettingsBox().find('.collection-status:visible input, select').serializeArray(), function(index, param){
|
|
$this.addFileParam(file.id, param.name, param.value);
|
|
});
|
|
},
|
|
upload_progress_handler : function(file, bytesLoaded, bytesTotal) {
|
|
var progressbar = $("#"+file.id, UploaderManager.getDownloadBox()).find('.progress-bar');
|
|
progressbar.width(Math.round(UploaderManager.Formater.pourcent(bytesLoaded, bytesTotal)) + '%');
|
|
},
|
|
upload_error_handler : function(file, errorCode, message) {
|
|
|
|
var reasons = "{{ "Unknow reason" | trans }}";
|
|
|
|
switch (errorCode) {
|
|
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
|
|
reasons = "{{ "Bad request, please contact an admin" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
|
|
reasons = "{{ "Upload URL is not set, please contact an admin" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
|
|
reasons = "{{ "Connection terminates unexpetecdly, please retry" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
|
|
reasons = "{{ "The upload violates a security restriction, please retry" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
|
|
reasons = "{% trans with {'%maxFileSizeReadable%' : maxFileSizeReadable} %}File upload limit (%maxFileSizeReadable%) has been reached{% endtrans %}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
|
|
reasons = "{{ "Could not initiate upload, please retry" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
|
|
reasons = "{{ "Could not retrieve the file ID, please retry or contact an admin if problem persist" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
|
|
reasons = "{{ "File validation failed" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
|
|
reasons = "{{ "File upload has been cancelled" | trans }}";
|
|
break;
|
|
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
|
|
reasons = "{{ "File upload has been stopped" | trans }}";
|
|
break;
|
|
}
|
|
|
|
var html = _.template($("#download_finish_tpl").html(), {heading:"{{ "Error while uploading" | trans }}", reasons: [reasons]});
|
|
$("#"+file.id, UploaderManager.getDownloadBox()).find('p.error').append(html).show();
|
|
|
|
},
|
|
upload_success_handler : function(file, response) {
|
|
var response = $.parseJSON(response);
|
|
|
|
if(response.success){
|
|
//case record
|
|
if(response.element === 'record'){
|
|
var html = _.template($("#download_finish_tpl").html(), {heading:response.message, reasons: response.reasons});
|
|
$("#"+file.id, UploaderManager.getDownloadBox()).find('p.success').append(html).show();
|
|
} else { //case quarantine
|
|
var html = _.template($("#download_finish_tpl").html(), {heading:response.message, reasons: response.reasons});
|
|
$("#"+file.id, UploaderManager.getDownloadBox()).find('p.error').append(html).show();
|
|
}
|
|
} else {
|
|
//fail
|
|
var html = _.template($("#download_finish_tpl").html(), {heading:response.message, reasons: response.reasons});
|
|
$("#"+file.id, UploaderManager.getDownloadBox()).find('p.error').append(html).show();
|
|
}
|
|
},
|
|
upload_complete_handler: function(file) {
|
|
//this event is always fired in the end
|
|
|
|
$("#"+file.id, UploaderManager.getDownloadBox())
|
|
.find('.progress-bar')
|
|
.width('100%')
|
|
.parent()
|
|
.removeClass('progress-striped');
|
|
|
|
if (this.getStats().files_queued === 0) {
|
|
$("#cancel-all", UploaderManager.getContainer()).addClass("disabled").attr("disabled", true);
|
|
var dialog = p4.Dialog.get(1);
|
|
//unbind check before close event & disabled button for cancel all download
|
|
dialog.getDomElement().unbind("dialogbeforeclose");
|
|
|
|
return false;
|
|
}
|
|
|
|
var next_file = file_order.shift();
|
|
|
|
if ( typeof next_file !== "undefined") {
|
|
this.startUpload(next_file.id);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$("button.upload-submitter", UploaderManager.getContainer()).bind("click", function(e){
|
|
|
|
//prevent dialog box from being closed while files are being downloaded
|
|
p4.Dialog.get(1).getDomElement().bind("dialogbeforeclose", function(event, ui) {
|
|
if ( swfu.getStats().files_queued > 0) {
|
|
p4.Alerts(language.warning, language.fileBeingDownloaded);
|
|
return false;
|
|
}
|
|
});
|
|
|
|
var nbElements = $(".upload-box-addedfiles ul:first li.upload-valid > div").length;
|
|
var elementChecked = 0;
|
|
|
|
$(".upload-box-addedfiles ul:first li.upload-valid > div").each(function(index, element) {
|
|
var file = swfu.getFile($(this).attr("id"));
|
|
|
|
if (file !== null) {
|
|
var html = _.template($("#download_items_tpl").html(), $.extend({}, file, {language: language}));
|
|
UploaderManager.getDownloadBox().append(html);
|
|
|
|
$("#"+file.id, UploaderManager.getDownloadBox()).find('.canva-wrapper').remove();
|
|
$("#"+file.id, UploaderManager.getDownloadBox()).find('.remove-element').bind('click', function(e){
|
|
swfu.cancelUpload(file.id);
|
|
});
|
|
|
|
//Add file
|
|
file_order.push(file);
|
|
elementChecked++;
|
|
|
|
if( elementChecked === nbElements) {
|
|
//Start upload
|
|
swfu.startUpload(file_order.shift().id);
|
|
}
|
|
}
|
|
});
|
|
|
|
$('ul', UploaderManager.getContainer().find('.upload-box')).empty();
|
|
$("button.clear-queue", UploaderManager.getContainer()).attr("disabled", true).addClass("disabled");
|
|
$("button.upload-submitter", UploaderManager.getContainer()).attr("disabled", true).addClass('disabled');
|
|
|
|
if (nbElements === 0) {
|
|
alert("{{ 'Please select at least one valid file' | trans }}");
|
|
}
|
|
});
|
|
|
|
$("button.clear-queue", UploaderManager.getContainer()).bind("click", function(e){
|
|
swfu.cancelQueue();
|
|
$('ul', $(this).closest('.upload-box')).empty();
|
|
$(this).attr("disabled", true).addClass("disabled");
|
|
$("button.upload-submitter", UploaderManager.getContainer()).attr("disabled", true).addClass('disabled');
|
|
});
|
|
|
|
$("#cancel-all", UploaderManager.getContainer()).bind("click", function(){
|
|
swfu.cancelQueue();
|
|
$(this).addClass("disabled").attr("disabled", true);
|
|
});
|
|
});
|
|
|
|
</script>
|