Koha/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt
Jonathan Druart c3f2993bdb Bug 26145: Add the ability to upload a cover image per item
This patchset adds the ability to attach cover images at item level.
This commit message will explain the different patches that are
following.

The main idea is to have cover images for a given item. This is useful
for a bibliographic record linked with a subscription. Each item could
have the cover image for the serial numbers.

In this first patch there is a limitation to allow only 1 cover per
item, but a later patch will remove it. That way we will take advantage
of the recent work done to display nicely cover images (bug 25031), and
reuse it in this development (staff interface only).

In order to use a flexible and robust code, the legacy C4 code
(C4::Images) has been moved to Koha::CoverImages. Also the DB table
biblioimages has been renamed cover_images.

Test plan (for the whole patch set):
0. Turn off AllowMultipleCovers
1. Create a new bibliographic record and items
2. Attach a cover image to the bibliographic record
3. In the item list of the bibliographic detail page, you will notice a
new "Upload image" action. Select it
4. Select an image
=> Notice the new column in the item table
5. Upload another image
=> You cannot upload 2 images, you are going to replace the existing one
6. Turn on AllowMultipleCovers
7. Attach another image to the image
=> Notice the 2 images are displayed nicely, with navigation controls
8. Confirm you can view an image if you click on it and you can delete it
9. Test the OPAC view now
=> Cover image for items are displayed in the table, there is no
navigation controls here however.

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2020-10-12 11:28:41 +02:00

171 lines
7.6 KiB
Text

[% USE raw %]
[% USE Asset %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Koha &rsaquo; Tools &rsaquo; Upload images</title>
[% INCLUDE 'doc-head-close.inc' %]
<style>
#fileuploadstatus,#fileuploadfailed,#jobpanel,#jobstatus,#jobfailed { display : none; }
</style>
</head>
<body id="tools_upload-images" class="tools">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'cat-search.inc' %]
<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; [% IF ( uploadimage ) %]<a href="/cgi-bin/koha/tools/upload-cover-image.pl">Upload local cover image</a> &rsaquo; Upload results[% ELSE %]Upload local cover image[% END %]</div>
<div class="main container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-push-2">
<main>
<h1>Upload local cover image</h1>
[% IF ( uploadimage ) %]
<p>Image upload results :</p>
<ul>
<li>[% total | html %] images found</li>
[% IF ( error ) %]
<div class="dialog alert">
[% IF ( error == 'UZIPFAIL' ) %]<p><strong>Failed to unzip archive.<br />Please ensure you are uploading a valid zip file and try again.</strong></p>
[% ELSIF ( error == 'OPNLINK' ) %]<p><strong>Cannot open folder index (idlink.txt or datalink.txt) to read.<br />Please verify that it exists.</strong></p>
[% ELSIF ( error == 'OPNIMG' ) %]<p><strong>Cannot process file as an image.<br />Please ensure you only upload GIF, JPEG, PNG, or XPM images.</strong></p>
[% ELSIF ( error == 'DELERR' ) %]<p><strong>Unrecognized or missing field delimiter.<br />Please verify that you are using either a single quote or a tab.</strong></p>
[% ELSIF ( error == 'DBERR' ) %]<p><strong>Unable to save image to database.</strong></p>
[% ELSE %]<p><strong>An unknown error has occurred.<br />Please review the error log for more details.</strong></p>[% END %]
</div>
</li>
[% END %]
<li><a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]">View final record</a></li>
<li><a href="/cgi-bin/koha/tools/tools-home.pl">Back</a></li>
</ul>
<hr />
[% END %]
<ul>
<li>Select an image file or ZIP file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
</ul>
<form method="post" action="/cgi-bin/koha/tools/upload-cover-image.pl" id="uploadfile" enctype="multipart/form-data">
<fieldset class="rows" >
<legend>Upload images</legend>
<ol>
<li>
<div id="fileuploadform">
<label for="fileToUpload" class="required">Select the file to upload: </label>
<input type="file" id="fileToUpload" name="fileToUpload" required="required" class="required" />
<span class="required">Required</span>
</div> </li>
</ol>
<fieldset class="action"><button class="submit btn btn-default">Upload file</button></fieldset>
</fieldset>
<div id="uploadpanel">
<div id="fileuploadstatus" class="progress_panel">Upload progress:
<progress max="100" value="0" id="fileuploadprogress">
</progress>
<span class="fileuploadpercent">0</span>%
</div>
<div id="fileuploadfailed"></div>
</div>
</form>
<form method="post" id="processfile" action="/cgi-bin/koha/tools/upload-cover-image.pl" enctype="multipart/form-data">
<fieldset class="rows">
<input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
<input type="hidden" name="runinbackground" id="runinbackground" value="" />
<input type="hidden" name="completedJobID" id="completedJobID" value="" />
</fieldset>
<fieldset class="rows">
<legend>File type</legend>
<ol>
[% UNLESS itemnumber %]
<li class="radio">
[% IF (filetype != 'image' ) %]<input type="radio" id="zipfile" name="filetype" value="zip" checked="checked" />[% ELSE %]<input type="radio" id="zipfile" name="filetype" value="zip" />[% END %]
<label for="zipfile">ZIP file</label>
</li>
<li class="radio">
[% IF (filetype == 'image' ) %]<input type="radio" id="image" name="filetype" value="image" checked="checked" />[% ELSE %]<input type="radio" id="image" name="filetype" value="image" />[% END %]
<label for="image">Image file</label>
</li>
<li class="radio">
[% IF ( filetype == 'image' ) %]<span id="bibnum">[% ELSE %]<span id="bibnum" style="display: none">[% END %]<label for="biblionumber">Enter cover biblionumber: </label><input type="text" id="biblionumber" name="biblionumber" value="[% biblionumber | html %]" size="15" /></span>
</li>
[% ELSE %]
<label for="itemnumber">Cover itemnumber: </label>
<input type="text" id="itemnumber" name="itemnumber" value="[% itemnumber | html %]" size="15" readonly="readonly" />
<input type="hidden" name="filetype" value="image" />
[% END %]
</ol>
</fieldset>
<fieldset class="rows">
<legend>Options</legend>
<ol>
<li class="checkbox">
[% IF AllowMultipleCovers == 0 OR itemnumber%]
<input type="checkbox" id="replace" name="replace" checked="checked" disabled="disabled" value="1" />
[% ELSE %]
<input type="checkbox" id="replace" name="replace" value="1" />
[% END %]
<label for="replace">Replace existing covers</label>
</li>
</ol>
</fieldset>
<fieldset class="action"><button type="submit" class="btn btn-default btn-sm">Process images</button></fieldset>
</form>
</main>
</div> <!-- /.col-sm-10.col-sm-push-2 -->
<div class="col-sm-2 col-sm-pull-10">
<aside>
[% INCLUDE 'tools-menu.inc' %]
</aside>
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
</div> <!-- /.row -->
[% MACRO jsinclude BLOCK %]
[% Asset.js("js/tools-menu.js") | $raw %]
[% Asset.js("js/file-upload.js") | $raw %]
<script>
function StartUpload() {
if( $('#fileToUpload').prop('files').length == 0 ) return;
$('#uploadform button.submit').prop('disabled',true);
$("#fileuploadstatus").show();
$("#uploadedfileid").val('');
xhr= AjaxUpload( $('#fileToUpload'), $('#fileuploadprogress'), 'temp=1', cbUpload );
}
function cbUpload( status, fileid, errors ) {
if( status=='done' ) {
$("#uploadedfileid").val( fileid );
$('#fileToUpload').prop('disabled',true);
$("#processfile").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();
}
}
$(document).ready(function(){
$("#processfile").hide();
$("#zipfile").click(function(){
$("#bibnum").hide();
});
$("#image").click(function(){
$("#bibnum").show();
});
$("#uploadfile").validate({
submitHandler: function(form) {
StartUpload();
return false;
}
});
});
</script>
[% END %]
[% INCLUDE 'intranet-bottom.inc' %]