---
title: "Tiny Drive Browse API"
description: "Using the Tiny Drive Browse API"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/tinydrive-browse/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/tinydrive-browse/index.md"
version: "7"
last_updated: "2022-11-30T01:26:11Z"
tokens: 880
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/tinydrive-browse/).
# Tiny Drive Browse API

The `tinydrive.browse` method allows users to browse the files stored in Tiny Drive. The dialog will allow users to manage the files in the Tiny Drive, such as adding, moving, previewing, and deleting files. The API returns a promise that will resolve when the Tiny Drive dialog is closed by using the close button.

## Interactive example: Using `tinydrive.browse`

**Example**

```js
tinymce.init({
  selector: 'textarea#drive-browse-example',
  height: 200,
  menubar: false,
  plugins: 'tinydrive link image media',
  toolbar: 'custom | insertfile | link image media',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  setup: (editor) => {
    editor.ui.registry.addButton('custom', {
      text: 'Custom browse',
      onAction: () => {
        editor.plugins.tinydrive.browse({
        }).then(() => {
          console.log('Tiny Drive dialog closed.');
        });
      }
    });
  }
});
```

## Options

### `filetypes`

This option restricts the files displayed based on the following file type categories:

`document` `doc`, `xls`, `ppt`, `pps`, `docx`, `xlsx`, `pptx`, `pdf`, `rtf`, `txt`, `key`, `pages`, `numbers`

`audio` `wav`, `wave`, `mp3`, `ogg`, `oga`, `ogx`, `ogm`, `spx`, `opus`

`video` `mp4`, `m4v`, `ogv`, `webm`, `mov`

`image` `gif`, `jpeg`, `jpg`, `jpe`, `jfi`, `jif`, `jfif`, `pjpeg`, `pjp`, `png`, `tif`, `tiff`, `bmp`, `webp`, `avif`, `apng`

`archive` `zip`

For example: If the application is using Tiny Drive to insert images, then set `['image']` in the file types array.

**Type:** `Array`

#### Interactive example: Using `filetypes` to restrict Tiny Drive to image formats

**Example**

```js
tinymce.init({
  selector: 'textarea#drive-pick-images-example',
  height: 200,
  menubar: false,
  plugins: 'tinydrive link image media',
  toolbar: 'custom | insertfile | link image media',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  setup: (editor) => {
    editor.ui.registry.addButton('custom', {
      text: 'Custom pick image',
      onAction: () => {
        editor.plugins.tinydrive.pick({
          filetypes: ['image']
        }).then((result) => {
          result.files.forEach((file) => {
            const img = editor.dom.createHTML('img', { src: file.url });
            editor.insertContent(img);
          });
        });
      }
    });
  }
});
```

### `max_image_dimension`

This option constrains the width and height of uploaded images. When specified, any images with a greater width or height than the specified amount would be proportionally resized down to the specified maximum dimension.

**Type:** `Number`

#### Example: using `max_image_dimension` with the tinydrive.browse API

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'tinydrive image',
  toolbar: 'custombrowse',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  setup: (editor) => {
    editor.ui.registry.addButton('custombrowse', {
      text: 'Custom browse',
      onAction: () => {
        editor.plugins.tinydrive.browse({
          max_image_dimension: 1024
        }).then(() => {
          console.log('Tiny Drive dialog closed.');
        });
      }
    });
  }
});
```