@@ -, +, @@ - Drag-and-drop upload - Click-to-browse upload; - Deleting existing images - Uploading a zip file --- .../prog/en/modules/tools/upload-images.tt | 227 +---------------- .../intranet-tmpl/prog/js/upload-images.js | 228 ++++++++++++++++++ 2 files changed, 230 insertions(+), 225 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/upload-images.js --- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt +++ a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt @@ -309,232 +309,9 @@ var interface = "[% interface | html %]"; var theme = "[% theme | html %]"; var biblionumber = "[% biblionumber | html %]"; - $(document).ready(function(){ - $("html").on("drop", function(e) { - e.preventDefault(); - e.stopPropagation(); - }); - - $("#zipfile").click(function(){ - $("biblionumber_entry").hide(); - }); - - $("#image").click(function(){ - $("#biblionumber_entry").show(); - }); - - $("#uploadfile").validate({ - submitHandler: function(form) { - StartUpload(); - return false; - } - }); - - $() - - $("#filedrag").on("click", ".cancel_image", function(){ - $("#click_to_select").show(); - $("#messages").html(""); - $("#fileToUpload").prop( "disabled", false ); - $("#process_images, #fileuploadstatus").hide(); - return false; - }).on("click", ".save_image", function(e){ - e.preventDefault(); - $("#processfile").submit(); - }); - - $("html").on("drop", function(e) { - /* Prevent the default browser action when image is dropped */ - /* i.e. don't navigate to a view of the local image */ - e.preventDefault(); - e.stopPropagation(); - }); - - $('#filedrag').on('dragenter dragover dragleave', function (e) { - /* Handle various drag and drop events in "Drop files" area */ - /* If event type is "dragover," add the "hover" class */ - /* otherwise set no class name */ - e.stopPropagation(); - e.preventDefault(); - e.target.className = (e.type == "dragover" ? "hover" : ""); - }); - - $("#filedrag").click(function(){ - /* Capture a click inside the drag and drop area */ - /* Trigger the action */ - $("#fileToUpload").click(); - }); - - // Drop - $('#filedrag').on('drop', function (e) { - e.stopPropagation(); - e.preventDefault(); - prepUpLoad(e); - }); - - // file selected - $("#fileToUpload").change(function(){ - prepUpLoad(); - }); - - $('.thumbnails .remove').on("click", function(e) { - e.preventDefault(); - var result = confirm(_("Are you sure you want to delete this cover image?")); - var imagenumber = $(this).data("coverimg"); - if ( result == true ) { - removeLocalImage(imagenumber); - } - }); - }); - - function prepUpLoad( event ){ - $("#click_to_select,#upload_results").hide(); - $("#messages").html(""); - if( event ){ - var file = event.originalEvent.dataTransfer.files[0]; - } else { - var file = $('#fileToUpload')[0].files[0]; - } - - $("#fileuploadstatus, #upload_options").show(); - var fd = new FormData(); - fd.append('file', file); - if( ParseFile( file ) ){ - StartUpload( fd ); - } - } - - function StartUpload( fd ) { - $('#uploadform button.submit').prop('disabled',true); - $("#uploadedfileid").val(''); - xhr= AjaxUpload( fd, $('#fileuploadprogress'), 'temp=1', cbUpload ); - } - function cbUpload( status, fileid, errors ) { - if( status=='done' ) { - $("#uploadedfileid").val( fileid ); - $('#fileToUpload').prop('disabled',true); - $("#process_images").show(); - } else { - var errMsgs = [ _("Error code 0 not used"), _("File already exists"), _("Directory is not writeable"), _("Root directory for uploads not defined"), _("Temporary directory for uploads not defined") ]; - var errCode = errors[$('#fileToUpload').prop('files')[0].name].code; - $("#fileuploadstatus").hide(); - $("#fileuploadfailed").show(); - $("#fileuploadfailed").text( _("Upload status: ") + - ( status=='failed'? _("Failed") + " - (" + errCode + ") " + errMsgs[errCode]: - ( status=='denied'? _("Denied"): status )) - ); - $("#processfile").hide(); - } - } - - function AjaxUpload ( formData, progressbar, xtra, callback ) { - var xhr= new XMLHttpRequest(); - var url= '/cgi-bin/koha/tools/upload-file.pl?' + xtra; - progressbar.val( 0 ); - progressbar.next('.fileuploadpercent').text( '0' ); - xhr.open('POST', url, true); - xhr.upload.onprogress = function (e) { - var p = Math.round( (e.loaded/e.total) * 100 ); - progressbar.val( p ); - progressbar.next('.fileuploadpercent').text( p ); - } - xhr.onload = function (e) { - var data = JSON.parse( xhr.responseText ); - if( data.status == 'done' ) { - progressbar.val( 100 ); - progressbar.next('.fileuploadpercent').text( '100' ); - } - callback( data.status, data.fileid, data.errors ); - } - xhr.onerror = function (e) { - // Probably only fires for network failure - alert(_("An error occurred while uploading.") ); - } - xhr.send( formData ); - return xhr; - } - - // output file information - function ParseFile(file) { - var valid = true; - if (file.type.indexOf("image") == 0) { - /* If the uploaded file is an image, show it */ - var reader = new FileReader(); - reader.onload = function(e) { - Output( - '
' - ); - } - $("#biblionumber_entry").show().find("input,label").addClass("required").prop("required", true ); - $("#image").prop("checked", true ).change(); - $("#zipfile").prop("checked", false ); - reader.readAsDataURL(file); - } else if( file.type.indexOf("zip") > 0) { - Output( - '' - ); - $("#biblionumber_entry").hide(); - $("#image").prop("checked", false ); - $("#zipfile").prop("checked", true ); - } else { - Output( - '
" + _("File name:") + " " + file.name + "
" +
- _("File type:") + " " + file.type + "
" +
- _("File size:") + " " + convertSize( file.size ) + ""
- );
- return valid;
- }
-
- // output information
- function Output(msg) {
- var m = document.getElementById("messages");
- m.innerHTML = msg + m.innerHTML;
- }
-
- // Bytes conversion
- function convertSize(size) {
- var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
- if (size == 0) return '0 Byte';
- var i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
- return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
- }
-
- function removeLocalImage(imagenumber) {
- var thumbnail = $("#imagenumber-" + imagenumber );
- var copy = thumbnail.html();
- thumbnail.find("img").css("opacity", ".2");
- thumbnail.find("a.remove").html("");
-
- $.ajax({
- url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
- success: function(data) {
- $(data).each( function() {
- if ( this.deleted == 1 ) {
- location.href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber;
- } else {
- thumbnail.html( copy );
- alert(_("An error occurred on deleting this image"));
- }
- });
- },
- error: function(data) {
- thumbnail.html( copy );
- alert(_("An error occurred on deleting this image"));
- }
- });
- }
+
+ [% Asset.js("js/upload-images.js") | $raw %]
- function resetForm(){
- $("#uploadpanel,#upload_options,#process_images").hide();
- $("#click_to_select").show();
- }
[% END %]
--- a/koha-tmpl/intranet-tmpl/prog/js/upload-images.js
+++ a/koha-tmpl/intranet-tmpl/prog/js/upload-images.js
@@ -0,0 +1,228 @@
+/* global __ interface theme biblionumber */
+
+$(document).ready(function(){
+ $("html").on("drop", function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ });
+
+ $("#zipfile").on("click", function(){
+ $("biblionumber_entry").hide();
+ });
+
+ $("#image").on("click", function(){
+ $("#biblionumber_entry").show();
+ });
+
+ $("#uploadfile").validate({
+ submitHandler: function() {
+ StartUpload();
+ return false;
+ }
+ });
+
+ $("#filedrag").on("click", ".cancel_image", function(){
+ $("#click_to_select").show();
+ $("#messages").html("");
+ $("#fileToUpload").prop( "disabled", false );
+ $("#process_images, #fileuploadstatus").hide();
+ return false;
+ }).on("click", ".save_image", function(e){
+ e.preventDefault();
+ $("#processfile").submit();
+ });
+
+ $("html").on("drop", function(e) {
+ /* Prevent the default browser action when image is dropped */
+ /* i.e. don't navigate to a view of the local image */
+ e.preventDefault();
+ e.stopPropagation();
+ });
+
+ $('#filedrag').on('dragenter dragover dragleave', function (e) {
+ /* Handle various drag and drop events in "Drop files" area */
+ /* If event type is "dragover," add the "hover" class */
+ /* otherwise set no class name */
+ e.stopPropagation();
+ e.preventDefault();
+ e.target.className = (e.type == "dragover" ? "hover" : "");
+ });
+
+ $("#filedrag").on("click", function(){
+ /* Capture a click inside the drag and drop area */
+ /* Trigger the action */
+ $("#fileToUpload").click();
+ });
+
+ // Drop
+ $('#filedrag').on('drop', function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+ prepUpLoad(e);
+ });
+
+ // file selected
+ $("#fileToUpload").on("change", function(){
+ prepUpLoad();
+ });
+
+ $('.thumbnails .remove').on("click", function(e) {
+ e.preventDefault();
+ var result = confirm(__("Are you sure you want to delete this cover image?"));
+ var imagenumber = $(this).data("coverimg");
+ if ( result == true ) {
+ removeLocalImage(imagenumber);
+ }
+ });
+});
+
+function prepUpLoad( event ){
+ $("#click_to_select,#upload_results").hide();
+ $("#messages").html("");
+ var file;
+ if( event ){
+ file = event.originalEvent.dataTransfer.files[0];
+ } else {
+ file = $('#fileToUpload')[0].files[0];
+ }
+
+ $("#fileuploadstatus, #upload_options").show();
+ var fd = new FormData();
+ fd.append('file', file);
+ if( ParseFile( file ) ){
+ StartUpload( fd );
+ }
+}
+
+function StartUpload( fd ) {
+ $('#uploadform button.submit').prop('disabled',true);
+ $("#uploadedfileid").val('');
+ AjaxUpload( fd, $('#fileuploadprogress'), 'temp=1', cbUpload );
+}
+
+function cbUpload( status, fileid, errors ) {
+ if( status=='done' ) {
+ $("#uploadedfileid").val( fileid );
+ $('#fileToUpload').prop('disabled',true);
+ $("#process_images").show();
+ } else {
+ var errMsgs = [ __("Error code 0 not used"), __("File already exists"), __("Directory is not writeable"), __("Root directory for uploads not defined"), __("Temporary directory for uploads not defined") ];
+ var errCode = errors[$('#fileToUpload').prop('files')[0].name].code;
+ $("#fileuploadstatus").hide();
+ $("#fileuploadfailed").show();
+ $("#fileuploadfailed").text( __("Upload status: ") +
+ ( status=='failed'? __("Failed") + " - (" + errCode + ") " + errMsgs[errCode]:
+ ( status=='denied'? __("Denied"): status ))
+ );
+ $("#processfile").hide();
+ }
+}
+
+function AjaxUpload ( formData, progressbar, xtra, callback ) {
+ var xhr= new XMLHttpRequest();
+ var url= '/cgi-bin/koha/tools/upload-file.pl?' + xtra;
+ progressbar.val( 0 );
+ progressbar.next('.fileuploadpercent').text( '0' );
+ xhr.open('POST', url, true);
+ xhr.upload.onprogress = function (e) {
+ var p = Math.round( (e.loaded/e.total) * 100 );
+ progressbar.val( p );
+ progressbar.next('.fileuploadpercent').text( p );
+ };
+ xhr.onload = function () {
+ var data = JSON.parse( xhr.responseText );
+ if( data.status == 'done' ) {
+ progressbar.val( 100 );
+ progressbar.next('.fileuploadpercent').text( '100' );
+ }
+ callback( data.status, data.fileid, data.errors );
+ };
+ xhr.onerror = function () {
+ // Probably only fires for network failure
+ alert(__("An error occurred while uploading.") );
+ };
+ xhr.send( formData );
+ return xhr;
+}
+
+// output file information
+function ParseFile(file) {
+ var valid = true;
+ if (file.type.indexOf("image") == 0) {
+ /* If the uploaded file is an image, show it */
+ var reader = new FileReader();
+ reader.onload = function(e) {
+ Output(
+ '
' + ); + $("#biblionumber_entry").hide(); + $("#image").prop("checked", false ); + $("#zipfile").prop("checked", true ); + } else { + Output( + '
" + __("File name:") + " " + file.name + "
" +
+ __("File type:") + " " + file.type + "
" +
+ __("File size:") + " " + convertSize( file.size ) + ""
+ );
+ return valid;
+}
+
+// output information
+function Output(msg) {
+ var m = document.getElementById("messages");
+ m.innerHTML = msg + m.innerHTML;
+}
+
+// Bytes conversion
+function convertSize(size) {
+ var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+ if (size == 0) return '0 Byte';
+ var i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
+ return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
+}
+
+function removeLocalImage(imagenumber) {
+ var thumbnail = $("#imagenumber-" + imagenumber );
+ var copy = thumbnail.html();
+ thumbnail.find("img").css("opacity", ".2");
+ thumbnail.find("a.remove").html("");
+
+ $.ajax({
+ url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
+ success: function(data) {
+ $(data).each( function() {
+ if ( this.deleted == 1 ) {
+ location.href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber;
+ } else {
+ thumbnail.html( copy );
+ alert(__("An error occurred on deleting this image"));
+ }
+ });
+ },
+ error: function() {
+ thumbnail.html( copy );
+ alert(__("An error occurred on deleting this image"));
+ }
+ });
+}
+
+function resetForm(){
+ $("#uploadpanel,#upload_options,#process_images").hide();
+ $("#click_to_select").show();
+}
--