cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Share your feedback on the Document Scanning Experience in the Dropbox App right here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

fileBinary thumbnail in Node, passed to Browser, cannot display in any format.

fileBinary thumbnail in Node, passed to Browser, cannot display in any format.

lucasblue7
Explorer | Level 3
Go to solution

The Scenario: We have a Nodejs app that uses the dropbox javascript SDK. On the front end, we have Web and iOS clients that talk to our Node app and ask it for file listings. That much works. We get our results. 

 

The problem: Thumbnails. 

 

In node, I get a fileBinary by calling:

filesGetThumbnail ({path: <mypath>, size: {'.tag': 'w64h64'}}))

 

I serve this thumbnail to our front end, per recommendations: 

Buffer.from(fileBinary).toString('base64')

I've also tried many other variations, such as 

Buffer.from(fileBinary, 'binary').toString ('base64') 
// as well as 'utf8', 'latin1', new Buffer() instead, etc

 

I've verified that our client receives the thumbnail just as Node sends it. So far so good. 

But I cannot get the image to display.

 

I've tried a dozen variations in our React client, such as: 

<img src={"data&colon;image/jpeg;base64," +imageData} />
<img src={"data&colon;image/jpeg;charset=binary;base64," +imageData} />
// also more charsets, a space, atob(), several stackoverflow solutions,...

 

But 100% of all combinations of encodings and charsets result in broken images. 

 

I've noticed that there are essentially 2 types encoded formats I can produce and send to the browser: 

#1 looks like "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBQYFB etc.

#2 looks like "77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+" etc

 

Looking online, This decoder prefers the second format, while this encoder produces the first format. 

 

But either way, in either format, none of these display, all appear broken.

Can someone please advise? 

Thanks,

Lucas

1 Accepted Solution

Accepted Solutions

Greg-DB
Dropbox Staff
Go to solution
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.

View solution in original post

2 Replies 2

Greg-DB
Dropbox Staff
Go to solution
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.

lucasblue7
Explorer | Level 3
Go to solution

Hi Greg, I just installed the latest version, per your docs, only 3 days ago. v4.0.0 must have been just released.

I installed v4 and thumbs work fine now. I wish the issue had been documented. Thanks, Lucas

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    lucasblue7 Explorer | Level 3
  • User avatar
    Greg-DB Dropbox Staff
What do Dropbox user levels mean?