title: AngularJS + WCF REST File Upload
body: <p>i have a question concerning the upload of files to a WCF REST Service from a AngularJS client side application. The uploaded file should afterwards be stored in a Azure Blob Storage. 
  At the moment the implementation works for text and pdf-files but I do not get this working with Image-Files. Images and other type of data are damaged after the actual upload.
  So I want to show you the relevant parts of the Code. In the AngularJS application I use the HTML5 File-Api to select the file. After that I use a AngularJS Service, which takes the file and performes a Post-Request:</p>
  
  <pre><code>srv.uploadFile = function(id, file){
      return $http.post(DEV_ENV_CONFIG.BASE_SERVER_URL + '/xml' + '/fileUpload/' + file.name + '/' + id, file,
          {withCredentials: true, headers: {'Content-Type': undefined }, transformRequest: angular.identity}).then(function(response){
  
          });
  };
  </code></pre>
  
  <p>On the Server side I wrote a WCF REST Service which takes the Stream:</p>
  
  <pre><code>[OperationContract]
      [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "xml/fileUpload/{fileName}/{expenseId}")]
      void FileUploadAsXml(string fileName, string expenseId, Stream Args);
  </code></pre>
  
  <p>Afterwards I tried at first to save the file on the Server-side file System via FileStream. The Problem is as I mentioned above, that this approach works with PDF files but Images and also for example Excel-files are damaged and can not be opened.
  I also changed the binding in the Web.config to the following:</p>
  
  <pre><code>&lt;binding name="http"
               maxBufferSize="2147483647"
               maxBufferPoolSize="2147483647"
               maxReceivedMessageSize="2147483647"
               sendTimeout="00:05:00"
               transferMode="Streamed"&gt;
        &lt;readerQuotas  maxDepth="2147483647"
                       maxStringContentLength="2147483647"
                       maxArrayLength="2147483647"
                       maxBytesPerRead="2147483647"
                       maxNameTableCharCount="2147483647"/&gt;
  
        &lt;security mode="None"&gt;
          &lt;transport clientCredentialType="None"/&gt;
        &lt;/security&gt;
      &lt;/binding&gt;
  </code></pre>
  
  <p>So that the Transfer of larger Files works. So my question is, why the Transfer of Images leads to damaged Files. Do you have any idea? is it maybe because of the Content type of the Request?</p>