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