Search code examples
wcfkendo-uikendo-upload

Kendo UI Upload : how to extract file content from a multi-part form upload using WCF service


I can successfully upload a file using the KendoUpload and WFC service. The issue is that when I attempt to parse the stream using HttpMultipartParser the following statement return null:

byte[] content = parser.FileContents;

The actual content of the file is obtained through this statement:

HttpUtility.UrlDecode(parser.Parameters["files"]) which returns:

"ilename=\"Test1.txt\"\r\nContent-Type: text/plain\r\n\r\nSome text END"

I would like to know:

  1. Whythe parser.FileContents is set to null?
  2. Why is parser.Parameters["files"] embedding meta-data? I was expecting to see the content of my test file as simply 'Some text END'.

Here's the code:

HTML:

<form id="formAttachments" method="post">
    <input class="upload" name="files" type="file" data-role="upload" data-bind="kendoUpload" />
</form>

JavaScript:

            var upload = $(".upload").kendoUpload({

              async: {
                saveUrl: 'UploadFormAttachment',
                autoUpload: false
              },
              multiple: true,
              showFileList: true,
              upload: onFormAttachmentUpload,
            });

        self.onFormAttachmentUpload = function (e) {
           var attachment = $.grep(self.formAttachments(), function (a) {
            return a.uid == e.files[0].uid;
            })

            var importId = self.importId;
            var formId = fm.currentFormDef.id;
            var fileName = e.files[0].name;
            var title = attachment[0].title;
            var description = attachment[0].description;

          e.data = {
              importId: importId,
              formId: formId,
              fileName: fileName,
              title: title,
              description: description
          };
    };

WCF service

    public UploadResponse UploadFormAttachment(Stream uploadRequest)
{
    try
    {
        using (MemoryStream stream = new MemoryStream())
        {
            uploadRequest.CopyTo(stream);
            stream.Position = 0;

            HttpMultipartParser parser = new HttpMultipartParser(stream, "content");
            if (parser.Success)
            {
                string importId = HttpUtility.UrlDecode(parser.Parameters["importid"]);
                int formId = Convert.ToInt32(HttpUtility.UrlDecode(parser.Parameters["formid"]));
                string fileName = HttpUtility.UrlDecode(parser.Parameters["filename"]);
                string title = HttpUtility.UrlDecode(parser.Parameters["title"]);
                string description = HttpUtility.UrlDecode(parser.Parameters["description"]);
                byte[] content = parser.FileContents;

                // parser.FileContents is null!!!
                // HttpUtility.UrlDecode(parser.Parameters["files"]) return content and embedded meta-data (how to get raw data only?)

            }
        }
    }           
}

Solution

  • The reason why fileContents was null is because the HttpMultipartParse was making a reference to content instead of files.

    To fix the problem I changed the name attribute of the Upload HTML element to 'content' as shown below:

    <form id="formAttachments" method="post">
        <input class="upload" name="content" type="file" data-role="upload" data-bind="kendoUpload" />
    </form>