FileUpload in MyCoRe

Der Abschnitt beschreibt die Möglichkeiten des in MyCoRe integrierten Datei-Uploads.

FileUpload mit MyCoRe

MyCoRe hat über die Jahre immer wieder neuere Lösungen für den File-Upload entwickelt. Auf dieser Seite wird die aktuelle Variante beschrieben. Ggf. könnten noch ältere Varianten eingesetzt werden, jedoch sollten diese mittelfristig ersetzt werden.

Integration in die Web-Seite

Für das 2018.06 Release wurde einen neuen Datei Upload entwickelt. Dieser basiert auf der webkitEntry-API und wird von Firefox, Chrome und Edge unterstützt. Für alle anderen Browser gibt es einen Fallback. Um den neuen Upload zu benutzen muss man das MyCoRe-Webtools Maven-Modul einbinden. In der Seite mit dem Upload muss man folgende Skripte und CSS-Dateien laden.

1
2
3

 <script src="{$WebApplicationBaseURL}modules/webtools/upload/js/upload-api.js"></script>
 <script src="{$WebApplicationBaseURL}modules/webtools/upload/js/upload-gui.js"></script>
 <link rel="stylesheet" type="text/css" href="{$WebApplicationBaseURL}modules/webtools/upload/css/upload-gui.css" />

Außerdem versucht das Skript aus der globalen Javascript-Variable die Eigenschaft **mycoreUploadSettings** auszulesen, also definiert man diese folgendermaßen:

1
2
3
4
5

 <script>
   window["mycoreUploadSettings"] = {
     webAppBaseURL:"<xsl:value-of select='$WebApplicationBaseURL' />"
   }
 </script>

Das Script ist jetzt fertig eingebunden und konfiguriert. Jetzt muss ein Bereich (z.B. div-Element) bestimmt werden, in dem eine Datei zum Upload abgelegt werden kann.

1
2
3
4
5
6
7

 <div class="file-upload-box well" data-upload-object="{$objID}" data-upload-target="/">
   <i class="fa fa-upload"></i>
   <xsl:value-of disable-output-escaping="yes" select="concat(' ', i18n:translate('upload.drop.derivate'))"/>
 </div>
 <script>
   mycore.upload.enable(document.querySelector(".file-upload-box").parentElement);
 </script>

Das Attribut data-upload-object bestimmt in welches MyCoRe-Objekt die Dateien geladen werden sollen, entweder ein Derivat oder ein Objekt zu dem automatisch ein Derivat erstellt wird. Das Attribut data-upload-target bestimmt in welchen Ordner die Dateien hochgeladen werden. Die Script-Zeile am Ende aktiviert dann den Fileupload für das Div-Element.

Die Übersetzung für den Text in der Box ist wie folgt definiert:

1

 mir.upload.drop.derivate=Dateien/Verzeichnisse zum Anhängen ablegen oder <a class="mcr-upload-show">durchsuchen</a>

In der Übersetzung steckt ein Link für den Fallback für Browser die WebKitEntry nicht unterstützen. Wichtig ist das dieser die Klasse mcr-upload-show hat.

Damit der Benutzer weiß das er die Dateien fallen lassen kann (Drag&Drop) kann man die Box beim Dragover noch färben. Dafür kann man folgendes CSS nutzen:

1
2
3
4

.dragover {
  background-color:LightBlue ;
  color:white;
 }

Das MCRUploadViaFormServlet

Dieses Servlet nimmt Daten aus einem Upload Formular entgegen und legt die digitalen Objekte im MyCoRe-System als Derivate ab. Um ganze Verzeichnisse abzulegen, sind diese in ein Zip-File zu packen. Selbiges wird dann automatisch ausgepackt. Um Zip-Files direkt abzulegen ist unten stehendes Property zu setzten.

Syntax des Servlet-Aufrufes:

1

{$WebApplicationBaseURL}servlets/MCRUploadViaFormServlet?uploadId={$uploadId}&method=formBasedUpload&cancelUrl={cancelUrl}&parentObjectID={$parentObjectID}&derivateID={$derivateID}

• uploadId - eine eindeutige ID für den Upload. Diese wird beim Aufruf der Upload-Seite generiert.
• method - hier ist derzeit nur die Methode formBasedUpload definiert.
• cancelURL - die URL für den Cancel Button.
• parentObjectID - Die MyCoRe ID des Objektes.
• derivateID - Die MyCoRe ID des zugehörigen Derivates.
• filename[] - liste der Einzeldateien.

Properties:

• MCR.FileUpload.DecompressZip=[true|false] - true bedeutet das Dekomprimieren der Zip-Dateien, false unterdrückt das.

Post processs

Der MCRPostUploadFileProcessor ermöglicht es, Verarbeitung nach dem Upload zu ergänzen. Das wirkt sich dann aber wirklich nur auf den Upload und nicht auf den Derivat-Import aus! Man kann die Klassen einfach kommagetrennt in das folgende Property schreiben: MCR.MCRUploadHandlerIFS.FileProcessors.

1

 MCR.MCRUploadHandlerIFS.FileProcessors=org.mycore.mets.tools.MCRGoobiMetsPostUploadProcessor