Child Item

Get thumbnail with TypeScript

Hello,

I'm trying to get the thumbnail of an image with the js sdk implemented in a TypeScript application.

I'm using th method fileGetThumbnail() it return a Promise<DropboxTypes.files.FileMetaData> so once the promise is resolve I have an object of the type FileMetaData.

This is fine but the FileMetaData object does not have a fileBlob object in it but when I'm doing a console.log(response), I do have a fileBlob in it...

How am I supposed to get the thumbnail in my application without the blob ?

Thank you for any help

Find more posts tagged with

API

Abuse

Accepted answers

Greg-DB

Using the "fileBlob" property is the right way to get the thumbnail data. Currently, you'll need to access it like this though: https://github.com/dropbox/dropbox-sdk-js/blob/master/examples/typescript/download/download.ts#L10

Apologies this isn't better documented or included in the TypeScript definitions! I'll ask the team to fix that up.

All comments

Greg-DB

Apologies this isn't better documented or included in the TypeScript definitions! I'll ask the team to fix that up.

DavidM27

Thank you for your reply.

Is there any way for me to get to know when this is fixed ?

Greg-DB

Yes, I'll follow up here once I have an update on that. I can't offer a timeline for a fix though, so please use the workaround for now.

bffy_smmmers

hi - is the above issue stil lthe case? the github link detailing the workaround doesnt work and i cannot get this to work at all on typescript. thank you! @Greg-DB

Greg-DB

@bffy_smmmers In browser contexts, you should access the file data using fileBlob like in this example. In node contexts, you should use fileBinary instead, like in this example.

bffy_smmmers

thanks @Greg-DB - this is in a node context! i will give this a try.

bffy_smmmers

@Greg-DB how exactly do i get access to the shared link that is needed? i dont see it being returned on `filesListFolder`. I dont quite understand what I'm meant to pass in in order to return it and use it to get the thumbnail on the node backend. In the example the user is prompted for the shared link.

Greg-DB

@bffy_smmmers Those examples happen to use sharingGetSharedLinkFile, which is a way to retrieve file data from a shared link. That's just an example though, and may not be the right method for your own use case, such as if you're not working from a shared link to begin with. There are other methods for other use cases, but other content download methods enable access to the resulting file data in the same way (i.e., via fileBlob or fileBinary).

So, for instance, if you just want to download a file from the connected account directly, not via a shared link, you would probably want to use the filesDownload method instead. You would pass in the path for the file that you want to download. You can get the path from elsewhere on the API, such as filesListFolder/filesListFolderContinue, etc.

bffy_smmmers

@Greg-DB I'm essentially trying to get just a link to the thumbnail image from a file. Im calling on filesListFolder to get the contents of a folder, and i was hoping to pull off some piece of data from that to feed to sharingGetSharedLinkFile to get the thumbnail, but i dont see any clear/ simple way to do that (but i am a beginner and could be missing something)

Greg-DB

@bffy_smmmers The filesListFolder method doesn't return any file data or shared links. It only returns file metadata. The Dropbox API also doesn't return thumbnail links in general. If you want the original file data, you should call filesDownload. If you want a thumbnail of an image file, you should call filesGetThumbnail. Those return the requested data directly (via fileBlob or fileBinary), but not as a link.

bffy_smmmers

@Greg-DB Thanks, and i am passing in the path to the file, correct? would that not mean the `path_lower` attribute? This does not yield any result for me. Here is my implementation. When i wrap it in a try/catch, i get the error (fetch is not a function) I apologize for not unerstanding, again, I'm new to this. Im trying to put my code in a block, but it gives me an error when i go to post.

async getThumbnail(path: any) {

console.log(`getThumbnail is running with ${path}`)
const data = await this.client.filesGetThumbnail(path)

console.log(<any>data)
//im returning an empty string so it doesnt break anything
return '';

}

Greg-DB

@bffy_smmmers You should use .then and .catch to handle the result/error, like this:

dbx.filesGetThumbnail({path: path})
  .then(function(response) {
    console.log("got filesGetThumbnail response:");
    console.log(response);
    console.log("got thumbnail data:");
    console.log(response.fileBlob);
  })
  .catch(function(error) {
    console.log("got filesGetThumbnail error:");
    console.log(error);
  });