HTML5 Uploader

Im SharePoint-Umfeld wünscht man sich gerne, schon in Formularen Dateien hochladen zu können. Mit der folgenden asynchronen JavaScript-Funktion kann einfach und effektiv ein HTML5 Uploader in SharePoint eingebunden werden.

Was für den HTML5 Uploader benötigt wird:

  • Ein HTML5-fähiger Browser, hierzu gehören alle Internet Explorer ab Version 10, der neue Edge sowie die aktuellen Versionen von Google Chrome und Mozilla FireFox
  • Ein Input HTML Control vom Typ file sowie ein Button, der unsere Funktion aufruft.
  • JQuery

Unsere Upload-Methode benötigt drei Parameter:​

up.uploadAsync = function (contextWebAbsUrl, targetLibrary, fileInputId)

  • contextWebAbsUrl ist unsere SharePoint Site mit der Library, in der wir etwas hochladen wollen.
  • targetLibrary ist die Library, in der wir unsere Datei speichern wollen.
  • fileInputId ist die ID des Input-Controllers, in der wir unsere Datei auswählen.

Als vierten Parameter kann man eine Callback-Funktion übergeben, welche nach dem Hochladen ausgeführt wird.

Im folgenden Beispiel haben wir eine Upload-Funktion in ein Formular miteingebaut:

file-upload-content-Formular.PNG

Wenn wir nun eine Datei mit dem FileInput-Controller ausgewählt haben, können wir den Upload-Button betätigen. Dieser würde unsere Uploadmethode aufrufen:

file-upload-content-1.PNG

Wenn die Methode ordnungsgemäß aufgerufen worden ist, kommt die eigentlicheuploadFile(successCallback);-Methode:

file-upload-content-2.PNG

Hier wird zunächst die Datei vom FileInput-Controller mit der Methode getFileBuffer(); geholt. Diese Methode überprüft gleichzeitig, ob im FileInput-Controller überhaupt eine Datei hinterlegt ist und übergibt ein defered.promise() zurück.

Wenn der Promise ordnungsgemäß ausgeführt worden ist, wird mit der Methode addFileToFolder();die Datei asynchron in unsere Library hochgeladen.

file-upload-content-3.PNG

Wenn diese Methode dann abgeschlossen ist, wird unsere Datei bereits hochgeladen und die Callback-Funktion kann aufgerufen werden, sofern diese übergeben worden ist.

Diese Lösung ist praktisch für Formulare oder andere Einsatzorte, bei denen man keinen Postback erzwingen will. Unsere Datei wird hochgeladen, während wir das Forumlar bearbeiten.

Comments