1

I am using a library to recieve attachments (image) from salesforce using OAuth and a proxy. Without the library (and the proxy) I am able to the same using XHR, but I have to use the library because I need the proxy.

In chrome debugger I can see image is downloaded fine, but I can't get it to work in my code. Data looks like:

enter image description here

So far methods I have tried:

  1. btoa(unescape(encodeURIComponent(file.body)));- produces a base64 that does not work. decoding it using online tools gives me back the same string.

  2. escape(file.body) - using this as base64 also does not work.

  3. Converting to a blob. var blob = new Blob([file.body], {type : "image/png"}); urlCreator.createObjectURL(blob); The url it points to displays nothing, and if I remove {type : "image/png"} the url points to a page displaying same binary string.

Varun Garg
  • 2,464
  • 23
  • 37
  • Can you give an example of such a binary so we can try to replicate it? – CertainPerformance Apr 20 '18 at 06:35
  • here it is: https://raw.githubusercontent.com/Varun-garg/CordovaPractice/master/5b90dc1c-7b81-4038-9477-7ea54617bb12.jpeg – Varun Garg Apr 20 '18 at 06:51
  • and the respnse I get from chrome developer tools is: https://gist.githubusercontent.com/Varun-garg/ed23e7e2259da052f09f3f6929087615/raw/b75388019cad8a9c58ab0b6663163ce025af7d48/response . It decodes fine online. – Varun Garg Apr 20 '18 at 06:54
  • What is the type of `file`? Is it an XMLHttpRequest? – idmean Apr 20 '18 at 07:13
  • typeof just shows `object` for `file` and `string` for `file.body` – Varun Garg Apr 20 '18 at 07:14
  • saw this thread bumped recently. looking back now I guess there could be a bug in chrome dev tools while decoding base64 - such as spliting/joining/encoding etc. should have tried with `curl -v` to get a better idea – Varun Garg Sep 07 '21 at 07:56

2 Answers2

1

Long story short this looks like someone read the image with readAsText() which mangles ("interprets") binary into utf8, instead of utf16. You need to get the server to return the data in arraybuffer or blob format ideally, or even base64, these preserve binary.

Long version with snippet. (those question marks symbols in the snippet show the lost information, compare it to the binary where they are not question marks in utf16): https://stackoverflow.com/a/56523118/2962797

Bobakka
  • 46
  • 3
0

I would create an <img /> element, equal its src attribute to the image data you received. Now you have the image.

If you want to extract it or convert it to PNG, I would apply this another answer process.

amedina
  • 2,838
  • 3
  • 19
  • 40
  • You mean directly setting binary string as src? that did not work, and gave `GET http://localhost:8000/%EF%BF%BDPNG%1A%EF%BF%BD%EF%BF%BD ....net::ERR_CONNECTION_REFUSED` – Varun Garg Apr 20 '18 at 07:20
  • @VarunGarg I [tried](https://codepen.io/anon/pen/MGwyWY) to do it and it worked. And you provided me with the string. – amedina Apr 20 '18 at 07:24
  • That string is what I see in chrome dev tools, not the one I got from the library (please see the sreenshot.). – Varun Garg Apr 20 '18 at 07:26
  • @VarunGarg Ok, I understand. But that image is JPEG, and when you tried to decode it in the third method you used, you tried to decode a PNG one. – amedina Apr 20 '18 at 07:40
  • It is actually a png, the `content type` returned here is wrong (jpeg), but that is just for this case only. In other cases it is correct, such as `image/png` . – Varun Garg Apr 20 '18 at 09:07