Using the Chooser with specific file extensions

Posted by Chris Varenhorst on August 14, 2013

With the Chooser, apps can ask the user to select a file from Dropbox. For some scenarios, like a photo-editing app, it may only make sense to select files with certain extensions. Today we added support to the web Chooser to filter files based on extension. We expect to add this feature to the Android and iOS Choosers in the future.

To use the new extension filtering, you can either use the extensions option when calling Dropbox.Choose(options) or set the value of the data-extensions property when using the <input> tag. In addition to individual file extensions (like .pdf or .jpg), you can add entire file types, including images, audio, video, documents and text.

The following HTML will filter the Chooser to only .jpg and .png files:

<input type="dropbox-chooser" data-extensions=".jpg .png" data-link-type="direct" />

For the full details on this and other Chooser features, read the web Chooser documentation.

Try it out!

When using the Chooser with a file extension filter, users will still see all their files, but files that don’t match the allowed extensions will be grayed out and unselectable. You can see this in action by trying out this simple example, which only allows you to select .jpg and .png files:

(If you don't see the example in your reader, try viewing this post on our blog.)

Give us feedback

Thank you to the developers who suggested this feature on our developer forum. Keep the suggestions coming!