2018.06 2019.06

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. in diese wird die aktuelle Variante beschrieben. Ggf. könnten noch altere 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitEntries#Browser_compatibility) 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 die MyCoRe-Webtools einbinden. In die Seite mit dem Upload muss man folgende Skripte einbinden

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 die Datei abgelegt werden muss.

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
.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}&amp;method=formBasedUpload&amp;cancelUrl={cancelUrl}&amp;parentObjectID={$parentObjectID}&amp;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.