Upload Image from Silverlight to Azure BLOB using WCF

Dhananjay Kumar
14y
12.2k
0
0

Article

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

Azure Blob in silverlight

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.