Beray Bentesen in Xamarin iOS

Uploading Image to Azure Blob Storage - Xamarin iOS

 

This article will be covering :

  • Creating a new Azure Storage Container
  • Choosing image from gallery
  • Uploading image to container

Working with Azure Storage

Creating a new Storage and container are first and required steps before working with any mobile platform.

  • Click New -> Choose Data Services -> Choose Storage -> Quick Create
  • Name your url and choose location

   

  • Click Storage -> Click your storage name

   

  • Click containers -> Click Add and name your container

   

  • In order to install Azure Storage you have to include the WindowsAzure.Storage package.
  • You can use either the Nuget Package Manager,or install it through Package Manager Console

Working with iOS Project

  • Drag and drop Image View, Text Field and Button/s to View Controller from Toolbox

 

Updating ViewController

  • Define UIImagePickerController at the top of class
public partial class ViewController : UIViewController  
    {

        UIImagePickerController pickerController;
                ...
  • Define your connection string by replacing with unique values
public const string StorageConnectionString = "DefaultEndpointsProtocol=https;AccountName=Name;AccountKey=Key"  
  • Copy and paste following code below to ViewDidLoad method
  • You may change PhotoLibrary to Camera to use Camera instead of photo gallery
public override void ViewDidLoad()  
        {
            base.ViewDidLoad();

            pickerController = new UIImagePickerController();
            pickerController.SourceType = UIImagePickerControllerSourceType.PhotoLibrary;
            pickerController.MediaTypes = UIImagePickerController.AvailableMediaTypes(UIImagePickerControllerSourceType.PhotoLibrary);
  • Copy and paste following lines to disable uploadButton and hide image view
uploadToStorageButton.Enabled = false;  
imageName.Hidden = true;  
  • ScaledImage method is a helper method that resize chosen image and return as a new UIImage
  • You may increase size by changing 300 x 300 with different values
  • Copy and paste outside the ViewDidLoad method
UIImage ScaledImage(UIImage image, nfloat maxWidth, nfloat maxHeight)  
        {
            var maxResizeFactor = Math.Min(maxWidth / image.Size.Width, maxHeight / image.Size.Height);
            var width = maxResizeFactor * image.Size.Width;
            var height = maxResizeFactor * image.Size.Height;
            return image.Scale(new CoreGraphics.CGSize(width, height));
        }
  • pickerController.FinishedPickingMedia works after choosing image from gallery
  • Following code set imageView source and enable upload button / image view
  • Copy and paste following code block into ViewDidLoad method
pickerController.FinishedPickingMedia += async (object s, UIImagePickerMediaPickedEventArgs e) =>  
            {
                imageView.Image = ScaledImage(e.OriginalImage, 300, 300);

                await pickerController.DismissViewControllerAsync(true);

                uploadToStorageButton.Enabled = true;
                imageName.Hidden = false;
            };
  • pickerController.Canceled works if you cancel choosing photo and dismiss picker controller
pickerController.Canceled += async delegate  
            {
                await pickerController.DismissViewControllerAsync(true);
            };
  • To show library add following method into chooseImageButton's TouchUpInside event
chooseImageButton.TouchUpInside += (sender, e) =>  
            {
                PresentViewController(pickerController, true, null);
            };

Test your project

  • Before uploading image to Azure Storage, you need to get container reference name
  • Add CloudBlobContainer method to your project and replace 'gilmourimages' with yours
public CloudBlobContainer getContainerReference()  
        {
            var account = CloudStorageAccount.Parse(StorageConnectionString);
            var client = account.CreateCloudBlobClient();
            var container = client.GetContainerReference("gilmourimages");
            return container;
        }
  • uploadImageTask uploads chosen image to the storage
  • Returning image name is optional, will be used with UIAlertController
public async Task<string> uploadImageTask(Stream image)  
        {
            var container = getContainerReference();
            var name = imageName.Text;
            var imageBlob = container.GetBlockBlobReference(name);
            await imageBlob.UploadFromStreamAsync(image).ConfigureAwait(false);
            return name;
        }
  • The last step is calling uploadImageTask and notifying user with alert
uploadToStorageButton.TouchUpInside += async (sender, e) =>  
            {
                var imageStream = imageView.Image.AsPNG().AsStream();
                var name = await uploadImageTask(imageStream);

                var alert = UIAlertController.Create("Image uploaded successfully","Image name : " + name,
                UIAlertControllerStyle.ActionSheet);

                alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, (obj) => { Console.WriteLine("Done"); }));
                PresentViewController(alert, true, null);
            };

Test your project


Check your container