Question

The Tiny Drive plugin adds the functionality to upload and manage files and images to the cloud. This plugin is only available in Tiny Cloud and requires you to register for an API key.

To enable this functionality, add tinydrive to the list of plugins in the tinymce.init call. You also need to authenticate the user using a JSON Web Token (JWT).

Once you enable Drive it integrates as the default file picker for the Image, Link, and Media dialogs and as the default upload handler for local images being pasted or inserted into the document.

Live example

<textarea id="drive">
  <p style="text-align: center;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <p>
    Please try out the features provided in this basic example.<br>
    Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering – the demo is to show the integration.
  </p>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="text-align: center;">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>

button.olark-launch-button {
  z-index: 1 !important;
}
.menu {
  z-index: 1000 !important;
}

tinymce.init({
  selector: 'textarea#drive',
  plugins: 'image media link tinydrive code imagetools',
  api_key: 'YOUR_API_KEY',
  height: 600,
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  toolbar: 'insertfile image link | code'
});

Example

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinydrive'
});

Options

These settings are necessary to make Drive work:

tinydrive_token_provider

This setting could take one of the following two forms:

• A URL to a page that takes an HTTP JSON POST request and produces a JSON structure with a valid JWT. It uses a POST request to avoid caching by browsers and proxies.
• A function that provides the same token through a callback. This allows you to make your own HTTP request in any format you like. The provider function is a function that has a success and failure callback where the success takes an object with a token property containing the JWT, and the failure callback takes a string to present as an error message if the token could not be produced.

You can read more about how to create these tokens in the JWT authentication guide.

Type: String or Function

Required: yes

Example Using a JWT Provider URL

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_token_provider: '/jwt'
});

Example Using a JWT Provider Callback

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "tinydrive",
  tinydrive_token_provider: function (success, failure) {
     success({ token: 'jwt-token' });
     // failure('Could not create a jwt token')
  }
});

tinydrive_upload_path

This setting enables you to change the default upload path for files that get uploaded when pasted into the editor, uploaded directly through the Image dialog, or when you drag-and-drop images into the editor. It will produce a date-based structure within this path like this /uploads/{year}{month}{day}. This is to avoid having thousands of files in the same directory.

Type: String

Default Value: "/uploads"

Example

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "tinydrive",
  tinydrive_upload_path: '/some/other/path'
});

tinydrive_max_image_dimension

This setting enables you to constrain 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 max dimension.

Type: Number

Example

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "tinydrive",
  tinydrive_max_image_dimension: 1024
});

Insert File toolbar button

Drive will automatically integrate into the Image, Link, and Media dialogs as a file picker. You can also configure it to insert files directly into your content using the insertfile button. To enable this button, add it to your toolbar editor setting.

The Insert File toolbar button will insert images as img elements or other files as links to that file.

Example of toolbar button

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  toolbar: 'insertfile'
});

Insert File menu item

Drive will automatically integrate into the Image, Link, and Media dialogs as a file picker. You can also configure it to insert files directly into your content using the insertfile menu item. To enable this menu item, add it to your menus editor setting or the insert_button_items setting.

The Insert File menu item will insert images as img elements or other files as links to that file.

Example of menu item

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  toolbar: 'insert',
  menu: {
    insert: { title: 'Insert', items: 'insertfile' }
  },
  insert_button_items: 'insertfile'
});

Restrictions and Quotas

Drive has restrictions on what files can be uploaded and how large these files can be:

• The maximum file size is 100MB
• Allowed image extensions: gif, jpeg, jpg, png, tif, tiff, bmp
• Allowed document extensions: doc, xls, ppt, pps, docx, xlsx, pptx, pdf, rtf, txt, keynote, pages, numbers
• Allowed audio extensions: wav, wave, mp3, ogg, ogv, oga, ogx, ogm, spx, opus
• Allowed video extensions: mp4, m4v, ogv, webm, mov
• Allowed archive extensions: zip
• The Copy operation is limited to single files due to technical reasons.

Your storage and bandwidth quota varies based upon the Tiny Cloud Plan you are subscribed to.

Upload Files URL

All files are uploaded to a central storage with a CDN endpoint that means that we are hosting your files and they are publicly available in read-only mode for anyone that has access to the URL of that file. The URL format for each file is https://drive.tiny.cloud/1/{your-api-key}/{uuid} and gets generated when a file is uploaded. If you move or rename a file, it will still have the same unique URL, so the restructuring of your files using Drive won’t affect where they are being used. However, deleting a file will mark the URL as being unused, and the URL will not continue to work.

User specific root

It’s common that you want to be able to have user specific paths so that each user within your system gets it’s own directory. This can be done by setting the https://claims.tiny.cloud/drive/root custom jwt claim to a path within your tiny drive account. This path will automatically be constructured when the user is accessing drive using a jwt key with that claim. The user only be able to see and manage files within that root.