Partially add file upload

This commit is contained in:
Anton Romanov 2025-01-30 01:54:12 +04:00
parent 1ac50fdd54
commit fc480dd559
2 changed files with 101 additions and 0 deletions

View File

@ -0,0 +1,24 @@
(function($) {
$.fn.bootstrapFileInput = function(loadDirectory = false) {
var fileInput = $('<input type="file" class="input-ghost" ' + (loadDirectory ? 'webkitdirectory' : '') +' style="visibility:hidden; height:0">');
fileInput.change(function() {
$('#file-input-list').html('');
const files = $(this).prop('files');
if (files.length == 0) {
return;
}
var filesList = '';
$.each(files, function(index, file){
filesList += '<div style="overflow: hidden"><span id="file-' + index + '"><i class="fa fa-circle-o"></i> ' + file.name + '</span></div>';
});
$('#file-input-list').html(filesList);
});
$(this).find('button.btn-choose').click(function() {
fileInput.click();
});
$(this).find('input').mousedown(function() {
return false;
});
$(this).append(fileInput);
};
})(jQuery);

View File

@ -11,7 +11,84 @@
<div class="form-group" th:each="i, ind : ${indicators}"> <div class="form-group" th:each="i, ind : ${indicators}">
<label th:text="${i.name}"></label> <label th:text="${i.name}"></label>
<div class="form-group">
<button class="form-control btn btn-danger" type="button" onclick="deleteAllFiles();">Удалить все
документы
</button>
</div> </div>
<div id="input-file" class="form-group">
<button class="btn btn-primary btn-upload btn-choose pull-right" type="button">Обзор</button>
<button class="btn btn-success btn-upload" type="button" onclick="uploadFile();">Загрузить</button>
</div>
<div id="file-input-list" class="form-group">
</div>
</div>
<th:block layout:fragment="scripts">
<script src="/js/bootstrap.file-input.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
uploadFile = function(index = 0) {
const files = $('#input-file .input-ghost').prop('files');
if (index == 0) {
showFeedbackMessage();
$('button').prop('disabled', true);
}
if (index >= files.length) {
$('button').prop('disabled', false);
$('#input-file .input-ghost').val('');
return;
}
$('#file-' + index + ' i').removeClass('fa-circle-o').addClass('fa-circle-o-notch fa-spin');
$('#file-' + index).removeClass('alert-danger alert-success');
var response = false;
var formData = new FormData();
formData.append('file', files[index]);
uploadAjax('api/1.0/documents.upload', formData,
(result) => {
if (!result) {
return;
}
response = result.response;
},
null,
() => {
var resultIcon = 'fa-times-circle-o';
var resultStyle = 'alert-danger';
if (response) {
resultIcon = 'fa-check-circle-o';
resultStyle = 'alert-success';
}
$('#file-' + index + ' i').removeClass('fa-circle-o-notch fa-spin').addClass(resultIcon);
$('#file-' + index).addClass(resultStyle);
uploadFile(index + 1);
});
};
deleteAllFiles = function() {
$('#file-input-list').html('');
//input.replaceWith(input = input.val('').clone(true));
$('#spinner').show()
getAjax('api/1.0/documents.delete_all',
(result) => {
if (result.response) {
showFeedbackMessage('Удалено ' + result.response + ' документов');
}
if (result.error) {
showFeedbackMessage(result.error, 'danger');
}
},
null,
() => $('#spinner').hide(),
'DELETE'
);
};
$('#input-file').bootstrapFileInput(true);
});
/*]]>*/
</script>
</th:block>
<button name="save" type="submit" class="btn btn-outline-dark">Сохранить</button> <button name="save" type="submit" class="btn btn-outline-dark">Сохранить</button>
<button name="delete" <button name="delete"