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

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt (-225 / +2 lines)
Lines 309-540 Link Here
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
(-)a/koha-tmpl/intranet-tmpl/prog/js/upload-images.js (-1 / +228 lines)
Line 0 Link Here
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
}

Return to bug 30223