Upload Image from Silverlight to Azure BLOB using WCF

Working with Azure BLOB is very common task you must be doing. Sometime you may come to the requirement to upload an image from a  Silverlight client to Azure BLOB. In this post I am trying to help you in achieving this.

In this post I will show you below three tasks.

• Uploading Image to Azure BOLB
• Abstracting BLOB upload code in WCF service
• Using WCF Service in Silverlight client to upload the image.

Expected Output



Flow of application

Step 1: On click event of Button File Dialog will open

Step 2: User will select Image and on selection Image will get uploaded in Azure Blob.

Step 3: On successful uploading URI of image will be returned from the service. Source property of Image control would be set to the returned URL.

Creating Service

Service Contract will have an function expose as operation contract as below,

    [ServiceContract]
    public interface IBLOBImageUpload
    {
        [OperationContract]
        string UploadImage(byte[] Image);
    }

Service is implemented as below,

• We are creating a new GUID to set as file name of the image
• Converting input byte array to stream
• Calling a function to upload stream to blob
• And returning URL of uploaded image

    public string UploadImage(byte[] Image)
    {
         string rowKeynFileName = Guid.NewGuid().ToString();
         System.IO.Stream stream = new System.IO.MemoryStream(obj.Image);
         string imageUri= UploadImageinBlob(stream, obj.RecordId);
         return imageUri;
    }

Function to upload Image in BLOB is as below

• It is taking stream as input to upload
• It is taking filename to be given to upload image
• DataConnectionString is connection string to Azure storage.
• urlContainer is name of the public container
• Creating blob name by appending .jpg extension
• Returning URL of uploaded image.

    public string UploadImageinBlob(Stream Streams,string FileName)
    {
        CloudStorageAccount account = CloudStorageAccount.Parse(RoleEnvironment.GetConfigurationSettingValue("DataConnectionString"));
        CloudBlobClient blobClient = account.CreateCloudBlobClient();
        CloudBlobContainer container = blobClient.GetContainerReference("urContainer");
        string uniqueBlobName = string.Format("{0}.jpg", FileName);
        CloudBlob blob = container.GetBlobReference(uniqueBlobName);
        blob.Properties.ContentType = "image\\jpeg";
        Streams.Seek(0, SeekOrigin.Begin);
        blob.UploadFromStream(Streams);
        string url = blob.Uri.OriginalString;
        Streams.Close();
        return url;
    }

Configuring Service EndPoint

There are many points you need to put in mind while configuring the service end point.

• Change maxReceivedMessageSize to 2147483647
• Change maxBufferSize to 2147483647
• Change maxArrayLength to 2147483647
• Change maxBytePerRead to 2147483647
• Change maxDepth to 2147483647
• Change maxTableCharCount to 2147483647
• Change maxStringContentLength to 2147483647
• In Service behavior change data contract serliazer max object graph value to 2147483647

<system.serviceModel>
     <bindings> 
      <basicHttpBinding> 
        <binding name="ServicesBinding" 
                 maxReceivedMessageSize="2147483647" 
                 maxBufferSize="2147483647"> 
          <readerQuotas 
                    maxArrayLength="2147483647" 
                    maxBytesPerRead="2147483647" 
                    maxDepth="2147483647" 
                    maxNameTableCharCount="2147483647" 
                    maxStringContentLength="2147483647" /> 
        </binding> 
      </basicHttpBinding>
     </bindings> 
    <services>
      <service name="Service.BLOBImageUpload" behaviorConfiguration="ServiceData.Service1Behavior"> 
        <endpoint address="" binding="basicHttpBinding" contract=" Service.IBLOBImageUpload " bindingConfiguration ="ServicesBinding" /> 
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/> 
      </service> 
    </services> 
    <behaviors> 
      <serviceBehaviors>
 
        <behavior name ="ServiceData.Service1Behavior"> 
          <serviceMetadata httpGetEnabled="true"/>
 
          <serviceDebug includeExceptionDetailInFaults="false"/> 
          <dataContractSerializer maxItemsInObjectGraph ="2147483647"/> 
        </behavior> 
      </serviceBehaviors> 
    </behaviors> 
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" /> 
  </system.serviceModel>

Now your service is written. You can choose to host the service anywhere you want.

Creating UI
I have kept UI as sweet and simple as possible. There is just a button and image control. On click of button FileDialogBOX will open and the user can select an image to upload. After successful uploading, the URL of uploaded image in Azure blob will be returned and that will be set as source of Image control

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button x:Name="btn" Height="100" Width="100" Click="btn_Click" Content="Upload Image" />
        <Image Grid.Row="1" x:Name="img" Height="auto" Width="auto" />
    </Grid>

Calling Service

You need to make a normal service call

• On click event of the button opening the file dialog
• Converting stream to byte array
• Passing byte array as input to the function.
• GetImageSource function is converting given string URL as image source to be set as source of image control

    public partial class MainPage : UserControl
    { 
        public OpenFileDialog fileDialog = null;
        public MainPage()
        {
            InitializeComponent();
        } 
        private void btn_Click(object sender, RoutedEventArgs e)
        {
            Stream strm;
            byte[] buffer = null; ;
            fileDialog = new OpenFileDialog();
            fileDialog.Multiselect = false;
            fileDialog.Filter = "All Files|*.*";
            bool? retval = fileDialog.ShowDialog();
            if (retval != null && retval == true)
            {
                strm = fileDialog.File.OpenRead();
                buffer = new byte[strm.Length];
                strm.Read(buffer, 0, (int)strm.Length);
            }           
            BLOBImageUploadClient proxy = new BLOBImageUploadClient ();
          
            proxy.UploadImageAsync(buffer);
            proxy.UploadImageAsync += new EventHandler<UploadImageCompletedEventArgs>(proxy_UploadImageCompleted);
        } 
        void proxy_UploadImageCompleted (object sender, UploadImageCompletedEventArgs e)
        {
            img.Source = GetImageSource(e.Result.ToString());
        }

        private ImageSource GetImageSource(string fileName)
        {
            return new BitmapImage(new Uri(fileName, UriKind.Absolute));
        }
    }
}

This is what all you need to do as far as coding is concerned. Yes you may need to put clientacccesspolicy.xml at the root location of server where you are hosting the WCF service to avoid cross domain problem.

I hope this post was useful. Thanks for reading

If you find my blogs useful you may like to,

Follow me on twitter http://twitter.com/debug_mode

Like Facebook page of this blog http://www.facebook.com/DebugMode.Net

If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.