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

  • TinyMCE

  • HTML

  • JS

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

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