nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

How use /get_thumbails response

mattia o.

Hi, I'm trying to figure out how I should use the response of the /get_thumbnail call.

What I'm actually receiving are some raw data like the following:

�����&#16;JFIF�&#1;&#1;��&#1;�&#1;�����C�&#6;&#4;&#5;&#6;&#5;&#4;&#6;&#6;&#5;&#6;&#7;&#7;&#6;&#8;
&#16;


&#20;&#14;&#15;&#12;&#16;&#23;&#20;&#24;&#24;&#23;&#20;&#22;&#22;&#26;&#29;%&#31;&#26;&#27;#&#28;&#22;&#22; , #&')*)&#25;&#31;-0-(0%()(���C&#1;&#7;&#7;&#7;
&#8;
&#19;

&#19;(&#26;&#22;&#26;((((((((((((((((((((((((((((((((((((((((((((((((((���&#17;&#8;�@�0&amp;#3;&#1;"�&#2;&#17;&#1;&#3;&#17;&#1;���&#31;��&#1;&#5;&#1;&#1;&#1;&#1;&#1;&#1;��������&#1;&#2;&#3;&#4;&#5;&#6;&#7;&#8;	
&#11;����&#16;�&#2;&#1;&#3;&#3;&#2;&#4;&#3;&#5;&#5;&#4;&#4;��&#1;}&#1;&#2;&#3;�&#4;&#17;&#5;&#18;!1A&#6;&#19;Qa&#7;"q&#20;2���&#8;#B��&#21;R��$3br�	
&#22;&#23;&#24;&#25;&#26;%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz����������������������������������������������������������������������������&#31;&#1;�&#3;&#1;&#1;&#1;&#1;&#1;&#1;&#1;&#1;&#1;������&#1;&#2;&#3;&#4;&#5;&#6;&#7;&#8;	
&#11;����&#17;�&#2;&#1;&#2;&#4;&#4;&#3;&#4;&#7;&#5;&#4;&#4;�&#1;&#2;w�&#1;&#2;&#3;&#17;&#4;&#5;!1&#6;&#18;AQ&#7;aq&#19;"2�&#8;&#20;B����	#3R�&#21;br�
&#22;$4�%�&#23;&#24;&#25;&#26;&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�....

Which type of convertion I should apply in order to use it in a <img /> tag?

Thanks for your help

Find more posts tagged with

API

Abuse

Comments

Greg-DB

The get_thumbails endpoint returns the raw data for the thumbnail itself, and it looks like that's working properly for you.

What you do with that thumbnail data is up to you. For example, you can save it to a local file on your server and serve it in an img tag. Or, you may be able to convert it to base64 and use it in a data URI for the src for an img tag. Both of those are themselves unrelated to Dropbox itself though, so I'm afraid I can't offer too much insight there.

wishfuluser

Hi Greg—I realize this is not the right way to ask what I'm about to ask, but I'm not sure what else to try...and your posts are the best evidence I can find of Dropboxers engaging on this site.

A high number of users are experiencing sync challenges because very basic information (file and folder sizes; number of items in folders; etc.) are not surfaced to users in web view. This seems like very very basic stuff that is unavailable and it is causing lots of users' pain points. Inability to see this very basic information makes Selective Sync highly manual at best or essentially impossible at worst.

This is a very, very old thread with many upvotes and new users joining every week...but it receives no attention because it is in the (perhaps ignored?) feature request area. Would anyone at Dropbox be able to give this some attention?

https://www.dropboxforum.com/t5/Dropbox/See-folder-size/idc-p/213349#M43590

Thanks—from @wishfuluser and hundreds of others.

mattia o.

I'm trying the solution below but I'm not be able to display the image, could you please add a js example?

// data represents the response of the /get_thumbnail
var imgsrc='data&colon;image/jpeg;base64,' + btoa(escape(data));
var img = new Image(100, 100); // width, height values are optional params 

img.src=imgsrc;

document.body.appendChild(img);

Greg-DB

Hi @wishfuluser, thanks for reaching out, but for future reference, please do not post unrelated replies in threads like this. It makes it more difficult to keep track of the conversation in the thread.

That said, I'm afraid I can't help with the topic you linked to, as that's not my area of expertise. I know that other Dropbox employees do read user feedback like this, even if they don't always respond.

Greg-DB

[Cross-linking for reference: https://stackoverflow.com/questions/43026363/convert-dropbox-get-thumbnail-response-to-img ]

Hi @mattia o., it looks like there are some examples of doing this here:

https://stackoverflow.com/questions/20035615/using-raw-image-data-from-ajax-request-for-data-uri

I recommend looking into using the official Dropbox API v2 JavaScript SDK though, as it may make this easier. For example, you could probably then do something like:

dbx.filesGetThumbnail({"path": "/test.jpg"})
  .then(function(response) {
    var img = document.createElement('img');
    img.src=window.URL.createObjectURL(response.fileBlob);
    document.body.appendChild(img);
  })
  .catch(function(error) {
    console.log("got error:");
    console.log(error);
  });

wishfuluser

Hi Greg—thanks very much for your response.

I realized I was breaching forum etiquette when I posted here, and I do apologize for that.

I would be happy to stay in the original thread—if I thought there was any chance of its receiving attention. But it clearly doesn't; it's many years old and no Dropboxers post anywhere in that area of this site. Customer support has been likewise unresponsive.

You've indicated that other Dropboxers read user feedback—do you know of a particular individual with whom I could interact? I'd be happy to refrain from further messages in odd places like this if there were an active channel I could use.

Thanks again for your attention, and I apologize for my initiating a parallel conversation on this unrelated thread.

Greg-DB

@wishfuluser Unfortunately I'm afraid I don't have anyone in particular I can direct you to.

slolal25

It is indeed raw file data! However, in this case it works similarly to opening a JPEG image in notepad and copying it into another empty notepad file and renaming the file extension to JPEG - you may notice that the second file will not display an image and return an error! Depending on what media you are using to copy and paste this binary data, it may store it incorrectly then paste the corrupted data.

I too had this same issue with many question marks showing up in the JFIF content-download returned from get_thumbnail API. I'm curious how it would work with DataURI but I was able to convert the returned JPEG/JFIF into an img tag by first converting it into a "blob" like below AND setting overrideMimeType to the "text/plain"

Below is a Javascript example using XMLHttpRequest that I used in my project:

const Http = new XMLHttpRequest();
const url = 'https://content.dropboxapi.com/2/files/get_thumbnail_v2';

//make sure that all text stays as plain text when read in...
Http.overrideMimeType('text/plain; charset=x-user-defined');

Http.open("POST", url);

Http.responseType = "blob";

Http.setRequestHeader('Authorization', 'Bearer ' + access_token_dropbox);

Http.setRequestHeader('Dropbox-API-Arg', JSON.stringify(data));

Http.send();

Http.onreadystatechange = (e) => {

if (Http.readyState === 4) {
let jpegData = Http.response;

var imageUrl = URL.createObjectURL(Http.response);

document.getElementById("firstDiv").innerHTML = `<img src="${imageUrl}" alt="jo mama" />`;
}}

I got this idea from another question posed here that had a similar issue and was resolved by changing xmlhttprequest.responseType to "blob"