<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic fileBinary thumbnail in Node, passed to Browser, cannot display in any format. in Dropbox API Support &amp; Feedback</title>
    <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/fileBinary-thumbnail-in-Node-passed-to-Browser-cannot-display-in/m-p/266985#M15678</link>
    <description>&lt;P&gt;&lt;STRONG&gt;The Scenario&lt;/STRONG&gt;: We have a&amp;nbsp;Nodejs app&amp;nbsp;that uses the&amp;nbsp;dropbox javascript SDK. On the front end, we have Web and iOS clients&amp;nbsp;that&amp;nbsp;talk to&amp;nbsp;our Node app&amp;nbsp;and ask it for&amp;nbsp;file listings. That much works. We get our results.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;The problem&lt;/STRONG&gt;: Thumbnails.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;In node, I get a&amp;nbsp;fileBinary by calling:&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;filesGetThumbnail &lt;/SPAN&gt;({&lt;SPAN&gt;path&lt;/SPAN&gt;: &lt;SPAN&gt;&amp;lt;mypath&amp;gt;&lt;/SPAN&gt;, &lt;SPAN&gt;size&lt;/SPAN&gt;: {&lt;SPAN&gt;'.tag'&lt;/SPAN&gt;: &lt;SPAN&gt;'w64h64'&lt;/SPAN&gt;}}))&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I serve&amp;nbsp;this thumbnail&amp;nbsp;to our front end,&amp;nbsp;per recommendations:&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;Buffer&lt;/SPAN&gt;.from(&lt;SPAN&gt;fileBinary&lt;/SPAN&gt;).&lt;SPAN&gt;toString&lt;/SPAN&gt;(&lt;SPAN&gt;'base64'&lt;/SPAN&gt;)&lt;/PRE&gt;&lt;P&gt;I've also tried&amp;nbsp;many&amp;nbsp;other variations, such as&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;Buffer&lt;/SPAN&gt;.from(&lt;SPAN&gt;fileBinary, 'binary'&lt;/SPAN&gt;).&lt;SPAN&gt;toString &lt;/SPAN&gt;(&lt;SPAN&gt;'base64'&lt;/SPAN&gt;) &lt;BR /&gt;// as well as 'utf8', 'latin1', new Buffer() instead, etc &lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I've verified that our client receives&amp;nbsp;the thumbnail&amp;nbsp;just as&amp;nbsp;Node&amp;nbsp;sends it. So far so good.&amp;nbsp;&lt;/P&gt;&lt;P&gt;But I cannot get the image to display.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I've tried a dozen variations in our React client, such as:&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&amp;lt;img src={&lt;SPAN&gt;"data&amp;amp;colon;image/jpeg;base64," &lt;/SPAN&gt;+imageData} /&amp;gt;&lt;/PRE&gt;&lt;PRE&gt;&amp;lt;img src={&lt;SPAN&gt;"data&amp;amp;colon;image/jpeg;charset=binary;base64," &lt;/SPAN&gt;+imageData} /&amp;gt;&lt;BR /&gt;// also more charsets, a space, atob(), several stackoverflow solutions,...&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;But 100% of all combinations of encodings and charsets result in broken images.&amp;nbsp;&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I've noticed that there are essentially 2 types&amp;nbsp;encoded formats I can&amp;nbsp;produce and send to the browser:&amp;nbsp;&lt;/P&gt;&lt;P&gt;#1&amp;nbsp;looks like "&lt;SPAN&gt;/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBQYFB etc.&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;#2&amp;nbsp;looks like "77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+" etc&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Looking online,&amp;nbsp;&lt;A href="https://www.base64decode.org/" target="_blank"&gt;This decoder&lt;/A&gt;&amp;nbsp;prefers the second format, while &lt;A href="https://www.base64-image.de/" target="_blank"&gt;this encoder&lt;/A&gt; produces the first format.&amp;nbsp;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;But either way, in either format,&amp;nbsp;none of these&amp;nbsp;display, all&amp;nbsp;appear broken.&lt;BR /&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Can&amp;nbsp;someone please advise?&amp;nbsp;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Thanks,&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Lucas&lt;/SPAN&gt;&lt;/P&gt;</description>
    <pubDate>Wed, 29 May 2019 09:15:01 GMT</pubDate>
    <dc:creator>lucasblue7</dc:creator>
    <dc:date>2019-05-29T09:15:01Z</dc:date>
    <item>
      <title>fileBinary thumbnail in Node, passed to Browser, cannot display in any format.</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/fileBinary-thumbnail-in-Node-passed-to-Browser-cannot-display-in/m-p/266985#M15678</link>
      <description>&lt;P&gt;&lt;STRONG&gt;The Scenario&lt;/STRONG&gt;: We have a&amp;nbsp;Nodejs app&amp;nbsp;that uses the&amp;nbsp;dropbox javascript SDK. On the front end, we have Web and iOS clients&amp;nbsp;that&amp;nbsp;talk to&amp;nbsp;our Node app&amp;nbsp;and ask it for&amp;nbsp;file listings. That much works. We get our results.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;The problem&lt;/STRONG&gt;: Thumbnails.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;In node, I get a&amp;nbsp;fileBinary by calling:&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;filesGetThumbnail &lt;/SPAN&gt;({&lt;SPAN&gt;path&lt;/SPAN&gt;: &lt;SPAN&gt;&amp;lt;mypath&amp;gt;&lt;/SPAN&gt;, &lt;SPAN&gt;size&lt;/SPAN&gt;: {&lt;SPAN&gt;'.tag'&lt;/SPAN&gt;: &lt;SPAN&gt;'w64h64'&lt;/SPAN&gt;}}))&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I serve&amp;nbsp;this thumbnail&amp;nbsp;to our front end,&amp;nbsp;per recommendations:&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;Buffer&lt;/SPAN&gt;.from(&lt;SPAN&gt;fileBinary&lt;/SPAN&gt;).&lt;SPAN&gt;toString&lt;/SPAN&gt;(&lt;SPAN&gt;'base64'&lt;/SPAN&gt;)&lt;/PRE&gt;&lt;P&gt;I've also tried&amp;nbsp;many&amp;nbsp;other variations, such as&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;Buffer&lt;/SPAN&gt;.from(&lt;SPAN&gt;fileBinary, 'binary'&lt;/SPAN&gt;).&lt;SPAN&gt;toString &lt;/SPAN&gt;(&lt;SPAN&gt;'base64'&lt;/SPAN&gt;) &lt;BR /&gt;// as well as 'utf8', 'latin1', new Buffer() instead, etc &lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I've verified that our client receives&amp;nbsp;the thumbnail&amp;nbsp;just as&amp;nbsp;Node&amp;nbsp;sends it. So far so good.&amp;nbsp;&lt;/P&gt;&lt;P&gt;But I cannot get the image to display.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I've tried a dozen variations in our React client, such as:&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&amp;lt;img src={&lt;SPAN&gt;"data&amp;amp;colon;image/jpeg;base64," &lt;/SPAN&gt;+imageData} /&amp;gt;&lt;/PRE&gt;&lt;PRE&gt;&amp;lt;img src={&lt;SPAN&gt;"data&amp;amp;colon;image/jpeg;charset=binary;base64," &lt;/SPAN&gt;+imageData} /&amp;gt;&lt;BR /&gt;// also more charsets, a space, atob(), several stackoverflow solutions,...&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;But 100% of all combinations of encodings and charsets result in broken images.&amp;nbsp;&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I've noticed that there are essentially 2 types&amp;nbsp;encoded formats I can&amp;nbsp;produce and send to the browser:&amp;nbsp;&lt;/P&gt;&lt;P&gt;#1&amp;nbsp;looks like "&lt;SPAN&gt;/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBQYFB etc.&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;#2&amp;nbsp;looks like "77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+" etc&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Looking online,&amp;nbsp;&lt;A href="https://www.base64decode.org/" target="_blank"&gt;This decoder&lt;/A&gt;&amp;nbsp;prefers the second format, while &lt;A href="https://www.base64-image.de/" target="_blank"&gt;this encoder&lt;/A&gt; produces the first format.&amp;nbsp;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;But either way, in either format,&amp;nbsp;none of these&amp;nbsp;display, all&amp;nbsp;appear broken.&lt;BR /&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Can&amp;nbsp;someone please advise?&amp;nbsp;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Thanks,&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Lucas&lt;/SPAN&gt;&lt;/P&gt;</description>
      <pubDate>Wed, 29 May 2019 09:15:01 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/fileBinary-thumbnail-in-Node-passed-to-Browser-cannot-display-in/m-p/266985#M15678</guid>
      <dc:creator>lucasblue7</dc:creator>
      <dc:date>2019-05-29T09:15:01Z</dc:date>
    </item>
    <item>
      <title>Re: fileBinary thumbnail in Node, passed to Browser, cannot display in any format.</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/fileBinary-thumbnail-in-Node-passed-to-Browser-cannot-display-in/m-p/267069#M15684</link>
      <description>What version of the JavaScript SDK are you using? There was a binary formatting issue in v3.x, fixed in v4. Please upgrade to v4 if you aren't using that already and let me know if that doesn't help.</description>
      <pubDate>Thu, 01 Mar 2018 14:35:19 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/fileBinary-thumbnail-in-Node-passed-to-Browser-cannot-display-in/m-p/267069#M15684</guid>
      <dc:creator>Greg-DB</dc:creator>
      <dc:date>2018-03-01T14:35:19Z</dc:date>
    </item>
    <item>
      <title>Re: fileBinary thumbnail in Node, passed to Browser, cannot display in any format.</title>
      <link>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/fileBinary-thumbnail-in-Node-passed-to-Browser-cannot-display-in/m-p/267128#M15694</link>
      <description>&lt;P&gt;Hi Greg, I just installed the latest version, per your docs,&amp;nbsp;only&amp;nbsp;3 days ago. v4.0.0 must have been&lt;STRONG&gt; just&lt;/STRONG&gt; released.&lt;/P&gt;&lt;P&gt;I installed&amp;nbsp;v4&amp;nbsp;and thumbs work fine now.&amp;nbsp;I wish the issue&amp;nbsp;had been documented. Thanks, Lucas&lt;/P&gt;</description>
      <pubDate>Thu, 01 Mar 2018 19:51:26 GMT</pubDate>
      <guid>https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/fileBinary-thumbnail-in-Node-passed-to-Browser-cannot-display-in/m-p/267128#M15694</guid>
      <dc:creator>lucasblue7</dc:creator>
      <dc:date>2018-03-01T19:51:26Z</dc:date>
    </item>
  </channel>
</rss>

