title: Upload image through form post
body: <p>I'm trying to upload an image through a <code>multipart/form-data</code> post and I'm using the code below. I'm only going to be uploading <code>.jpg</code> images.</p>
  
  <p>The problem is that the image that is saved is not a valid image and it can't be viewed. It's also 200 bytes larger than the file I'm uploading so I assume I'm missing something here?</p>
  
  <pre><code>public class FileUploadController : ApiController
  {
      public Task&lt;HttpResponseMessage&gt; PostUploadFile()
      {
          return UploadFileAsync().ContinueWith&lt;HttpResponseMessage&gt;((tsk) =&gt;
              {
                  HttpResponseMessage response = null;
  
                  if (tsk.IsCompleted)
                  {
                      response = new HttpResponseMessage(HttpStatusCode.Created);
                  }
                  else if (tsk.IsFaulted || tsk.IsCanceled)
                  {
                     response = 
                     new HttpResponseMessage(HttpStatusCode.InternalServerError);
                  }
  
                  return response;
              });
      }
  
      public Task UploadFileAsync()
      {
          return this.Request.Content.ReadAsStreamAsync().ContinueWith((tsk) =&gt; 
          { SaveToFile(tsk.Result); },
          TaskContinuationOptions.OnlyOnRanToCompletion);
      }
  
      private void SaveToFile(Stream requestStream)
      {
          string path =
          System.IO.Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory);
          using (FileStream targetStream = 
          File.Create(path + "/Uploads/" + DateTime.Now.ToFileTime() + ".jpg"))
          {
              using (requestStream)
              {
                  requestStream.CopyTo(targetStream);
              }
          }
      }
  }
  </code></pre>
  
  <p>Here's a simple form I'm using to post the image.  </p>
  
  <pre><code>&lt;form action="/api/postuploadfile" enctype="multipart/form-data" method="post"&gt;
      Upload Image:
      &lt;input type="file" id="imagename" name="imagename" /&gt;
      &lt;input type="submit" /&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p><strong>Info about the image, before/after:</strong><br>
  If I check the properties of the image I've uploaded then the <strong>Size on disk</strong> is the same as the original image, but the <strong>Size</strong> property is 200-205 bytes larger. That's always the case, no matter how large the image is I upload.</p>
  
  <p>Here's part of the POST headers. I don't need to strip out the <em>boundary</em> part or anything?  </p>
  
  <pre><code>Source
  -----------------------------1944294225892 Content-Disposition: form-data;
  name="imagename"; filename="small.jpg" Content-Type: image/jpeg
  </code></pre>
  
  <p>And some more headers...</p>
  
  <pre><code>Request Headers From Upload Stream
  Content-Length  125661
  Content-Type    multipart/form-data; boundary=---------------------------1944294225892
  </code></pre>