Wer Azure Websites Apps entwickelt, stolpert schnell mal über den Anwendungsfall Datei Upload. Dabei stellt sich die Frage, wohin mit den Daten? Ein Bild Upload ins Dateisystem ist zwar möglich, aber nicht im Sinne moderner Architektur. Dafür sieht Microsoft Windows Azure schon von Anfang an den Blob Storage vor.
Wer für die Cloud entwickelt sollte das Windows Azure SDK für .net mit dem Web Plattform Installer installieren. Damit erhält man mehr Funktion für Visual Studio 2013 und einige Tools. Unter anderem den Windows Azure Storage Emulator. Damit lassen BLOB Services auch lokal entwickeln. Ein UI sucht man dafür vergeblich. Lediglich auf der Kommandozeile lässt sich der Storage Emulator starten und administrieren.
WAStorageEmulator.exe init
Nach dem das Azure SKD (hier 2.5.1) installiert wurde enthält Windows Azure Storage Explorer für Visual Studio 2013 eine Reihe neuer aufklappbarer Einträge.
Der Bereich Development beinhaltet den lokalen Azure Storage. Für die Nutzung wird in der Datei web.config ein Connection String angelegt der folgenden Eintrag enthält.
1: <connectionStrings>
2: <add name="fotosblob" connectionString="UseDevelopmentStorage=true" />
Intern verwendet der Service eine SQL Datenbank. Unser .NET Code soll es dem Benutzer ermöglichen Bilder per Web Browser hochzuladen. Benötigt wird noch die Azure Client Bibliothek WindowsAzure.Storage,, die dem Visual Studio Web Projekt per Nuget hinzugefügt wird.
Das HTML5 Frontend enthält ein Input Type File Element. Per Post wird der Upload von einer oder mehreren Dateien durchgeführt.
Die bereits im Azure Blob gespeicherten Objekte wird per Liste angezeigt. Nicht ganz elegant aber funktionell direkt mit dem CloudBlockBlob Typ.
1: <form id="form1" runat="server" method="post" enctype="multipart/form-data">
2: <div>
3: <input type="file" id="File1" name="File1" runat="server" />
4: <br>
5: <input type="submit" id="Submit1" value="Upload" runat="server" />
6: <hr />
7:
8: <asp:ListView ID="ListView1" runat="server"
9: ItemType="Microsoft.WindowsAzure.Storage.Blob.CloudBlockBlob"
10: SelectMethod="ListView1_GetData">
11: <ItemTemplate>
12: <%#Item.Uri%>
13: <br />
14: </ItemTemplate>
15: </asp:ListView>
16: </div>
Wenn nach einem Request im Input Element Dateien vorhanden sind, werden diese im Blob abgelegt. Dazu benötigt man noch ein wenig konzeptionelles Background Wissen. In Zeile 2 wird ein Storage Objekt erstellt. Aus diesem eine Art Proxy Client um mit dem Dienst zu sprechen.
Ein Azure Storage kann 0-n Container enhalten. In Zeile 4 wird der Foto Container identifiziert und bei Bedarf auch erzeugt. Um die hochgeladenden Bilder für jedermann per URL abrufbar zu halten, dient Zeile 6. Ab dann wird das BLOB Objekt per Referenz auf das Upload Objekt erzeugt und gefüllt.
1: If IsNothing(Request.Files("File1")) = False Then
2: Dim storageAccount = CloudStorageAccount.Parse(
ConfigurationManager.ConnectionStrings("fotosblob").ConnectionString)
3: Dim blobClient = storageAccount.CreateCloudBlobClient()
4: Dim container = blobClient.GetContainerReference("meinefotos")
5: container.CreateIfNotExists()
6: container.SetPermissions(New BlobContainerPermissions With
{.PublicAccess = BlobContainerPublicAccessType.Blob})
7: Dim blockBlob = container.GetBlockBlobReference(
Path.GetFileName(File1.PostedFile.FileName()))
8: blockBlob.UploadFromStream(File1.PostedFile.InputStream)
Theoretisch sind wir nun fertig. Die Images lassen sich im Visual Studio Server Explorer abrufen aus der Liste der Blob Elemente.
In der Praxis wird man eher eine Anwendung diesen Job machen lassen. Der Code ist bis Zeile 5 ident mit dem vorigen VB.NET Azure Code Beispiel. Refactoring! Für Demo Zwecke ist ein funktioneller Code Block durchaus sinnvoll. In Zeile 6 wird eine Referenz auf den Blob Container gezogen. Danach recht verkürzt per LINQ die erhaltenen Objekte direkt in eine Liste von BlockBlob Objekten gecastet.
1: Public Function ListView1_GetData() As List(Of CloudBlockBlob)
2: Dim storageAccount = CloudStorageAccount.Parse(
ConfigurationManager.ConnectionStrings("fotosblob").ConnectionString)
3: Dim blobClient = storageAccount.CreateCloudBlobClient()
4: Dim container = blobClient.GetContainerReference("meinefotos")
5: container.CreateIfNotExists()
6: Dim blockBlob = container.GetBlockBlobReference("meinefotos")
7: Dim q = container.ListBlobs().OfType(Of CloudBlockBlob)()
8: Return q.ToList
9: End Function
Dieses Beispiel ist mit Vorsicht zu genießen, da es verschiedene Types geben kann (CloudBlockBlob, CloudPageBlob, CloudBlobDirectory) Wer mehr dazu Wissen will findet in diesem Microsoft Blog C# Sample Code.
Im letztem Schritt wird die Frage behandelt wie aus der Web APP eine Azure Web App wird. Bevor es zum Publish bzw Deploy der Code Daten kommen kann, wird ein Azure Storage Account angelegt.
Wei zuvor schon direkt aus dem Visual Studio Server Explorer mit der Context Menü Option Create Storage Account. In den Eigenschaften (Propertys) findet sich dann der Connection String ohne den Key. Per Klick auf dei drei Punkte ganz rechts des Connection Strings öffnet sich ein weiterer Dialog.
Aus diesem kopiert man den Connection String und ergänzt die Datei Web.release.config. Sollte die nicht vorhanden sein, auf die Datei mit der Endung pubxml (im Verzeichnis PublishProfiles) rechts klick und Add Config Transform auswählen.
1: <connectionStrings>
2: <add name="fotosblob"
3: connectionString="DefaultEndpointsProtocol=https;
AccountName=ppedvdemo;AccountKey=dP6Cu"
4: xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
5: </connectionStrings>
Beim Publish der Web App wird dann von msbuild der Connection String automatisch angepasst.
Ergänzend sei der Azure Deploy Blog Artikel empfohlen.
Natürlich bieten wir das Thema Azure Development auch als Training an.