Attachment #131346 for bug #30223

View | Details | Raw Unified | Return to bug 30223
Collapse All | Expand All




        var interface = "[% interface | html %]";
        var theme = "[% theme | html %]";
        var biblionumber = "[% biblionumber | html %]";
    </script>
    [% Asset.js("js/upload-images.js") | $raw %]
                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 <input type="file"> 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(
                        '<p><img class="cover_preview" src="' + e.target.result + '" /></p>'
                    );
                }
                $("#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(
                    '<p><i class="fa fa-file-archive-o" aria-hidden="true"></i></p>'
                );
                $("#biblionumber_entry").hide();
                $("#image").prop("checked", false );
                $("#zipfile").prop("checked", true );
            } else {
                Output(
                    '<div class="dialog alert"><strong>' + _("Error:") + ' </strong> ' + _("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '</div>'
                );
                valid = false;
                resetForm();
            }

            Output(
                    "<p>" + _("File name:") + " <strong>" + file.name + "</strong><br />" +
                    _("File type:") + " <strong>" + file.type + "</strong><br />" +
                    _("File size:") + " <strong>" + convertSize( file.size ) + "</strong>"
            );
            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("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");

            $.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"));
                }
            });
        }

        function resetForm(){
            $("#uploadpanel,#upload_options,#process_images").hide();
            $("#click_to_select").show();
        }
    </script>
[% END %]





/* 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 <input type="file"> 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(
                '<p><img class="cover_preview" src="' + e.target.result + '" /></p>'
            );
        };
        $("#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(
            '<p><i class="fa fa-file-archive-o" aria-hidden="true"></i></p>'
        );
        $("#biblionumber_entry").hide();
        $("#image").prop("checked", false );
        $("#zipfile").prop("checked", true );
    } else {
        Output(
            '<div class="dialog alert"><strong>' + __("Error:") + ' </strong> ' + __("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '</div>'
        );
        valid = false;
        resetForm();
    }

    Output(
        "<p>" + __("File name:") + " <strong>" + file.name + "</strong><br />" +
            __("File type:") + " <strong>" + file.type + "</strong><br />" +
            __("File size:") + " <strong>" + convertSize( file.size ) + "</strong>"
    );
    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("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");

    $.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();
}

Return to bug 30223

Lines 309-540 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt (-225 / +2 lines)
309	var interface = "[% interface \| html %]";	309	var interface = "[% interface \| html %]";
310	var theme = "[% theme \| html %]";	310	var theme = "[% theme \| html %]";
311	var biblionumber = "[% biblionumber \| html %]";	311	var biblionumber = "[% biblionumber \| html %]";
312	$(document).ready(function(){	312	</script>
313	$("html").on("drop", function(e) {	313	[% Asset.js("js/upload-images.js") \| $raw %]
314	e.preventDefault();
315	e.stopPropagation();
316	});
317
318	$("#zipfile").click(function(){
319	$("biblionumber_entry").hide();
320	});
321
322	$("#image").click(function(){
323	$("#biblionumber_entry").show();
324	});
325
326	$("#uploadfile").validate({
327	submitHandler: function(form) {
328	StartUpload();
329	return false;
330	}
331	});
332
333	$()
334
335	$("#filedrag").on("click", ".cancel_image", function(){
336	$("#click_to_select").show();
337	$("#messages").html("");
338	$("#fileToUpload").prop( "disabled", false );
339	$("#process_images, #fileuploadstatus").hide();
340	return false;
341	}).on("click", ".save_image", function(e){
342	e.preventDefault();
343	$("#processfile").submit();
344	});
345
346	$("html").on("drop", function(e) {
347	/* Prevent the default browser action when image is dropped */
348	/* i.e. don't navigate to a view of the local image */
349	e.preventDefault();
350	e.stopPropagation();
351	});
352
353	$('#filedrag').on('dragenter dragover dragleave', function (e) {
354	/* Handle various drag and drop events in "Drop files" area */
355	/* If event type is "dragover," add the "hover" class */
356	/* otherwise set no class name */
357	e.stopPropagation();
358	e.preventDefault();
359	e.target.className = (e.type == "dragover" ? "hover" : "");
360	});
361
362	$("#filedrag").click(function(){
363	/* Capture a click inside the drag and drop area */
364	/* Trigger the <input type="file"> action */
365	$("#fileToUpload").click();
366	});
367
368	// Drop
369	$('#filedrag').on('drop', function (e) {
370	e.stopPropagation();
371	e.preventDefault();
372	prepUpLoad(e);
373	});
374
375	// file selected
376	$("#fileToUpload").change(function(){
377	prepUpLoad();
378	});
379
380	$('.thumbnails .remove').on("click", function(e) {
381	e.preventDefault();
382	var result = confirm(_("Are you sure you want to delete this cover image?"));
383	var imagenumber = $(this).data("coverimg");
384	if ( result == true ) {
385	removeLocalImage(imagenumber);
386	}
387	});
388	});
389
390	function prepUpLoad( event ){
391	$("#click_to_select,#upload_results").hide();
392	$("#messages").html("");
393	if( event ){
394	var file = event.originalEvent.dataTransfer.files[0];
395	} else {
396	var file = $('#fileToUpload')[0].files[0];
397	}
398
399	$("#fileuploadstatus, #upload_options").show();
400	var fd = new FormData();
401	fd.append('file', file);
402	if( ParseFile( file ) ){
403	StartUpload( fd );
404	}
405	}
406
407	function StartUpload( fd ) {
408	$('#uploadform button.submit').prop('disabled',true);
409	$("#uploadedfileid").val('');
410	xhr= AjaxUpload( fd, $('#fileuploadprogress'), 'temp=1', cbUpload );
411	}
412	function cbUpload( status, fileid, errors ) {
413	if( status=='done' ) {
414	$("#uploadedfileid").val( fileid );
415	$('#fileToUpload').prop('disabled',true);
416	$("#process_images").show();
417	} else {
418	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") ];
419	var errCode = errors[$('#fileToUpload').prop('files')[0].name].code;
420	$("#fileuploadstatus").hide();
421	$("#fileuploadfailed").show();
422	$("#fileuploadfailed").text( _("Upload status: ") +
423	( status=='failed'? _("Failed") + " - (" + errCode + ") " + errMsgs[errCode]:
424	( status=='denied'? _("Denied"): status ))
425	);
426	$("#processfile").hide();
427	}
428	}
429
430	function AjaxUpload ( formData, progressbar, xtra, callback ) {
431	var xhr= new XMLHttpRequest();
432	var url= '/cgi-bin/koha/tools/upload-file.pl?' + xtra;
433	progressbar.val( 0 );
434	progressbar.next('.fileuploadpercent').text( '0' );
435	xhr.open('POST', url, true);
436	xhr.upload.onprogress = function (e) {
437	var p = Math.round( (e.loaded/e.total) * 100 );
438	progressbar.val( p );
439	progressbar.next('.fileuploadpercent').text( p );
440	}
441	xhr.onload = function (e) {
442	var data = JSON.parse( xhr.responseText );
443	if( data.status == 'done' ) {
444	progressbar.val( 100 );
445	progressbar.next('.fileuploadpercent').text( '100' );
446	}
447	callback( data.status, data.fileid, data.errors );
448	}
449	xhr.onerror = function (e) {
450	// Probably only fires for network failure
451	alert(_("An error occurred while uploading.") );
452	}
453	xhr.send( formData );
454	return xhr;
455	}
456
457	// output file information
458	function ParseFile(file) {
459	var valid = true;
460	if (file.type.indexOf("image") == 0) {
461	/* If the uploaded file is an image, show it */
462	var reader = new FileReader();
463	reader.onload = function(e) {
464	Output(
465	'<p><img class="cover_preview" src="' + e.target.result + '" /></p>'
466	);
467	}
468	$("#biblionumber_entry").show().find("input,label").addClass("required").prop("required", true );
469	$("#image").prop("checked", true ).change();
470	$("#zipfile").prop("checked", false );
471	reader.readAsDataURL(file);
472	} else if( file.type.indexOf("zip") > 0) {
473	Output(
474	'<p><i class="fa fa-file-archive-o" aria-hidden="true"></i></p>'
475	);
476	$("#biblionumber_entry").hide();
477	$("#image").prop("checked", false );
478	$("#zipfile").prop("checked", true );
479	} else {
480	Output(
481	'<div class="dialog alert"><strong>' + _("Error:") + ' </strong> ' + _("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '</div>'
482	);
483	valid = false;
484	resetForm();
485	}
486
487	Output(
488	"<p>" + _("File name:") + " <strong>" + file.name + "</strong><br />" +
489	_("File type:") + " <strong>" + file.type + "</strong><br />" +
490	_("File size:") + " <strong>" + convertSize( file.size ) + "</strong>"
491	);
492	return valid;
493	}
494
495	// output information
496	function Output(msg) {
497	var m = document.getElementById("messages");
498	m.innerHTML = msg + m.innerHTML;
499	}
500
501	// Bytes conversion
502	function convertSize(size) {
503	var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
504	if (size == 0) return '0 Byte';
505	var i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
506	return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
507	}
508
509	function removeLocalImage(imagenumber) {
510	var thumbnail = $("#imagenumber-" + imagenumber );
511	var copy = thumbnail.html();
512	thumbnail.find("img").css("opacity", ".2");
513	thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
514
515	$.ajax({
516	url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
517	success: function(data) {
518	$(data).each( function() {
519	if ( this.deleted == 1 ) {
520	location.href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber;
521	} else {
522	thumbnail.html( copy );
523	alert(_("An error occurred on deleting this image"));
524	}
525	});
526	},
527	error: function(data) {
528	thumbnail.html( copy );
529	alert(_("An error occurred on deleting this image"));
530	}
531	});
532	}
533		314
534	function resetForm(){
535	$("#uploadpanel,#upload_options,#process_images").hide();
536	$("#click_to_select").show();
537	}
538	</script>	315	</script>
539	[% END %]	316	[% END %]
540		317

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/upload-images.js (-1 / +228 lines)
0	-	1	/* global __ interface theme biblionumber */
		2
		3	$(document).ready(function(){
		4	$("html").on("drop", function(e) {
		5	e.preventDefault();
		6	e.stopPropagation();
		7	});
		8
		9	$("#zipfile").on("click", function(){
		10	$("biblionumber_entry").hide();
		11	});
		12
		13	$("#image").on("click", function(){
		14	$("#biblionumber_entry").show();
		15	});
		16
		17	$("#uploadfile").validate({
		18	submitHandler: function() {
		19	StartUpload();
		20	return false;
		21	}
		22	});
		23
		24	$("#filedrag").on("click", ".cancel_image", function(){
		25	$("#click_to_select").show();
		26	$("#messages").html("");
		27	$("#fileToUpload").prop( "disabled", false );
		28	$("#process_images, #fileuploadstatus").hide();
		29	return false;
		30	}).on("click", ".save_image", function(e){
		31	e.preventDefault();
		32	$("#processfile").submit();
		33	});
		34
		35	$("html").on("drop", function(e) {
		36	/* Prevent the default browser action when image is dropped */
		37	/* i.e. don't navigate to a view of the local image */
		38	e.preventDefault();
		39	e.stopPropagation();
		40	});
		41
		42	$('#filedrag').on('dragenter dragover dragleave', function (e) {
		43	/* Handle various drag and drop events in "Drop files" area */
		44	/* If event type is "dragover," add the "hover" class */
		45	/* otherwise set no class name */
		46	e.stopPropagation();
		47	e.preventDefault();
		48	e.target.className = (e.type == "dragover" ? "hover" : "");
		49	});
		50
		51	$("#filedrag").on("click", function(){
		52	/* Capture a click inside the drag and drop area */
		53	/* Trigger the <input type="file"> action */
		54	$("#fileToUpload").click();
		55	});
		56
		57	// Drop
		58	$('#filedrag').on('drop', function (e) {
		59	e.stopPropagation();
		60	e.preventDefault();
		61	prepUpLoad(e);
		62	});
		63
		64	// file selected
		65	$("#fileToUpload").on("change", function(){
66	prepUpLoad();
67	});
68
69	$('.thumbnails .remove').on("click", function(e) {
70	e.preventDefault();
71	var result = confirm(__("Are you sure you want to delete this cover image?"));
72	var imagenumber = $(this).data("coverimg");
73	if ( result == true ) {
74	removeLocalImage(imagenumber);
75	}
76	});
77	});
78
79	function prepUpLoad( event ){
80	$("#click_to_select,#upload_results").hide();
81	$("#messages").html("");
82	var file;
83	if( event ){
84	file = event.originalEvent.dataTransfer.files[0];
85	} else {
86	file = $('#fileToUpload')[0].files[0];
87	}
88
89	$("#fileuploadstatus, #upload_options").show();
90	var fd = new FormData();
91	fd.append('file', file);
92	if( ParseFile( file ) ){
93	StartUpload( fd );
94	}
95	}
96
97	function StartUpload( fd ) {
98	$('#uploadform button.submit').prop('disabled',true);
99	$("#uploadedfileid").val('');
100	AjaxUpload( fd, $('#fileuploadprogress'), 'temp=1', cbUpload );
101	}
102
103	function cbUpload( status, fileid, errors ) {
104	if( status=='done' ) {
105	$("#uploadedfileid").val( fileid );
106	$('#fileToUpload').prop('disabled',true);
107	$("#process_images").show();
108	} else {
109	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") ];
110	var errCode = errors[$('#fileToUpload').prop('files')[0].name].code;
111	$("#fileuploadstatus").hide();
112	$("#fileuploadfailed").show();
113	$("#fileuploadfailed").text( __("Upload status: ") +
114	( status=='failed'? __("Failed") + " - (" + errCode + ") " + errMsgs[errCode]:
115	( status=='denied'? __("Denied"): status ))
116	);
117	$("#processfile").hide();
118	}
119	}
120
121	function AjaxUpload ( formData, progressbar, xtra, callback ) {
122	var xhr= new XMLHttpRequest();
123	var url= '/cgi-bin/koha/tools/upload-file.pl?' + xtra;
124	progressbar.val( 0 );
125	progressbar.next('.fileuploadpercent').text( '0' );
126	xhr.open('POST', url, true);
127	xhr.upload.onprogress = function (e) {
128	var p = Math.round( (e.loaded/e.total) * 100 );
129	progressbar.val( p );
130	progressbar.next('.fileuploadpercent').text( p );
131	};
132	xhr.onload = function () {
133	var data = JSON.parse( xhr.responseText );
134	if( data.status == 'done' ) {
135	progressbar.val( 100 );
136	progressbar.next('.fileuploadpercent').text( '100' );
137	}
138	callback( data.status, data.fileid, data.errors );
139	};
140	xhr.onerror = function () {
141	// Probably only fires for network failure
142	alert(__("An error occurred while uploading.") );
143	};
144	xhr.send( formData );
145	return xhr;
146	}
147
148	// output file information
149	function ParseFile(file) {
150	var valid = true;
151	if (file.type.indexOf("image") == 0) {
152	/* If the uploaded file is an image, show it */
153	var reader = new FileReader();
154	reader.onload = function(e) {
155	Output(
156	'<p><img class="cover_preview" src="' + e.target.result + '" /></p>'
157	);
158	};
159	$("#biblionumber_entry").show().find("input,label").addClass("required").prop("required", true );
160	$("#image").prop("checked", true ).change();
161	$("#zipfile").prop("checked", false );
162	reader.readAsDataURL(file);
163	} else if( file.type.indexOf("zip") > 0) {
164	Output(
165	'<p><i class="fa fa-file-archive-o" aria-hidden="true"></i></p>'
166	);
167	$("#biblionumber_entry").hide();
168	$("#image").prop("checked", false );
169	$("#zipfile").prop("checked", true );
170	} else {
171	Output(
172	'<div class="dialog alert"><strong>' + __("Error:") + ' </strong> ' + __("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '</div>'
173	);
174	valid = false;
175	resetForm();
176	}
177
178	Output(
179	"<p>" + __("File name:") + " <strong>" + file.name + "</strong><br />" +
180	__("File type:") + " <strong>" + file.type + "</strong><br />" +
181	__("File size:") + " <strong>" + convertSize( file.size ) + "</strong>"
182	);
183	return valid;
184	}
185
186	// output information
187	function Output(msg) {
188	var m = document.getElementById("messages");
189	m.innerHTML = msg + m.innerHTML;
190	}
191
192	// Bytes conversion
193	function convertSize(size) {
194	var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
195	if (size == 0) return '0 Byte';
196	var i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
197	return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
198	}
199
200	function removeLocalImage(imagenumber) {
201	var thumbnail = $("#imagenumber-" + imagenumber );
202	var copy = thumbnail.html();
203	thumbnail.find("img").css("opacity", ".2");
204	thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
205
206	$.ajax({
207	url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
208	success: function(data) {
209	$(data).each( function() {
210	if ( this.deleted == 1 ) {
211	location.href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber;
212	} else {
213	thumbnail.html( copy );
214	alert(__("An error occurred on deleting this image"));
215	}
216	});
217	},
218	error: function() {
219	thumbnail.html( copy );
220	alert(__("An error occurred on deleting this image"));
221	}
222	});
223	}
224
225	function resetForm(){
226	$("#uploadpanel,#upload_options,#process_images").hide();
227	$("#click_to_select").show();
228	}