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

The `tinydrive.pick` method allows users to pick files from Tiny Drive and get the metadata of those files returned in a promise. This metadata can be used to insert or retrieve the file or files if needed.

## File Picker Result Format

The `tinydrive.pick` method will return a promise with object that has a `files` property. This `files` property is an array of files with the following properties.

```js
{
  "files": [
    {
      "name": "myphoto.jpg",
      "url": "https://drive.tiny.cloud/1/h0ed4hzbe69rfcrnj0uwvwi73e8y5m70jlolaalzkssog63b/48bda29d-ed1f-488f-adf7-b597dd3a8791",
      "size": 1180390,
      "type": "image",
      "mdate": "2018-06-13T16:49:10Z"
    }
  ]
}
```
name The name of the selected file for example: `my.jpg`.

size The size in bytes of the selected file.

url The URL for the selected file would be in the following format: `https://drive.tiny.cloud/1/<your api key>/<file uuid>`

mdate The modification date for the file in ISO 8601 format for example: `2019-02-24T15:00:00Z`

### Interactive example: Using `tinydrive.pick`

**Example**

```js
tinymce.init({
  selector: 'textarea#drive-pick-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',
      onAction: () => {
        editor.plugins.tinydrive.pick({
        }).then((result) => {
          result.files.forEach((file) => {
            const link = editor.dom.createHTML('a', { href: file.url }, editor.dom.encode(file.name));
            editor.insertContent(link);
          });
        });
      }
    });
  }
});
```

## 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.');
        });
      }
    });
  }
});
```