SharePoint – Nutzungsmöglichkeiten (Teil 2)

Social Features

In SharePoint 2013 gibt es die MySite. Das ist ein zentraler Bereich, den jeder Mitarbeiter als seinen persönlichen Startpunkt ins Intranet ansehen kann und an diesem er über alle Neuigkeiten, Änderungen oder ihn betreffende Updates, sowie Aktivitäten seiner Kollegen informiert wird. Für den Newsfeed gibt es sogar eine App fürs Smartphone.

image

Außerdem bietet Lync die Möglichkeit direkt aus Sharepoint mit Kollegen zu kommunizieren. Sei es direkt über Lync, also Instant-Messaging oder Videotelefonie, oder über Outlook.

image

Newsfeed

Newsfeeds gibt es an vielen Stellen im Sharepoint. Zum einen steht jeder erstellten Website im Standard ein Newsfeed zur Verfügung, aber auch unsere MySite hat einen Newsfeed. In diesem werden alle Informationen übersichtlich dargestellt, von Personen oder Gruppen denen ich folge. Das ist vergleichbar mit den Neuigkeiten in Facebook. Dort werden auch alle relevanten Informationen von Personen mit denen ich befreundet bin oder Seiten die ich geliked habe angezeigt.

image

Auf der rechten Seite gibt es zusätzlich noch eine Übersicht über alle Personen, Dokumenten, Websites oder Kategorien denen ich momentan Folge. Durch einen klick auf den jeweiligen Punk öffnet sich ein Untermenü zur Bearbeitung.

image

Ich kann die MySite aber noch viel weiter individualisieren indem ich mir meinen Kalender anzeigen lasse, meine Kontakte darstellen oder eine Verknüpfung zu Outlook herstelle. Dadurch kann ich die MySite so einstellen, dass Sie mir auf einen Blick alle für mich relevanten Informationen anzeigt.

OneDrive

Ich kann direkt in Sharepoint meine Daten von OneDrive Business anzeigen, bearbeiten oder mit anderen Benutzern teilen. Sofern eingestellt, bietet OneDrive auch die Möglichkeit meine Dokumente offline verfügbar im Windows-Explorer zu speichern, sodass ich auch ohne Internetverbindung Zugriff auf diese habe.

image

SharePoint – Nutzungsmöglichkeiten (Teil 1)

In dieser Reihe von Blogartikeln soll es um die Ziele und den Nutzen von SharePoint gehen.

 

Microsoft Content Management

In den letzten Jahren ist die Organisationen verschiedener Inhalte immer schwieriger geworden. Das liegt auch daran, dass die Inhaltquellen immer unterschiedlicher werden. Waren es früher nur Dokumente und E-Mails, kommen heutzutage noch unzählige andere Daten aus Videos, Websites, Sofortnachrichten und vielem anderen hinzu. Die Strukturierung dieser Daten ist oftmals ein großes Hindernis, welches das effektive Nutzen dieser Daten deutlich erschwert und somit die Produktivität des Unternehmens verringert.

Integrierte Funktionen wie die Workflows vereinfachen die Arbeit mit wiederkehrenden Prozessen deutlich und minimieren Arbeitszeit und Fehleranfälligkeit. Damit lassen sich diverse Genehmigungsvorgänge wie Urlaubsanträge, Spesenabrechnung, etc. ohne E-Mail-Verkehr lösen.

image

Außerdem lassen sich endgültige Dokumente automatisch nach den gesetzlichen Bestimmungen und Unternehmensrichtlinien abspeichern. Überwachungsprotokolle geben zudem den Nachweis der ordnungsgemäßen Speicherung gegenüber externen Prüfern. Außerdem lassen sich bestimmte Datensätze mit einer Sperre belegen, welche sie vor dem löschen schützen.

image

Dokumentenverwaltung

Mit strukturierten Inhalten innerhalb eines zentralen Dokumentenrepositories lässt sich durch die integrierte Suche und die Möglichkeit durch Dokumente zu navigieren viel Zeit sparen.  Außerdem lassen sich vertrauliche Informationen, mit der integrierten Rechteverwaltung, vor unbefugten Zugriff schützen. Zusätzlich können Sie mit DokumentenWorkflows den Werdegang des Dokuments beobachten und sich Warnmeldungen oder Aufgaben anzeigen lassen.

image

Websiteverwaltung

Durch benutzerfreundliche Bereitstellungstools lassen sich Websiteinhalte einfach und schnell, von berechtigten Benutzern und  ohne Eingriff der IT-Abteilung, verfassen und veröffentlichen. Dabei wird ein einheitliches Erscheinungsbild beibehalten, welches von dem Unternehmen selbst erstellt und implementiert werden kann. Auch die Navigation muss nur einmal zentral erstellt werden.

image

Formularverwaltung

Mit Workflows können Sie manuelle Prozesse automatisieren und so Ihre Geschäftsprozesse optimieren. Es besteht auch die Möglichkeit mit InfoPath eigene elektronische Formulare zu erstellen und diese einheitlich zu verteilen. Um die Dauer von Ausfallzeiten zu minimieren lassen sich Formulare außerdem parallel aktualisieren.

image

 

 

Geo-Location Felder mit Google API befüllen

Die Idee ist ganz simpel. Da SharePoint nun Geo-Location Felder bietet (siehe mein Blogeintrag zu Geo-Location) möchte ich die Koordinaten einer Adresse automatisch über ein Webservice von Google ermitteln lassen und in die Liste eintragen. Dafür verwende ich einen Workflow der beim Anlegen eines Listen-Items automatisch gestartet wird.

Zunächst wird die Liste im Visual Studio mit dem Editor angelegt:

image

Zu beachten sind die beiden Felder “Location” und das hidden-Field: “LocationTXT”. Dieses wird aufgrund einer Einschränkung der Workflow Engine benötigt. Location-FieldValues können nicht per Workflow gesetzt werden. Dazu später noch mehr.

Workflow

Der Workflow wird zusammen mit der Liste in einem SharePoint Projekt definiert. Im wesentlichen werden aus dem aktuellen Item die Felder Straße, Ort, PLZ und Land ermittelt und in Workflow Variablen geschrieben.

Dann setze ich die URL für den Serviceaufruf zusammen. Im ersten Schritt wird die Adressangabe zusammen gesetzt:

image

Der gesamte Ausdruck ist: Strasse.Replace(" ","") +"+" + PLZ + "+" + Ort + "+" +Land

Google erwartet alle Wörter durch + getrennt.

Die gesamte Uri wird so zusammengesetzt:

image

Der Ausdruck ist:  "http://maps.googleapis.com/maps/api/geocode/json?address=" + URLAddress

Danach wird ein http-Send aufgerufen. Als URI wird der zuvor gebildete Ausdruck verwendet. Wird das Googl API mit unserer Adresse in Wien, 150 Märzstrasse 1, aufgerufen erhalten wir folgendes Json-Objekt:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1",
               "short_name" : "1",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Maerz Street",
               "short_name" : "Maerz Street",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Rudolfsheim-Fünfhaus",
               "short_name" : "Rudolfsheim-Fünfhaus",
               "types" : [ "sublocality_level_1", "sublocality", "political" ]
            },
            {
               "long_name" : "Vienna",
               "short_name" : "Vienna",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Vienna",
               "short_name" : "Vienna",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "Austria",
               "short_name" : "AT",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "1150",
               "short_name" : "1150",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "Maerz Street 1, 1150 Vienna, Austria",
         "geometry" : {
            "location" : {
               "lat" : 48.2006027,
               "lng" : 16.3370802
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 48.20195168029149,
                  "lng" : 16.3384291802915
               },
               "southwest" : {
                  "lat" : 48.1992537197085,
                  "lng" : 16.3357312197085
               }
            }
         },
         "types" : [ "street_address" ]
      }
   ],
   "status" : "OK"
}

 

D.h. im Object “geometry” finden wir Länge und Breite der Position. Nun kann der Response in seine Einzelteile zerlegt werden. Hierfür bietet die Activity “GetDynamicValueProperties” die richtigen Möglichkeiten. Es wird der Pfad im JSon-Objekt angegeben und der Inhalt in eine Variable geschrieben. Die Einstellungen sind hier:

image

Nun stehen uns innerhalb des Workflows die Variablen lat und lng mit den Werte zur Verfügung.

Update des Geo-Location Feldes

Innerhalb einer Listen Deklaration mit XML kann ein Wert für ein Location Feld mit “POINT(lng, lat)” angegeben werden. Leider kann ich diesen Textausdruck nicht mittels ItemUpdate aus dem Workflow heraus in die Liste schreiben. Es gibt noch die Möglichkeit per REST-API Werte zu schreiben, aber ob über diesen Weg die Location geschrieben werden kann ist fraglich. Ich habe es noch nie probiert.

Nachdem meine Lösung bereits eine Farm-Solution ist, habe ich einen kleinen Umweg über einen Event-Receiver gewählt. Der Workflow schreibt in das Feld “LocationTXT” die Variablen Inhalte von “lng” und “lat”, zur Trennung wird ein Pipe (|) verwendet. Der Event-Receiver erstellt den Location-Datentyp und schreibt diesen in das Location-Feld.

Der Code für den Event-Receiver:

    public class SetLocationFieldValue : SPItemEventReceiver
    {
        /// <summary>
        /// An item is being updated.
        /// </summary>
        public override void ItemUpdating(SPItemEventProperties properties)
        {
            base.ItemUpdating(properties);
            string txt = (properties.AfterProperties["LocationTXT"] ?? "").ToString();
            string[] teile = txt.Split('|');
            double lat = 0;
            double lng = 0;
            double.TryParse(teile[0].Replace(".",","), out lng);
            double.TryParse(teile[1].Replace(".", ","), out lat);

            SPFieldGeolocationValue v = new SPFieldGeolocationValue(lat, lng);
            properties.AfterProperties["location"] = v;
        }
    }

 

Als Ergebnis haben wir nun eine Liste, in der automatisch die Geo-Location Information aus der eingegebenen Adresse ermittelt wird.

Dieses und ähnliche Beispiele für SharePoint – CrossPlattform stelle ich am 4.11.2014 in Wien bei der ADXC, der Konferenz für Cross Plattform Development (www.adcx.ms/wien) vor.

Windows 10 – Das Startmenü - eine der wichtigsten Neuerungen und die neue Suche

Laut Windows-Chef Terry Myerson nutzen weltweit 1,5 Milliarden Menschen Windows. Für viele Nutzer war die Optik von Windows 8 eine gravierende Umstellung. Mit der Kacheloptik waren viele Nutzer überfordert, das moderne Aussehen ist nicht sonderlich gut angekommen, jetzt schraubt Microsoft zurück und fügt wieder ein Startmenü ein, welches kaum anders aussieht wie das vorige in Windows 7.

Nun hat Microsoft den Nachfolger vorgestellt. Er heißt nicht wie erwartet Windows 9,
sondern Windows 10.

Menü ist wandelbar

Das aus alten Windows-Versionen bekannte Startmenü ist nun nicht nur zurück, sondern es scheint wieder vollständig zu sein und es lässt sich individuell anpassen. Wem die „Kachel-Optik“ von Windows 8 nicht gefallen hat, der soll vom neuen (alten) Design angesprochen werden. Nach der Installation von Windows 10 ist das zunächst der Standard.

clip_image001

Auf Wunsch sind aber die Kacheln nach wie vor da. Zum einen in der rechten Menüspalte neben der Programmliste integriert, zum anderen nach einer entsprechenden Umstellung der Optionseinstellungen. Im Startmenü sind die Kacheln in verschiedenen Größen verfügbar. Per Rechtsklick lassen sich diese von der Größe her verändern. Leider sind nicht für alle Apps alle Größen verfügbar. Weiterhin kann der Benutzer festlegen, welche Programme angezeigt werden, d.h. jedes Programm und jede installierte App kann per Rechtsklick ins Startmenü integriert werden.

clip_image003

Umstellung des Start-Menüs auf Kachel-Optik

Die Umstellung des Start-Menüs lässt sich über einen Rechtsklick auf die Taskleiste und über den Register „Start Menu“ vornehmen, indem das Häkchen vor „Use the Start menu instead of the Start screen“ entfernt wird.

clip_image004

Um die Einstellung einzurichten muss sich der Benutzer jedoch abmelden, denn dieses Fenster erscheint dann, wenn ein Wechsel vorgenommen wird.

clip_image005

Danach sieht der Benutzer nach Betätigen der Windows-Taste wieder die aus Windows 8 bekannte Kachel-Optik.

clip_image007

Neue Suche

Eine verbesserte Suchfunktion gibt es jetzt in Windows 10 und ein neues Lupen-Symbol in der Taskleiste. Neben der klassischen Dokumentensuche kann auch direkt über das Windows-Menü in Interneteinträgen (mit der Suchmaschine Bing) gesucht werden. Außerdem blenden in Windows 10 Kacheln Live-Informationen ein, wie das aktuelle Wetter oder etwa neue E-Mail-Nachrichten.

clip_image008

Sobald der Benutzer auf die Schaltfläche mit der Lupe klickt und ein Stichwort eingibt, werden in dem Suchfenster Ergebnisse sowohl systemseitig, wie auch Fundstellen aus dem Internet gefunden und angeboten. Ein Klick auf das jeweilige Suchergebnis öffnet dann wie im Beispiel darunter die Search-App mit dem Suchergebnissen von Bing.

clip_image010

Windows 10 Technical Preview: Neue Version

Am 21. Oktober veröffentlichte Microsoft eine neue Version der Windows 10 Technical Preview: Build-Nummer 9860. Die neue Version wird über Windows Update verteilt, kann aber auch vom User direkt über die PC-Settings installiert werden. Hierfür im Startmenü (bzw. auf dem Startbildschirm) nach “PC Settings” suchen. Dort findet man unter “Update und recovery” den Eintrag “Preview builds”. Neue ISO-Images gibt es nicht – man muss also immer die “alte” Preview-Version installieren und dann über den beschriebenen Weg updaten.

Windows 10 - 2 -1

Laut Microsoft wurden in der neuen Build über 7000 Änderungen vorgenommen – die wenigsten davon sind jedoch sichtbar:

1. Neue Animationseffekte beim öffnen und schließen von Fenstern und beim wechseln zwischen verschiedenen Desktops.

2. Mit der Tastenkombination [Windows] + [Shift] + [Pfeiltasten] lassen sich nun Apps zwischen mehreren Monitoren hin- und herverschieben.

3. Es wurde das aus Windows Phone bekannte Benachrichtigungscenter “Notifications” implementiert. Die entsprechenden Benachrichtigungen lassen sich über ein Taskleisten-Symbol öffnen.

Windows 10 - 2 -3

Die Einstellungen zu diesem Feature und welche Apps Benachrichtigungen anzeigen sollen, kann man in den “PC settings” unter “Search and apps” –> “Notification” finden.

Windows 10 - 2 -2

4. In den “PC settings” befindet sich nun ein Eintrag “DataSense”. Dieses Feature ist bereits aus Windows Phone 8.1 bekannt und zeigt an, wie viele Daten über die Unterschiedlichen Verbindungen übertragen wurden.

Windows 10 - 2 -4

5. Ebenfalls in den “PC settings” stehen nun auch unter “Battery Saver” neue Energiesparfunktionen zur Verfügung.

Windows 10 - 2 -5

Microsoft möchte nun ca. alle 3 Wochen einen neuen Preview-Build zur Verfügung stellen.

Angular Controller as

Wenn ich so darüber nachdenke, gibt es in Angular.js mindestens immer zwei Möglichkeiten eine Aufgabe zu lösen. Eine Direktive kann eine Funktion oder ein JSON Objekt zurück liefern. Ein Service kann eine Factory oder ein Service sein. Alles leicht verwirrend. In die Kategorie, muss das auch noch sein, fällt die Scope Freiheit eines Controllers.

Üblicherweise wird jedem Controller der Scope per Dependency Injection üergeben und damit eine Singleton Instand erstellt. Es gib auch eine Alternative Variante ohne $Scope.

Dabei wird eine “Controller as” Syntax eingesetzt, die sozusagen einen Alias erzeugt, der dann als Objektträger herhalten muss.

   1:    <div ng-controller="mycontroller as hannes">
   2:          {{hannes.count}}
   3:          <button ng-click="hannes.click()">plus</button>
   4:    </div>
   5:    

 

Der zugehörige Controller wird aber gänzlich anders codiert. Zunächst wird wie üblich die App als Modul erzeugt und darin ein Controller definiert, der auf eine Controller Methode verweist. Dieser ist allerdings Parameterlos. Die Propertys des Scopes werden per this erzeugt. Das fühlt sich aus C# Entwicklersicht fast natürlich an.

JavaScript typisch, wird per Prototype das bestehende Objekt um eine Funktion, hier click, erweitert.

   1:    var App = angular.module('App', []);
   2:    App.controller('mycontroller', myfunction)
   3:    function myfunction() {
   4:        this.count = 0;
   5:      };
   6:   myfunction.prototype.click= function () {
   7:       this.count++;
   8:     };

 

Auch wenn ich die Variante mit $scope optisch weniger gelungen finde, werde ich wegen der Konsistenz innerhalb von Angular diesen Weg nicht verwenden.

Windows 10: Virtuelle Desktops

Seit 30. September 2014 stellt Microsoft allen Usern eine kostenlose Vorab-Version (Technical Preview) von Windows 10 zur Verfügung. Ein neues Feature, das die nächste Windows-Version mit sich bringt, sind die sogenannten “Virtuellen Desktops”.

Mit den virtuellen Desktops ist es nun möglich geöffnete Programme auf mehrere Desktops zu verteilen – das kann sehr hilfreich sein, wenn man nur einen Monitor hat, man jedoch z.B. mit mehreren Programmen gleichzeitig arbeiten und zwischen diesen hin und her springen muss.

Einen neuen Desktop kann man über das Fenster-Icon, das sich in der Taskleiste rechts neben dem Lupen-Icon befindet, erzeugen.

Windows 10-3

 

 

Danach einfach auf das kleine schwarze Fenster mit dem +-Zeichen klicken.

Um zu einem anderen Desktop zu wechseln bzw. einen Überblick über alle existierenden Desktops zu erhalten, ebenfalls auf das Fenster-Icon in der Taskleiste klicken.

Windows 10-4

Fährt man mit der Maus über ein Vorschau-Fenster eines Desktops, dann wird dieser in der Mitte des Bildschirms etwas vergrößert dargestellt.

Allerdings besitzt nicht jeder Desktop eine eigene Taskleiste. Damit hat man in der Taskleiste die Icons aller geöffneten Programme, die sich auf den unterschiedlichen Desktops befinden. Befindet sich ein Programm allerdings auf einem anderen Desktop als auf dem aktuell Aktiven, dann wird dies durch eine kleine Leiste unter dem Icon symbolisiert.

Windows 10-5

 

Durch die Tastenkombination “ALT + Tabulator” erhält man eine Übersicht über alle geöffneten Programme – auch die, die sich auf einem anderen Desktop befinden. Drückt man mehrmals die Tabulator-Taste (bei gedrückter ALT-Taste), wird das nächste Programm markiert (erkennbar am weißen Rahmen). Erst wenn man die ALT-Taste loslässt, wechselt man zu dem entsprechenden Desktop und dem ausgewählten Programm.

Windows 10-6

 

 

Ein geöffnetes Programm auf einen anderen Desktop zu verschieben, ist (bislang) leider nicht möglich.

Microsoft bietet 4 kostenlose Zertifizierungsprüfungen für Azure und Office365

Microsoft bietet einem Blog-Beitrag von Andrew Parson zufolge aktuell Prüfungen über Prometric kostenlos an. Damit lassen sich 2 Zertifizierungen erreichen:

Für den Microsoft Certified Specialist in Azure muss mindestens eine dieser beiden Prüfungen abgelegt werden:

  • 70-532: Developing Microsoft Azure Solutions

  • 70-533: Implementing Azure Infrastructure Solutions

 

 Um den Microsoft Certified Solutions Associate in Office 365 zu erreichen, müssen die beiden folgenden Prüfungen abgelegt werden:

  • 70-346: Managing Office 365 Identities and Requirements

  • 70-347: Enabling Office 365 Services

 

Die Voucher zum kostenlosen Ablegen der Prüfungen können von hier bezogen werden: http://borntolearn.mslearn.net/goodstuff/p/mcp.aspx

Das Angebot ist nur begrenzt gültig und maximal bis zum 31. Dezember 2014 verfügbar – schnell sein ist also die Devise!

PS: 70-532 ist ein Beta-Examen!

Windows 10 – Apps im Fenstermodus

Schon unter Windows 8.1 Update 1 gab es die Möglichkeit, Apps über die Titelleiste direkt zu beenden. Zusätzlich konnte man Apps an die Taskbar anheften und über Alt + Tab zwischen Programmen und Apps wechseln. Diese Funktionen werden mit Windows 10 jetzt noch erweitert, sodass Sie nun Apps parallel zu normalen Programmen im Fenstermodus betreiben, und diese genauso minimieren und maximieren können.

fenster

Sie können außerdem die sogenannte Snap-Funktion nutzen, um Anwendungen an bestimmten Stellen des Desktops anzupinnen. Dazu müssen Sie die Anwendung oder App einfach nur in die gewünschte Ecke oder Rand des Desktops ziehen. Windows 10 macht Ihnen hierbei Vorschläge für eine möglichst effiziente Anordnung. Möglich sind hierbei bis zu vier Anwendungen, was gerade bei größeren Bildschirmen im Vergleich zum Vorgänger ziemlich praktisch ist.

veteilt

Durch dieses neue Feature sollen auch die Grenzen zwischen Apps und den klassischen Anwendungen immer weiter verschwimmen. Microsoft will auf lange Sicht diese Grenzen komplett auflösen, sodass es nur noch so genannte “Universal Apps” gibt.

full

Fileupload mit Angular.JS

Eigentlich müsste es heißen: Der Kampf des Dateiuploads gegen Angular.JS. Das Framework unterstützt uns dabei in keiner Weise. Wir müssen es an mehreren Stellen sogar austricksen.

Die Programmieraufgabe umfasst folgende Bauteile

  • Webservice, der die Datei entgegennimmt und speichert
  • HTML User Interface mit Input Type File
  • JavaScript Code für Ajax und Scope

Um volle Kontrolle über die hochgeladenen Dateien zu haben, bezüglich Typ, Größe oder Speicherort, bleibt nur ein Service am Web Server. In diesem Fall ist dieser per ASP.NET Web API und VB.NET erstellt.

   1:  Public Class fileuploadController
   2:      Inherits ApiController
   3:      <HttpPost>
   4:      Public Sub UploadFile()
   5:          If HttpContext.Current.Request.Files.AllKeys.Any() Then
   6:              Dim f = HttpContext.Current.
Request.Files("UploadedImage")
   7:              If f IsNot Nothing Then
   8:                  Dim fp = Path.Combine(
HttpContext.Current.Server.MapPath("~/upload"),
Path.GetFileName(f.FileName))
   9:                  f.SaveAs(fp)
  10:              End If
  11:          End If
  12:      End Sub
  13:  End Class

 

Das UX wird aus optischen Gründen auf einen Button reduziert, der den Betriebssystem-File-Open-Dialog öffnet und beim Schließen den Upload anstößt. Dadurch können wir das UI per Bootstrap schöner stylen, da die leere Textbox des Type File nicht angezeigt wird. Allerdings muss ein zweiter Button das Click Event des Fileupload-Buttons auslösen.

Das geschieht in Zeile 6 und zeigt bereits eine Reihe von Problemen mit Angular. Eigentlich sollte der Onclick-Handler nicht im HTML-Code auftauchen. Die Alternative ist eine Angular-Direktive mit rund 15 Zeilen Code, mit der dann auch noch ein zusätzliches Attribut in das Input-Element gelegt werden muss. Das ist mehr Aufwand und der Code ist dadurch leider auch nicht besser lesbar.

Außerdem kann man leider die DOM-Selector-Eigenschaften nicht verwenden, auch wenn ein angular.element(‘#id’) uns dies glauben lässt. Damit dieser Code funktioniert, muss erst noch jQuery eingebunden werden, da JQLite diese Selektoren nicht beinhaltet. Dann könnte man aber gleich $(‘#id’) nutzen. Es drängt sich die Frage auf, warum das komplette jQuery Framework überhaupt Overhead erzeugen soll, wenn es die benötigte JavaScript-Funktion bereits gibt. Also wird hier document.querySelector verwendet, um das Click Event durchzureichen.

Noch schlimmer wird es, wenn man aus normalem JavaScript auf das Angular Framework zugreifen muss. Dies ist hier nötig, da die Value Eigenschaft, die die ausgewählte Datei beinhaltet, nicht per ng-model bindbar ist. Auch für dieses Problem lässt sich eine umfangreiche Direktive schreiben oder einfach das OnChange-Event auf ein Event des $Scope durchreichen (Zeile 4)

   1:  <body  ng-controller="uploadController">
   2:      <label for="fileUpload"></label>
   3:      Select <input id="fileUpload" type="file" 
style="visibility:hidden;position:absolute;top:0;left:0"
   4:         onchange="angular.element(this).scope().onChange(this)" />
   5:   
   6:      <input id="btnUploadFile" type="button" value="Upload File"
onclick="document.querySelector( '#fileUpload').click()" />
   7:  <img id="progress" src="img/upload-indicator.gif"  ng-show="warten"/>

 

image

Zusätzlich wird noch ein animiertes GIF verwendet, das die Uploadaktivität visualisiert und hier durchaus elegant per ng-show an die Eigenschaft Warten des $scope gebunden wird.

Zuletzt muss noch die eigentliche Upload-Logik geschrieben werden. Dazu wird ein Formdata-Objekt erstellt und mit den Datei-Meta-Informationen und dem Stream gefüllt. Dann wird per $http der Post auf den Upload-Service angestoßen. Um ein Problem mit Angular und dem benötigten Multipart-Formdata-Header zu umgehen, fügen wir in Zeile 17-19 Workaround-Code ein.

   1:  var app=angular.module("App",[])
   2:    .controller("uploadController", function ($scope,$http) {
   3:     $scope.warten = false;
   4:     $scope.onChange = function (dateien)
   5:      {
   6:        $scope.warten = true;
   7:        var file = dateien.files[0];
   8:        var data = new FormData();
   9:        data.append('UploadedImage', file);
  10:        data.append('FileName', file.name);
  11:        data.append('fileSize', file.size);
  12:        data.append('fileType', file.type);
  13:   
  14:        $http
  15:          .post('/api/fileupload/uploadfile' , data,
  16:                 {
  17:                   transformRequest: angular.identity,
  18:                    headers: { 'Content-Type': undefined }
  19:                  })
  20:                 .success(function () {
  21:                       $scope.warten = false;
  22:                  })
  23:                 .error(function () {
  24:                       $scope.warten = false;
  25:                          alert('error');
  26:                      });
  27:              };
  28:     });
Training, Schulung, JavaScript, HTML, CSS, Dot Net, Asp Net

Month List