title: Unable to display file in browser angularjs via webapi
body: <p>I am trying to download a file returned from Web API to angular client. The problem is that the file does not open, i.e pdf the browser displays "failed to load" or for a text file, in the content "undefined". Please view the screen shots for clarity.</p>
  
  <p>I am returning a <code>HttpResponseMessage</code> from the server, the response.Content contains <code>MemoryStream</code> of a file returned from wcf service.</p>
  
  <p>I am not sure why it is not working, I have tried a number of things suggested on here and looked at some other articles. </p>
  
  <p>I have set responseType to arraybuffer, tried to return <code>ByteArrayConent</code>, <code>StreamContent</code>. </p>
  
  <p>In the UI, tried to create a blob and file, further more invoking window.URL.createObjectURL and window.open methods as well as trying window.location.href.</p>
  
  <p>In order to rule out if something is wrong with the stream, tested the returned stream in asp.net mvc app and it returns and opens the file as expected in the browser. So the stream coming back from wcf service is ok.</p>
  
  <p><strong>Server:</strong></p>
  
  <pre><code>public HttpResponseMessage DownloadDocument(string filename)
          {
              var proxy = new WCFService();
              Stream fileStream = null;
              var storage = proxy.GetObject("param", "foo.txt", "param", out fileStream);
  
              if (fileStream != null)
              {
                  var mstream = new MemoryStream();
                  fileStream.CopyTo(mstream);
                  var result = new HttpResponseMessage(HttpStatusCode.OK)
                  {
                      //Content = new StreamContent(mstream)
                      Content = new ByteArrayContent(mstream.ToArray())
                  };
  
                  result.Content.Headers.ContentLength = mstream.Length;
                  result.Content.Headers.ContentType = new MediaTypeHeaderValue(storage.ContentType);
                  result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachement")
                  {
                      FileName = storage.FileName,
                      Size = mstream.Length
                  };
  
                  return result;
              }
              return new HttpResponseMessage(HttpStatusCode.NotFound);
  
          }
  </code></pre>
  
  <p><strong>UI:</strong></p>
  
  <pre><code>  $http.get('http://service/api/doc/downloaddoc?filename=null', { responseType: 'arraybuffer' })
        .success(function (data) {
           var contentType = 'application/pdf';
           var blob = new Blob([data], { type: contentType });
           var file = new File([blob], 'foo.pdf');
           var url = window.URL.createObjectURL(blob);
           window.open(url, 'f');
  
  }
  </code></pre>
  
  <p><strong>Also tried:</strong> </p>
  
  <pre><code> var reader = new FileReader();
   var out = new Blob([this.response], { type: contentType });
   reader.onload = function (e) {
      window.open(reader.result);
    }
    reader.readAsDataURL(out);
  </code></pre>
  
  <p><strong>Screenshots:</strong>
  <a href="https://i.stack.imgur.com/BeU8X.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BeU8X.jpg" alt="TextFile"></a></p>
  
  <p><a href="https://i.stack.imgur.com/9Rejf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Rejf.png" alt="PDF"></a></p>