File Upload using WCF REST API and JavaScript

Introduction

Recently, I had the need to upload files. As the architecture that had been chosen implied creating the application client side with HTML/JavaScript consuming WCF services exposed with the REST API, I wanted to keep that orientation and drop every ASP.NET aspect of the application.

Background

I found some requests of information for this on the internet but none was answered in a satisfactory, code example, way. So, when I figured out the way to post a file this way, I also felt the need to share it.

Using the Code

First, we must create the service. As the upload function itself can only have a parameter of type Stream, I return a object with the upload path so I can refer to it after to the server. In my case, I must load a name, read a description, validate a hash but here I will keep it simple...

[DataContract]
public class UploadedFile
{
  [DataMember]
  public string FilePath { get; set; }

  [DataMember]
  public string FileLength { get; set;

  [DataMember]
  public string FileName { get; set; }

  //Other information. On upload only path and size are obvious.
  //...
}

The service contract consists of a method receiving a stream and returning an object with the path where the file was saved. For example purposes, I included another method where we will include a human readable file name.

[ServiceContract(Name = "IWCFUploader"]
public interface IWCFUploader
{
  [OperationContract(Name = "Upload")]
  [DataContractFormat]
  [WebInvoke(Method = "POST",
             UriTemplate = "Upload/",
             BodyStyle = WebMessageBodyStyle.Bare,
             ResponseFormat = WebMessageFormat.Json)]
  UploadedFile Upload(Stream Uploading);

  [OperationContract(Name = "Transform")]
  [DataContractFormat]
  [WebInvoke(Method = "POST",
             UriTemplate = "Transform",
             BodyStyle = WebMessageBodyStyle.Bare,
             ResponseFormat = WebMessageFormat.Json)]
  UploadedFile Transform(UploadedFile Uploading, string FileName);
}

The service behavior is also very straightforward:

[ServiceBehavior(ConcurrencyMode = ConcurrencyMode.Multiple, 
                 InstanceContextMode = InstanceContextMode.PerCall, 
                 IgnoreExtensionDataObject = true, 
                 IncludeExceptionDetailInFaults = true)]
public class WCFUploader : IWCFUploader
{
  #region IWCFUploader Members

  public UploadedFile Upload(Stream Uploading)
  {
    UploadedFile upload = new UploadedFile 
    {
      FilePath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString())
    };

    int length = 0;
    using (FileStream writer = new FileStream(upload.FilePath, FileMode.Create))
    {
      int readCount;
      var buffer = new byte[8192];
      while ((readCount = Uploading.Read(buffer, 0, buffer.Length)) != 0)
      {
        writer.Write(buffer, 0, readCount);
        length += readCount;
      }
    }

    upload.FileLength = length;

    return upload;
  }

  public UploadedFile Transform(UploadedFile Uploading, string FileName)
  {
    Uploading.FileName = FileName;
    return Uploading;
  }

  #endregion
}  

In the web.config, you must remember to set the buffer and the maximum received message to a value that allows you to stream your file and, of course, set transfer mode to streamed. webHttp is also necessary in your endpoint behavior. I had an issue where if I named my binding in the service, I would get strange errors so I named all my other bindings and left the binding used for streaming as default, and it worked. You may also have to configure IIS if you want to upload files over 4.5 megabytes, that is if you need it to host the application.

  <configuration>
  <system.serviceModel>
    <bindings>
      <webHttpBinding>
        <binding maxBufferSize="2147483647"
                 maxBufferPoolSize="2147483647"
                 maxReceivedMessageSize="2147483647"
                 transferMode="Streamed"
                 sendTimeout="00:05:00">
          <readerQuotas  maxDepth="2147483647"
                         maxStringContentLength="2147483647"
                         maxArrayLength="2147483647"
                         maxBytesPerRead="2147483647"
                         maxNameTableCharCount="2147483647"/>
          <security mode="None" />
        </binding>
      </webHttpBinding>
    </bindings>
    <behaviors>
      <endpointBehaviors>
        <behavior name="defaultEndpointBehavior">
          <webHttp/>
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="defaultServiceBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <services>
      <service name="WCFUpload.WCFUploader" behaviorConfiguration="defaultServiceBehavior">
        <endpoint address="" behaviorConfiguration="defaultEndpointBehavior"
          binding="webHttpBinding" contract="WCFUpload.IWCFUploader" />
      </service>
    </services>
  </system.serviceModel>
</configuration> 

The JavaScript code is painfully simple. I tried so much stuff that when I finally figured this out, I felt really stupid.

function upload() {
  var request = new XMLHttpRequest();
  request.open('POST', 'wcf/WCFUploader.svc/Upload/');
  request.send(filePicker.files[0]);
} 

The HTML is as plain as it gets:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Uploading using WCF REST API</title>
    <script type="text/javascript">

        function uploadBlobOrFile(blobOrFile) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'wcf/WCFUploader.svc/Upload/', true);

            xhr.setRequestHeader('Content-length', blobOrFile.size);

            xhr.onload = function (e) {
                progressBar.value = 0;
                progressBar.textContent = progressBar.value;
            };

            // Listen to the upload progress.
            var progressBar = document.querySelector('progress');
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    progressBar.value = (e.loaded / e.total) * 100;
                    progressBar.textContent = progressBar.value; // Fallback.
                }
            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            };

            xhr.send(blobOrFile);
        }

    </script>
</head>
<body>
    <input id="filePicker" type="file" name="Package" accept="image/*"/>
    <br />
    <progress min="0" max="100" value="0">0% complete</progress>
    <br />
    <button title="upload" 
            onclick="if (filePicker.files[0]) uploadBlobOrFile(filePicker.files[0])">
        <span>Upload</span>
    </button>
</body>
</html> 

I included a progress bar and it worked fine on the latest Firefox, Chrome and Internet Explorer. Hope it helps you.