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.

{
  "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

  • TinyMCE

  • HTML

  • JS

<textarea id="drive-pick-example">
  This demo shows you how to call tinydrive from within the tinymce api.
</textarea>
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

  • TinyMCE

  • HTML

  • JS

<textarea id="drive-pick-images-example">
  This demo shows you how to call tinydrive from within the tinymce api.
</textarea>
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

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