Sending Image Data with parameter using HttpClient Post

I recently needed to send image data to a server for processing and thought I’d share how to do that using System.Net.Http.HttpClient in a UWP (Universal Windows) app. First, let’s start with the API’s requirements, it states:

Parameter: image  The image parameter should be the binary file data for the image you would like analyzed (PNG, GIF, JPG only). Files cannot be larger than 500k.

So that means I have to send image data as binary data with the parameter image. I can use System.Net.Http.ByteArrayContent for the image data. To get the image data from the file as a byte[] the approach I use is the following (there are other ways to do this):


var myImageFile = await Windows.Storage.ApplicationData.Current.LocalFolder.GetFileAsync(fileName);

byte[] fileBytes;
using (var fileStream = await myImageFile.OpenStreamForReadAsync())
{
var binaryReader = new BinaryReader(fileStream);
fileBytes = binaryReader.ReadBytes((int)fileStream.Length);
}

 

Now that I have a byte[], I can create an instance of System.Net.Http.ByteArrayContent to hold the image’s binary data:


var imageBinaryContent= new ByteArrayContent(fileBytes);

 

Normally when sending content, you’d just pass the content as itself to the PostAsync() method directly. However, because I need to send the content with the parameter name image, I’ll need to use System.Net.Http.MultiPartFormDataContent. It allows you to set content with a parameter name. Here’s how I did it:


var multipartContent = new MultipartFormDataContent();
multipartContent.Add(imageBinaryContent, "image");

 

Now that we have the content ready to go, all that’s left to do is to pass it to PostAsync() when the call is made. Here’s the entire snippet:


//get image file
var myImageFile = await Windows.Storage.ApplicationData.Current.LocalFolder.GetFileAsync(fileName);

//convert filestream to byte array
byte[] fileBytes;
using (var fileStream = await myImageFile.OpenStreamForReadAsync())
{
var binaryReader = new BinaryReader(fileStream);
fileBytes = binaryReader.ReadBytes((int)fileStream.Length);
}

//instantiate the client
using(var client = new HttpClient())
{

//api endpoint
var apiUri = new Uri("http://someawesomeapi.com/api/1.0/");

//load the image byte[] into a System.Net.Http.ByteArrayContent
var imageBinaryContent = new ByteArrayContent(fileBytes);

//create a System.Net.Http.MultiPartFormDataContent
var multipartContent = new MultipartFormDataContent();
multipartContent.Add(imageBinaryContent, "image");

//make the POST request using the URI enpoint and the MultiPartFormDataContent
var result = await client.PostAsync(apiUri, multipartContent);
}

 

I hope this makes things easier for you,

Happy coding!

 

As suggested by my buddy Scott Lovegrove, you could also move this into an HttpClient Extension Method. How much functionality you put in it is up to you, but I went with most of it. To use it, simply, pass the StorageFile, API url and the parameter name:


var result = await client.PostImageDataAsync(myImageFile, "http://myapi.com/", "image");

 

HttpClient Extension Method:

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s