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.