Your IP : 216.73.217.79
<?php
/**
* Dynamic CESAnet message attachment file inputs (one file per row, auto-add next row).
* Expects jQuery. Optional: set $cceMessageAttachmentUseBootstrap = true before include.
*/
$cceMessageAttachmentInputClass = !empty($cceMessageAttachmentUseBootstrap) ? ' form-control' : '';
?>
<style type="text/css">
.cce-message-attachments .cce-attach-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.cce-message-attachments .cce-attach-file-wrap {
flex: 1 1 auto;
min-width: 0;
}
.cce-message-attachments .cce-attach-file-wrap input[type="file"] {
width: 100%;
max-width: 100%;
}
.cce-message-attachments .cce-attach-name {
flex: 0 1 auto;
font-size: 12px;
color: #333;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cce-message-attachments .cce-attach-clear {
flex: 0 0 auto;
border: none;
background: transparent;
padding: 2px 4px;
line-height: 1;
cursor: pointer;
color: #a94442;
}
.cce-message-attachments .cce-attach-clear:hover,
.cce-message-attachments .cce-attach-clear:focus {
color: #843534;
}
.cce-message-attachments .cce-attach-clear svg {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
}
</style>
<div id="cce-message-attachments" class="cce-message-attachments" data-input-class="<?php echo htmlspecialchars($cceMessageAttachmentInputClass); ?>"></div>
<script type="text/javascript">
(function ($) {
function initCceMessageAttachments() {
var $container = $('#cce-message-attachments');
if (!$container.length || $container.data('cceAttachInit')) {
return;
}
$container.data('cceAttachInit', true);
var inputClass = $container.data('inputClass') || '';
var deleteIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">'
+ '<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>'
+ '<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>'
+ '</svg>';
function rowHasFile($row) {
var input = $row.find('input[type="file"]')[0];
return input && input.files && input.files.length > 0;
}
function syncAttachmentRows() {
var $rows = $container.find('.cce-attach-row');
var emptyRows = [];
$rows.each(function () {
if (!rowHasFile($(this))) {
emptyRows.push(this);
}
});
while (emptyRows.length > 1) {
$(emptyRows.pop()).remove();
}
$rows = $container.find('.cce-attach-row');
if ($rows.length === 0) {
$container.append(createAttachmentRow());
return;
}
if (rowHasFile($rows.last())) {
$container.append(createAttachmentRow());
}
}
function createAttachmentRow() {
var $row = $('<div class="cce-attach-row"></div>');
var $fileWrap = $('<span class="cce-attach-file-wrap"></span>');
var $input = $('<input type="file" name="file1[]" class="cce-attach-input' + inputClass + '" />');
var $name = $('<span class="cce-attach-name"></span>').hide();
var $clear = $('<button type="button" class="cce-attach-clear" title="Remove file" aria-label="Remove file"></button>')
.html(deleteIcon)
.hide();
$clear.on('click', function () {
var $thisRow = $row;
if ($container.find('.cce-attach-row').length === 1) {
$input.val('');
$name.hide().text('');
$clear.hide();
return;
}
$thisRow.remove();
syncAttachmentRows();
});
$input.on('change', function () {
var file = this.files && this.files[0];
if (file) {
$name.text(file.name).show();
$clear.show();
if ($row.is($container.find('.cce-attach-row').last())) {
$container.append(createAttachmentRow());
}
} else {
$name.hide().text('');
$clear.hide();
syncAttachmentRows();
}
});
$fileWrap.append($input);
$row.append($fileWrap, $name, $clear);
return $row;
}
$container.append(createAttachmentRow());
}
$(initCceMessageAttachments);
})(jQuery);
</script>