Partially add file upload
This commit is contained in:
parent
1ac50fdd54
commit
fc480dd559
24
src/main/resources/public/js/bootstrap.file-input.js
vendored
Normal file
24
src/main/resources/public/js/bootstrap.file-input.js
vendored
Normal 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);
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user