Corrupted file when uploading file to server using ajax and WCF

Question

I'm trying to implement image upload using jquery, ajax and wcf on server side. Operation contract:

    [WebInvoke(UriTemplate = "/createnewsfeedpost?fileName={fileName}", Method = "POST", ResponseFormat = WebMessageFormat.Json)]
    [OperationContract]
    void CreateNewsfeedPost(Stream imageContent, string fileName);

Operation implementation:

public void CreateNewsfeedPost(Stream imageContent, string fileName)
    {
        byte[] buffer = new byte[32768];
        using (var ms = new FileStream(@"C:/Temp/test.png", FileMode.CreateNew))
        {
            int bytesRead, totalBytesRead = 0;
            do
            {
                bytesRead = imageContent.Read(buffer, 0, buffer.Length);
                totalBytesRead += bytesRead;

                ms.Write(buffer, 0, bytesRead);
            } while (bytesRead > 0);

         }
   }

Client side code:

      <a id="createNewsFeedPostButton" href="javascript:;">Share</a>
      <input type="file" id="newsFeedImage" />

Javascript:

$(document).ready(function () {
        $("#createNewsFeedPostButton").click(function () {
            createNewsFeedPost();
        });
    });

function createNewsFeedPost() {
        var fd = new FormData();
        fd.append('file', $('#newsFeedImage')[0].files[0]);
        $.ajax({
            url:/createnewsfeedpost + "?fileName=test.png",
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function (data) {
                alert('sas');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus + ' / ' + errorThrown);
            }
        });
  }

I am able to get populated Stream object in service implementation but the problem is that it is somewhat corrupted. If i open saved file using notepad i can see some strange header and footer in it.

Header:

-----------------------------7de17128101f8
Content-Disposition: form-data; name="file"; filename="C:\icon.png"
Content-Type: image/png

Footer:

-----------------------------7de17128101f8--

Is there any way to get rid of this footer and header?

There is nothing wrong with this request. You will simply need to properly handle [multipart encoded requests](http://www.ietf.org/rfc/rfc2388.txt) server-side. — Ray Nicholus, Jan 14 '14 at 18:22
Please post an answer with your modified server code so others can benefit. — Ray Nicholus, Jan 14 '14 at 18:36
Are you sure that i should post it? I think it won't be fair if i post it, you should do it. — Yevgeniy.Chernobrivets, Jan 14 '14 at 18:40

score 2 · Answer 1 · answered Jan 14 '14 at 18:51

Thanks to Ray Nicholus for the solution. I needed to parse message body as multipart data to be able to access image content. I took multipart parser from here.

Updated server side code:

var parser = new MultipartParser(imageContent);
if (!parser.Success)
    throw new ApplicationException("Error while parsing image file");

using (var ms = new FileStream(@"C:/Temp/test.png", FileMode.CreateNew))
{
    ms.Write(parser.FileContents, 0, parser.FileContents.Length);
}

Corrupted file when uploading file to server using ajax and WCF

1 Answers1