Wednesday, 21 August 2013

Form Posts and the BackgroundTransferService


At the time of getting my Windows phone I was the owner of an app membership which at the time allowed me to develop apps for the phone. I wanted to create an app that interacted with a personal file server, which allowed files to be uploaded to it via a form post online. I achieved this by using WebRequest objects, but due to the limitation of Windows phone apps this meant that I had to stay within the app in order to complete the upload, which was not ideal. Then Mango came out and with it the BackgroundTransferService, which allowed uploads and downloads to happen regardless of the state of the app that initiated them. So I set out to upgrade my app to upload the files via this new background service, but couldn't for the life of me to get it to work so I gave up. My app membership then ran out, meaning that I could no longer use the app anyway and the code just became a folder on my computer gathering virtual dust...

Fast forward to a few weeks ago (strangest statement ever) and Microsoft announce that anyone can develop and deploy up to two apps on any one phone, for free. So, I decided to redesign my application from the ground up and starting by attempting to conquer the BackgroundTransferService once again. I started by googling (or binging, yahooing, asking, etc) my problem to see if anyone had had success in this area as a lot can happen in a few years. No one had. I then manged to find a post detailing MY EXACT PROBLEM. My face lit up. Was my search finally over? I scrolled to the bottom for an answer. No answer. I looked to see who posted it. It was me when I was first having the problem. An example that in the XKCD scenario (shown above), the poster doesn't necessarily know of a solution because I knew nothing.

I decided to attempt once again the solution that the post gave me. I downloaded Fiddler, posted a file using the BackgroundTransferService, posted a file using the web form and examined the result. Not surprisingly, the BackgroundTransferService post was missing a bunch of information that was included in the web form post, and instead was just posting the raw file binary. No boundaries of anything. But why would it? I hadn't told it to. After messing around with the Headers property and about to give up, I had one final idea. One that I thought would never work because I thought it was hacky as hell. What if the stream I stated to upload was in fact the contents that are uploaded via a web form post.

using (IsolatedStorageFileStream stream = storage.CreateFile(@"shared/transfers/" + tb_Filename.Text))
{
    StringBuilder content = new StringBuilder();
    content.AppendLine(String.Format("-----------------------------{0}", boundary));
    content.AppendLine(String.Format("Content-Disposition: form-data; name=\"file\"; filename=\"{0}\"", tb_Filename.Text));
    content.AppendLine(String.Format("Content-Type: image/jpeg"));

    content.AppendLine();

    byte[] contentAsBytes = Encoding.UTF8.GetBytes(content.ToString());
    stream.Write(contentAsBytes, 0, contentAsBytes.Length);

    content.Clear();

    _selectedStream.Position = 0;

    byte[] buffer = new byte[16 * 1024];
    int read;
    while ((read = _selectedStream.Read(buffer, 0, buffer.Length)) > 0)
    {
        stream.Write(buffer, 0, read);
    }

    content.AppendLine();

    content.AppendLine(String.Format("-----------------------------{0}--", boundary));

    contentAsBytes = Encoding.UTF8.GetBytes(content.ToString());
    stream.Write(contentAsBytes, 0, contentAsBytes.Length);
}

BackgroundTransferRequest request = new BackgroundTransferRequest(new Uri(Uri.EscapeUriString(Page_Upload.UploadDestination), UriKind.Absolute));
request.UploadLocation = new Uri(@"shared/transfers/" + tb_Filename.Text, UriKind.RelativeOrAbsolute);
request.Method = "POST";
request.Tag = tb_Filename.Text;
request.TransferPreferences = TransferPreferences.AllowCellularAndBattery;

request.Headers.Add(new KeyValuePair("Content-Type", String.Format("multipart/form-data; boundary=---------------------------{0}", boundary)));
BackgroundTransferService.Add(request);

I selected a file, hit the Upload button and checked my file server. And with much surprise (although looking back I don't see why), the file was there.

So as can be seen, the BackgroundTransferService can used to upload all types of data in all types of form. You just need to know how. Or in my case try everything else.

Update: It appears this blog post may be more helpful if it includes the php code it was interacting with. So here is a stripped down version of it
<?php
 if ($_FILES["file"]["error"] > 0)
 {
  echo "Return Code: " . $_FILES["file"]["error"] . "
";
 }
 else {
  move_uploaded_file($_FILES["file"]["tmp_name"],
           "./" . $_FILES["file"]["name"]);

  echo "Successful";
 }
?>
<form action="upload_file.php" method="POST" enctype="multipart/form-data">
  File: <input type="file" name="file" />

  <input type="submit" value="Submit" />
</form> 

4 comments:

  1. Hi David! I'm struggling with it right now. I tried your solution and I can see the BytesSent property increasing, but I could'nt get the image server side... (I'm using PHP and the $_FILES variable is empty). I'm am missing something?

    ReplyDelete
    Replies
    1. Hi Nobuyuki.

      First, thank you for taking the time in looking at my blog. I've updated the post to include sample php code that the c# code is interacting with. If you can post a sample of your php code and C# code, I might be able to help.

      Thanks,
      Dave

      Delete
    2. Thank you David! i was missing this header info:

      data.Append(String.Format("Content-Disposition: file; name=\"arquivo\"; filename=\"upload_{0}.jpg\"\r\n", boundary));

      yours is "form-data", but when i changed to "file", it worked! Anyway, thanks to you! Your post was very helpful!

      Delete
  2. This comment has been removed by the author.

    ReplyDelete

Got an opinion? Who hasn't? Post it here...