FileUpload

Das FileUpload Control erlaubt es Dateien an eine URL zu übertragen. Als Basis kommt das Plugin jQuery-File-Upload zum Einsatz. Das Fileupload-Controll wird über den Konstruktor Alvine.Package.UI.Dialog.FileUpload(options) erstellt.

Über die Eigenschaft accept-file-types können die erlaubten Dateitypen festgelegt werden. Das kann entweder über eine Zeichenkette, oder ein Array erfolgen. Mit */* können alle Dateien erlaubt werden. Alle Bilder können über image/* eingeschränkt werden.

Bei nicht erlaubten Dateien wird eine Meldung mit dem Typund dem Prefix i18n:bootstrap.form.fileupload.error.allowedonly. an den Host übergeben (notifyInfo).

Für image/* wird die Meldung i18n:bootstrap.form.fileupload.error.allowedonly.image-all ausgegeben. Für ['image/gif', 'image/wepm', 'image/png'] wird die Meldung i18n:bootstrap.form.fileupload.error.allowedonly.image-gif-image-png-image-wepm, usw.

Über die Option functions kann die Drag/Drop und die Copy/Paste Funktion aktiviert werden.

Die einzelnen Optionen können der folgenden Tabelle entnommen werden.

Schlüssel Beschreibung Standard Beispiel
accept-file-types Akzeptierter MimeType (String oder Array) image/png,image/gif image/*
accept-response-type Akzeptierter Antworttyp json text/html
add-handler Handler der beim Hinzufügen einer Datei aufgerufen wird. function -/-
autoupload Automatisches Upload starten true true
card-class CSS-Klasse eines Eintrages card card
class CSS-Klasse container-fluid d-none
done-handler Handler der nach dem Übertragen einer Datei aufgerufen wird. function -/-
drop-selector Selector für das Drag/Drop-Element. #Zufällige ID[data-function*="dropzone"] #dragdrop
dropfile-here-class CSS-Klasse Des Infortextes text-center my-4 my-2
fail-handler Handler der bei einem Fehler einer Datei aufgerufen wird. function -/-
fileinput-selector Selector des File-Input-Elements input.fileinputclass
functions Verfügbare Funktionen des Controls (Mgögliche Werte: dropzone pastzone) dropzone pastzone dropzone
http-method Übertragungsmethode (put oder post) post post
i18n-dropfilehere Text und Icon des Infotextes <i class="fal fa-cloud-upload-alt fa-2x"></i><br>Dateien hier ablegen Hierher Datei kopieren
id ID Zufällige ID abcdef
limit-concurrent-uploads Anzahl der gleichzeitigen Requests 3 2
limit-multifile-uploads Anzahl der Dateien die mit einem XHR-Request übertragen werden 3 3
limit-multifile-uploadsize Größe des maximalen Uploads in Bytes 100 250
limit-multifile-uploadsize-overhead Overhead in Multipart-Übertragungen 512 1024
name Name des Parameters bei der Übertragung des Bildes an den Server Zufällige ID images
paste-selector Selector für das Copy-/Past-Element #Zufällige ID[data-function*="pastzone"] #copypaste
progress-handler Handler der während der Übertragung einer Datei aufgerufen wird. function -/-
progressall-handler Handler der für alle Uploads aufgerufen wird. function -/-
sequential-uploads Alle Dateien nacheinander übertragen false true
single-file-uploads Einzelnen Dateiupload true true
upload-multipart Multipart true true
with-credentials Übertragung von Zugangsdaten und -token true true

Objektreferenz

FileUpload(url, options)

Erstellen eines neuen Controls


Parameter-Liste

url (URL, string)

URL des Servers für den Dateiupload

options (Object)

Optionen (siehe Tabelle)

Rückgabewert

Neues File-Upload-Control

FileUpload.addHandler(event, data)

Handler hinzufügen


Parameter-Liste

event (Event)

Event

data (Object)

Datenstruktur des Files

Rückgabewert

Undefined

FileUpload.doneHandler(event, data)

Standardhandler für die Bearbeitung der fertigen Übertragung


Parameter-Liste

event (Event)

Event

data (Object)

Datenstruktur des Files

Rückgabewert

Undefined

FileUpload.failHandler(event, data)

Standardhandler für die Fehlerbehandlung


Parameter-Liste

event (Event)

Event

data (Object)

Datenstruktur des Files

Rückgabewert

Undefined

FileUpload.progressHandler(event, data)

Standardhandler für die Bearbeitung des Fortschritt


Parameter-Liste

event (Event)

Event

data (Object)

Datenstruktur des Files

Rückgabewert

Undefined

FileUpload.progressAllHandler(event, data)

Standardhandler für die Bearbeitung des Gesamtfortschrittes


Parameter-Liste

event (Event)

Event

data (Object)

Datenstruktur des Files

Rückgabewert

Undefined

FileUpload.getFiles()

Alle dem Control zugewiesenen Dateien holen


Parameter-Liste

Rückgabewert

Alvine.Types.Map

FileUpload.addFile(file, source, xHr)

Datei programmtechnisch hinzufügen


Parameter-Liste

file (File)

Hijnzuzufügendes Datei-Objekt

source (String)

Daten des Objektes

xHr (Xhr)

XHR-Objekt

Rückgabewert

FileUpload-Objekt