Datei Upload mit dem 2018.06 Release

Für das 2018.06 Release habe ich 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 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
4

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