You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
276 lines
9.4 KiB
276 lines
9.4 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Bootstrap multiple file uploader |
|
* |
|
* Specific JS code additions for uploader_bootstrap.html page |
|
* |
|
* Version: 1.2 |
|
* Latest update: Aug 10, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
$(function() { |
|
|
|
// |
|
// Define variables |
|
// |
|
|
|
// Modal template |
|
var modalTemplate = '<div class="modal-dialog modal-lg" role="document">\n' + |
|
' <div class="modal-content">\n' + |
|
' <div class="modal-header">\n' + |
|
' <div class="kv-zoom-actions btn-group">{toggleheader}{fullscreen}{borderless}{close}</div>\n' + |
|
' <h6 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h6>\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-default btn-icon btn-xs btn-header-toggle', |
|
fullscreen: 'btn btn-default btn-icon btn-xs', |
|
borderless: 'btn btn-default btn-icon btn-xs', |
|
close: 'btn btn-default btn-icon btn-xs' |
|
}; |
|
|
|
// 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-cross3"></i>' |
|
}; |
|
|
|
// File actions |
|
var fileActionSettings = { |
|
zoomClass: 'btn btn-link btn-xs btn-icon', |
|
zoomIcon: '<i class="icon-zoomin3"></i>', |
|
dragClass: 'btn btn-link btn-xs btn-icon', |
|
dragIcon: '<i class="icon-three-bars"></i>', |
|
removeClass: 'btn btn-link btn-icon btn-xs', |
|
removeIcon: '<i class="icon-trash"></i>', |
|
indicatorNew: '<i class="icon-file-plus text-slate"></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"></i>', |
|
uploadIcon: '<i class="icon-file-upload2"></i>', |
|
removeIcon: '<i class="icon-cross3"></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 position-left"></i> ', |
|
removeLabel: 'Remove', |
|
removeClass: 'btn btn-danger', |
|
removeIcon: '<i class="icon-cancel-square position-left"></i> ', |
|
uploadClass: 'btn bg-teal-400', |
|
uploadIcon: '<i class="icon-file-upload position-left"></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-default', |
|
removeClass: 'btn btn-default', |
|
uploadClass: 'btn bg-success-400', |
|
browseIcon: '<i class="icon-file-plus"></i>', |
|
uploadIcon: '<i class="icon-file-upload2"></i>', |
|
removeIcon: '<i class="icon-cross3"></i>', |
|
layoutTemplates: { |
|
icon: '<i class="icon-file-check"></i>', |
|
main1: "{preview}\n" + |
|
"<div class='input-group {class}'>\n" + |
|
" <div class='input-group-btn'>\n" + |
|
" {browse}\n" + |
|
" </div>\n" + |
|
" {caption}\n" + |
|
" <div class='input-group-btn'>\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', |
|
browseClass: 'btn btn-primary', |
|
uploadClass: 'btn btn-default', |
|
browseIcon: '<i class="icon-file-plus"></i>', |
|
uploadIcon: '<i class="icon-file-upload2"></i>', |
|
removeIcon: '<i class="icon-cross3"></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"></i>', |
|
uploadIcon: '<i class="icon-file-upload2"></i>', |
|
removeIcon: '<i class="icon-cross3"></i>', |
|
layoutTemplates: { |
|
icon: '<i class="icon-file-check"></i>', |
|
modal: modalTemplate |
|
}, |
|
initialPreview: [ |
|
"assets/images/demo/images/1.png", |
|
"assets/images/demo/images/2.png", |
|
], |
|
initialPreviewConfig: [ |
|
{caption: "Jane.jpg", size: 930321, key: 1, showDrag: false}, |
|
{caption: "Anna.jpg", size: 1218822, key: 2, 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"></i>', |
|
uploadIcon: '<i class="icon-file-upload2"></i>', |
|
removeIcon: '<i class="icon-cross3"></i>', |
|
layoutTemplates: { |
|
icon: '<i class="icon-file-check"></i>', |
|
modal: modalTemplate |
|
}, |
|
initialPreview: [ |
|
"assets/images/demo/images/1.png", |
|
"assets/images/demo/images/2.png" |
|
], |
|
initialPreviewConfig: [ |
|
{caption: "Jane.jpg", size: 930321, key: 1, showDrag: false}, |
|
{caption: "Anna.jpg", size: 1218822, key: 2, showDrag: false} |
|
], |
|
initialPreviewAsData: true, |
|
overwriteInitial: true, |
|
previewZoomButtonClasses: previewZoomButtonClasses, |
|
previewZoomButtonIcons: previewZoomButtonIcons, |
|
fileActionSettings: fileActionSettings |
|
}); |
|
|
|
|
|
// |
|
// AJAX upload |
|
// |
|
|
|
$(".file-input-ajax").fileinput({ |
|
uploadUrl: "http://localhost", // server upload action |
|
uploadAsync: true, |
|
maxFileCount: 5, |
|
initialPreview: [], |
|
fileActionSettings: { |
|
removeIcon: '<i class="icon-bin"></i>', |
|
removeClass: 'btn btn-link btn-xs btn-icon', |
|
uploadIcon: '<i class="icon-upload"></i>', |
|
uploadClass: 'btn btn-link btn-xs btn-icon', |
|
indicatorNew: '<i class="icon-file-plus text-slate"></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."); |
|
} |
|
}); |
|
|
|
});
|
|
|