Getting different sizes of thumbnails using the JavaScript Chooser

Getting Different Sizes of Thumbnails Using the JavaScript Chooser

Dropbox recently rolled out improvements to its Chooser JavaScript API, following up on a post from last week. Among the additions is a new set of thumbnails, giving developers the ability not just to specify the size of the thumbnail they want, but also to choose the mode used—for example, crop instead of fit. Full details are available in the JavaScript Chooser documentation.

With this update, the Chooser returns a single thumbnail link. To generate other thumbnail variants, developers can modify the query parameters of that URL. The following example code demonstrates converting a returned thumbnail into one that crops the image to 800x800. This snippet relies on jQuery's $.param method:

// strip off the existing query parameters
var baseThumbnail = files[0].thumbnailLink.split('?')[0];
 
// add "?mode=crop&bounding_box=800"
var cropped = baseThumbnail + '?' + $.param({ mode: 'crop', bounding_box: 800 });