Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Tiny Drive Plugin API

Description of the Tiny Drive plugin API

Contribute to this page

The Tiny Drive TinyMCE plugin has an API that enables access to Tiny Drive from your custom plugins or TinyMCE specific integration code. This API is available though the editor.plugins.tinydrive property.

tinydrive.pick

The tinydrive.pick method enables you to pick files from Tiny Drive and get the meta data of those files returned in a promise. For a complete list of available settings to pass in to this method check the Picker settings section in this page.

File Picker Result Format

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

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

tinydrive.browse

The tinydrive.browse method enables you to browse your files stored in Tiny Drive but without the possibility to pick them to be inserted. This might be useful if you want to use Tiny Drive as a generic file manager. It returns a promise but the promise will only resolve when the Tiny Drive dialog is closed by using the close button. For a complete list of available settings to pass in to this method check the Picker settings section in this page.

Interactive example: Using tinydrive.browse

tinydrive.upload

The tinydrive.upload method enables directly upload blobs to your Tiny Drive storage. This can be useful when you want to store a file generated by your app.

Interactive example: Using tinydrive.upload

Picker settings

These settings are available for the tinydrive.pick / tinydrive.browse API methods.

filetypes

This setting enables restricting what types of files you want do display based on file type categories. For example if your app needs to insert images only then you can specify ['image'] in the file types array.

Type: Array<string>

Interactive example: Using filetypes

max_image_dimension

This setting enables constraining the width/height of uploaded images. When this is enabled any images with a higher width or height than the specified amount would be proportionally resized down to the specified maximum dimension.

Type: Number

Example: Using max_image_dimension

tinydrive.pick({
  max_image_dimension: 1024
}).then(function (result) {
  console.log(result.files);
});

Plugin API interfaces

Here is a complete API reference as TypeScript types for developers used to TypeScript syntax.

interface PluginApi {
  pick: (settings: PluginPickerApiSettings) => Promise<PickerResult>;
  browse: (settings: PluginPickerApiSettings) => Promise<void>;
  upload: (settings: PluginUploadApiSettings) => Promise<UploadResult>;
}

interface PluginPickerApiSettings {
  filetypes?: string[];
}

interface PluginUploadApiSettings {
  path?: string;
  name: string;
  blob: Blob;
  onprogress?: (details: UploadProgress) => void;
  max_image_dimension?: number;
}

interface DriveFile {
  url: string;
  size: number;
  name: string;
  type: string;
  mdate: string;
}

interface PickerResult {
  files: DriveFile[];
}

interface UploadProgress {
  loaded: number;
  total: number;
}

interface UploadResult {
  file: DriveFile;
}

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.