Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/global/js/demo_pages/uploader_bootstrap.js
+312
View File
@@ -0,0 +1,312 @@
/* ------------------------------------------------------------------------------
*
* # Bootstrap multiple file uploader
*
* Demo JS code for uploader_bootstrap.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var FileUpload = function() {
//
// Setup module components
//
// Bootstrap file upload
var _componentFileUpload = function() {
if (!$().fileinput) {
console.warn('Warning - fileinput.min.js is not loaded.');
return;
}
//
// Define variables
//
// Modal template
var modalTemplate = '<div class="modal-dialog modal-lg" role="document">\n' +
' <div class="modal-content">\n' +
' <div class="modal-header align-items-center">\n' +
' <h6 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h6>\n' +
' <div class="kv-zoom-actions btn-group">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
' </div>\n' +
' <div class="modal-body">\n' +
' <div class="floating-buttons btn-group"></div>\n' +
' <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
' </div>\n' +
' </div>\n' +
'</div>\n';
// Buttons inside zoom modal
var previewZoomButtonClasses = {
toggleheader: 'btn btn-light btn-icon btn-header-toggle btn-sm',
fullscreen: 'btn btn-light btn-icon btn-sm',
borderless: 'btn btn-light btn-icon btn-sm',
close: 'btn btn-light btn-icon btn-sm'
};
// Icons inside zoom modal classes
var previewZoomButtonIcons = {
prev: '<i class="icon-arrow-left32"></i>',
next: '<i class="icon-arrow-right32"></i>',
toggleheader: '<i class="icon-menu-open"></i>',
fullscreen: '<i class="icon-screen-full"></i>',
borderless: '<i class="icon-alignment-unalign"></i>',
close: '<i class="icon-cross2 font-size-base"></i>'
};
// File actions
var fileActionSettings = {
zoomClass: '',
zoomIcon: '<i class="icon-zoomin3"></i>',
dragClass: 'p-2',
dragIcon: '<i class="icon-three-bars"></i>',
removeClass: '',
removeErrorClass: 'text-danger',
removeIcon: '<i class="icon-bin"></i>',
indicatorNew: '<i class="icon-file-plus text-success"></i>',
indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
indicatorError: '<i class="icon-cross2 text-danger"></i>',
indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>'
};
//
// Basic example
//
$('.file-input').fileinput({
browseLabel: 'Browse',
browseIcon: '<i class="icon-file-plus mr-2"></i>',
uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
removeIcon: '<i class="icon-cross2 font-size-base mr-2"></i>',
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
modal: modalTemplate
},
initialCaption: "No file selected",
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons,
fileActionSettings: fileActionSettings
});
//
// Custom layout
//
$('.file-input-custom').fileinput({
previewFileType: 'image',
browseLabel: 'Select',
browseClass: 'btn bg-slate-700',
browseIcon: '<i class="icon-image2 mr-2"></i>',
removeLabel: 'Remove',
removeClass: 'btn btn-danger',
removeIcon: '<i class="icon-cancel-square mr-2"></i>',
uploadClass: 'btn bg-teal-400',
uploadIcon: '<i class="icon-file-upload mr-2"></i>',
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
modal: modalTemplate
},
initialCaption: "Please select image",
mainClass: 'input-group',
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons,
fileActionSettings: fileActionSettings
});
//
// Template modifications
//
$('.file-input-advanced').fileinput({
browseLabel: 'Browse',
browseClass: 'btn btn-light',
removeClass: 'btn btn-light',
uploadClass: 'btn bg-success-400',
browseIcon: '<i class="icon-file-plus mr-2"></i>',
uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
removeIcon: '<i class="icon-cross2 font-size-base mr-2"></i>',
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
main1: "{preview}\n" +
"<div class='input-group {class}'>\n" +
" <div class='input-group-prepend'>\n" +
" {browse}\n" +
" </div>\n" +
" {caption}\n" +
" <div class='input-group-append'>\n" +
" {upload}\n" +
" {remove}\n" +
" </div>\n" +
"</div>",
modal: modalTemplate
},
initialCaption: "No file selected",
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons,
fileActionSettings: fileActionSettings
});
//
// Custom file extensions
//
$('.file-input-extensions').fileinput({
browseLabel: 'Browse',
browseIcon: '<i class="icon-file-plus mr-2"></i>',
uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
removeIcon: '<i class="icon-cross2 font-size-base mr-2"></i>',
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
modal: modalTemplate
},
maxFilesNum: 10,
allowedFileExtensions: ["jpg", "gif", "png", "txt"],
initialCaption: "No file selected",
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons,
fileActionSettings: fileActionSettings
});
//
// Always display preview
//
$('.file-input-preview').fileinput({
browseLabel: 'Browse',
browseIcon: '<i class="icon-file-plus mr-2"></i>',
uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
removeIcon: '<i class="icon-cross2 font-size-base mr-2"></i>',
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
modal: modalTemplate
},
initialPreview: [
'../../../../global_assets/images/placeholders/placeholder.jpg',
'../../../../global_assets/images/placeholders/placeholder.jpg',
],
initialPreviewConfig: [
{caption: 'Jane.jpg', size: 930321, key: 1, url: '{$url}', showDrag: false},
{caption: 'Anna.jpg', size: 1218822, key: 2, url: '{$url}', showDrag: false}
],
initialPreviewAsData: true,
overwriteInitial: false,
maxFileSize: 100,
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons,
fileActionSettings: fileActionSettings
});
//
// Display preview on load
//
$('.file-input-overwrite').fileinput({
browseLabel: 'Browse',
browseIcon: '<i class="icon-file-plus mr-2"></i>',
uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
removeIcon: '<i class="icon-cross2 font-size-base mr-2"></i>',
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
modal: modalTemplate
},
initialPreview: [
'../../../../global_assets/images/placeholders/placeholder.jpg',
'../../../../global_assets/images/placeholders/placeholder.jpg'
],
initialPreviewConfig: [
{caption: 'Jane.jpg', size: 930321, key: 1, url: '{$url}'},
{caption: 'Anna.jpg', size: 1218822, key: 2, url: '{$url}'}
],
initialPreviewAsData: true,
overwriteInitial: true,
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons,
fileActionSettings: fileActionSettings
});
//
// AJAX upload
//
$('.file-input-ajax').fileinput({
browseLabel: 'Browse',
uploadUrl: "http://localhost", // server upload action
uploadAsync: true,
maxFileCount: 5,
initialPreview: [],
browseIcon: '<i class="icon-file-plus mr-2"></i>',
uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
removeIcon: '<i class="icon-cross2 font-size-base mr-2"></i>',
fileActionSettings: {
removeIcon: '<i class="icon-bin"></i>',
uploadIcon: '<i class="icon-upload"></i>',
uploadClass: '',
zoomIcon: '<i class="icon-zoomin3"></i>',
zoomClass: '',
indicatorNew: '<i class="icon-file-plus text-success"></i>',
indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
indicatorError: '<i class="icon-cross2 text-danger"></i>',
indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>',
},
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
modal: modalTemplate
},
initialCaption: 'No file selected',
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons
});
//
// Misc
//
// Disable/enable button
$('#btn-modify').on('click', function() {
$btn = $(this);
if ($btn.text() == 'Disable file input') {
$('#file-input-methods').fileinput('disable');
$btn.html('Enable file input');
alert('Hurray! I have disabled the input and hidden the upload button.');
}
else {
$('#file-input-methods').fileinput('enable');
$btn.html('Disable file input');
alert('Hurray! I have reverted back the input to enabled with the upload button.');
}
});
};
//
// Return objects assigned to module
//
return {
init: function() {
_componentFileUpload();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
FileUpload.init();
});