Upload and retrieve Image form Microsoft Azure

1. UWP WITH MICROSOFT AZURE
BY ENG SOON CHEAH

2. 1
UWP WITH MICROSOFT AZURE
UWP with Microsoft Azure
STORE IMAGE AND RETRIEVE IMAGE BY USING BLOB STORAGE
Pre-Requirement
1. Install Visual Studio 2015
2. Install Azure SDK
3. Microsoft Azure Account
Let Start to Code!
Click the NEW > DATA SERVICES > STORAGE > QUICK CREATE > fill in the information > Create storage
Account

3. 2
UWP WITH MICROSOFT AZURE
After the account is created you will find the dashboard.
To access azure storage we have a storage account name and access keys.
Click on manage access keys at the bottom and you will find them as below.
We will now create a Windows UWP with the following UI. Add mobile services and azure storage
nuget package foe the app.
<Button x:Name="button" Content="Select Picture" HorizontalAlignment="Left" Margin="65,77,0,0"
VerticalAlignment="Top" Height="68" Width="221" Click="SelectPic_clicked" FontSize="26.667"/>
<Image x:Name="image" HorizontalAlignment="Left" Height="240" Margin="65,256,0,0"
VerticalAlignment="Top" Width="335"/>

4. 3
UWP WITH MICROSOFT AZURE
In the button click event paste the following code,
private async void SelectPic_clicked(object sender, RoutedEventArgs e)
{
try
{
FileOpenPicker fop = new FileOpenPicker();
fop.FileTypeFilter.Add(".jpg");
fop.FileTypeFilter.Add(".jpeg");
fop.FileTypeFilter.Add(".png");
fop.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
StorageFile sf = await fop.PickSingleFileAsync();
IRandomAccessStream str = await sf.OpenAsync(FileAccessMode.Read);
CloudStorageAccount account;
CloudBlobClient blobClient;
CloudBlobContainer container;
account = new CloudStorageAccount(new StorageCredentials("Insert your account name", "Insert
your key"), true);
blobClient = account.CreateCloudBlobClient();
container = blobClient.GetContainerReference("pictures");
await container.CreateIfNotExistsAsync();
BlobContainerPermissions per = new BlobContainerPermissions();
per.PublicAccess = BlobContainerPublicAccessType.Blob;
await container.SetPermissionsAsync(per);
CloudBlockBlob blob = container.GetBlockBlobReference(sf.Name);
await blob.UploadFromFileAsync(sf);
BitmapImage bmp = new BitmapImage();
bmp.UriSource = blob.Uri;
BlobData imageData = new BlobData
{
imageUrl = blob.Uri.ToString(),
name = sf.Name
};

5. 4
UWP WITH MICROSOFT AZURE
await App.MobileService.GetTable<BlobData>().InsertAsync(imageData);
var m1 = new MessageDialog("Image Uploaded").ShowAsync();
image.Source = bmp;
}
catch(Exception ex)
{
var m2 = new MessageDialog(ex.ToString()).ShowAsync();
}
In the above code I have used FileOpenPicker to select an image. And used Mobile service to store
blob name and url once uploaded.
Use your account name and account key. I have used the following code for class.
To retrieve images from the blob storage, I used mobile services to store the information. Use the
following code to make the UI.
Add the following is the c# code for retrieval of images.
public class BlobData
{
public string id { get; set; }
public string name { get; set; }
public string imageUrl { get;
set; }
}
<Button x:Name="button1" Content="Download Images" HorizontalAlignment="Left"
Margin="618,64,0,0" VerticalAlignment="Top" Height="81" Width="259" FontSize="26.667"
Click="Download_clicked"/>
<ListView x:Name="ImageList" HorizontalAlignment="Left" Height="483" Margin="659,184,0,0"
VerticalAlignment="Top" Width="496">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding name}" />
<Image Height="120" Width="150" Source="{Binding imageUrl}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
List<BlobData> allImages = await
App.MobileService.GetTable<BlobData>().ToListAsync();
ImageList.ItemsSource = allImages;

6. 5
UWP WITH MICROSOFT AZURE
Screenshot 1
Screenshot 2
Screenshot 3

7. 6
UWP WITH MICROSOFT AZURE
Screenshot 4
Screenshot 5

8. 7
UWP WITH MICROSOFT AZURE
References:
1. How to operate Azure Blob and Table Storage in Windows Store apps
https://code.msdn.microsoft.com/windowsapps/How-to-use-Windows-Azure-b3447051
2. Universal Windows Platform (UWP) App Development
https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners