Fileupload einrichten

Datei und Struktur herrichten

Die Benötigkte Programmbibliothek findest du auf unserem Server im Ordner ENTWIKCLUNG/jQuery/FileUpload. Dort kopierst du dir die Datei jquery.awesomeFileUpload.js raus. Danach platzierst du die Datei in der Struktur deines Projektes. In einem Vision Projekt würdest du die Datei unter dem jeweiligen JS ordner deines gewählten Seitentemplates platzieren. Es emp­fiehlt sich allerdings die benötigten Skripte in einem Ordner wie z.B /assets/ zu sammeln und dynamisch wenn dein skript aufgerufen wird in javascript zu importieren.

Sobald du die Datei Platziert hast, kannst du ins HTML übergehen und dort eine klickbare Fläche erschaffen, die es dir möglich macht deine Dateien hochzuladen. Da bist du dann frei in deiner Entscheidung, hauptsache die Fläche ist klickbar. Das könnte z.B so aussehen 

<a id="upload_1">upload</a>

Das Skript

Einbinden

Das Skript muss dynamisch eingebunden werden. Dazu bindest du entweder die Datei über den script Tag ein ( Vision macht das automatisch für dich ) oder du importierst das Script in einem bereits vorhandenem. Dazu kannst du NICHT die von der Sprache vorhergesehene Modul und Importstruktur nutzen, stadtdessen nutzt du eine Funktion, die das Skript für dich einbettet. Das ist dann diese Funktion hier:

function dynamicallyLoadScript(url) {
  var script = document.createElement("script"); // create a script DOM node
  script.src = url; // set its src to the provided URL

  document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

In den meisten Projekten ist schon eine functions.js vorhanden. Du kannst also einfach überprüfen, ob das script schon vorhanden ist.

Ausführen

Als nächstes wird das Skript ausgeführt. Die Ausführung geschieht über 3 Teile. Die Funktion ist eine jquery-gebundene Funktion, welche ein Element als ausführendes Objekt benötigt und eine config als Übergabeparameter entgegennimmt. 

$('#myfilesOnline').awesomeFileUpload(configFileUpload)

Es ist wichtig, dass die Funktion auf Klick oder bei einem bestimmten Event ausgeführt wird. Folgendes Setup ist möglich:

dynamicallyLoadScript("/assets/fileupload/js/jquery.awesomeFileUpload.js")

const configFileUpload = {
    type: 'ObjectWizardAjax',
    uploadURL: '/includes/ajax.php'
}

$('#upload_1').on('click', function (e) {
    $('#myfilesOnline').awesomeFileUpload(configFileUpload)
    $('#myfilesOnline').trigger("click")
})