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.