0

I'm trying to download and display an image that is returned from a wcf service using jQuery.ajax. I'm not able to work with the data I've received and I'm not sure why. I've tried a lot of things but nothing seems to work.

Here the service :

    public Stream DownloadFile(string fileName, string pseudoFileName)
    {
        string filePath = Path.Combine(PictureFolderPath, fileName);
        if (System.IO.File.Exists(filePath))
        {
            FileStream resultStream = System.IO.File.OpenRead(filePath);
            WebOperationContext.Current.OutgoingResponse.ContentType = "application/x-www-form-urlencoded";
            return resultStream;
        }
        else
        {
            throw new WebFaultException(HttpStatusCode.NotFound);
        }
    }

Here my ajax call : 

            $.ajax({
                type: "GET",
                url: apiURL + serviceDownloadFile.replace('{filename}', filename),
                headers: headers,
                contentType: "application/x-www-form-urlencoded",
                processData : false,
                success: function(response) { 
                    var html = '<img src="data:image/jpeg;base64,' + base64encode(response) +'">';
                    $("#activitiesContainer").html(html);
                },
                error: function (msg) {
                    console.log("error");
                    console.log(msg);
                }
            });

Putting the url in a <img> tag does display the image properly, but since the service requires an authorization header, the page ask me for credentials each time.

So my question is, what to do this the response data so I can display it ? using btoa(); on the response displays an error :

string contains an invalid character

Thanks.

Ian Beaubien
  • 38
  • 7
  • why would response contentType be `"application/x-www-form-urlencoded"` ? Not clear what the auth issue is. Assume that is covered by the sent headers? – charlietfl Jan 20 '15 at 18:03
  • Because the service can return any kind of file, but for this specific part, I'm sure the file is an image. There's no auth issue, the problem is with the data I'm receiving. – Ian Beaubien Jan 20 '15 at 18:05
  • what does image have to do with form encoding though? – charlietfl Jan 20 '15 at 18:07
  • I have no idea.. this is pretty new to me. And I didn't code the service, someone else did. I'm pretty much working with something I don't really know about.. – Ian Beaubien Jan 20 '15 at 18:08
  • Why are you even using ajax? – Musa Jan 20 '15 at 18:14
  • To load the image asynchronously on the fly. Is there a better way to do it ? – Ian Beaubien Jan 20 '15 at 18:15
  • I'd just set the img src to the request url – Musa Jan 20 '15 at 18:18
  • As i said in my post, doing that doesn't set the authorization header, so the page asks for credentials. – Ian Beaubien Jan 20 '15 at 18:19
  • may this helps http://stackoverflow.com/questions/710853/base64-string-throwing-invalid-character-error – Satinder singh Jan 20 '15 at 18:25
  • 1
    Well you cant do that with jQuery, you'll have to use bare XHR2 – Musa Jan 20 '15 at 18:39
  • Unfortunately it does not. Can the problem be related to the encoding of the response ? If I log it, i see this : `����)�Exif��MM�*������������������b�������j(�������1�������r2���������i������������� ����'� ����'Adobe Photoshop CS5 Macintosh�2014:11:07 10:38:55������������������8�������8���` – Ian Beaubien Jan 20 '15 at 18:44

1 Answers1

0

As suggested by Musa, using XMLHttpRequest directly did the trick.

            var xhr = new XMLHttpRequest();
            xhr.open('GET', apiURL + serviceDownloadFile.replace('{filename}', filename).replace('{pseudofilename}', fileNameExt), true);
            xhr.responseType = 'blob';
            xhr.setRequestHeader("authorization","xxxxx");

            xhr.onload = function(e) {
              if (this.status == 200) {
                var blob = this.response;

                var img = document.createElement('img');
                img.onload = function(e) {
                  window.URL.revokeObjectURL(img.src); // Clean up after yourself.
                };
                img.src = window.URL.createObjectURL(blob);
                document.body.appendChild(img);
              }
            };

            xhr.send();
Ian Beaubien
  • 38
  • 7