Tiny Drive Introduction
Tiny Drive is a premium TinyMCE plugin for cloud-based asset management and storage. Tiny Drive allows your users to upload, manage, and use files in TinyMCE.
For documentation on using Tiny Drive outside TinyMCE, visit: Tiny Drive documentation.
| This plugin is only available for Tiny Cloud users. |
Tiny Drive features
Tiny Drive allows the following file formats, extensions, and storage options:
| Feature | Value |
|---|---|
File upload |
Upload files through drag and drop or using the upload button. If integrated with TinyMCE, files added using drag and drop or copy and paste in TinyMCE will be uploaded using Tiny Drive |
CDN |
Files are stored in S3 and accessed through Amazons CDN for fast delivery anywhere in the world |
File management |
Move, copy, delete and organize your online file storage |
Search |
Search your library of files, star the ones you use often for quick access |
Preview |
Preview images and video before you select which content to use |
Integrations |
Integrations with Google Drive and Dropbox allows you to import file from these systems through Tiny Drive |
The storage and bandwidth quota varies based upon your Tiny Cloud Plan.
Interactive example
-
TinyMCE
-
HTML
-
CSS
-
JS
<textarea id="drive">
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
<h2 style="text-align: center;">Welcome to the Tiny Drive plugin demo!</h2>
<p>To open the <strong>Tiny Drive</strong> file manager:</p>
<ul>
<li>Click the "<strong>Insert file</strong>" (<img src="../_images/icons/browse.svg" alt="browse files icon" width="18" height="18" />) toolbar button, or</li>
<li>Select the "<img src="../_images/icons/browse.svg" alt="browse files icon" width="18" height="18" /> File" menu item (<strong>Insert > File</strong>)</li>
</ul>
<p>Things to try:</p>
<ul>
<li>To add another file to the Tiny Drive, use the <img src="../_images/icons/plus.svg" alt="plus symbol icon" width="18" height="18" /> button</li>
<li>To insert an image from the drive, click the image name</li>
<li>To view more options, click the <img src="../_images/icons/image-options.svg" alt="horizontal ellipses icon" width="18" height="18" /> at the end of the file or folder row.</li>
</ul>
</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 editimage lists',
height: 600,
tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
toolbar: 'insertfile image link | code',
menu: {
insert: { title: 'Insert', items: 'image link media insertfile' },
}
});Upload files URL
The URL format for each file is https://drive.tiny.cloud/1/{your-api-key}/{uuid}, and is generated when a file is uploaded. If a file is moved or renamed, it will still have the same unique URL, so the restructuring of the files using Tiny Drive won’t affect the URL. Deleting a file will mark the URL as being unused, and the URL will not continue to work.
JSON Web Token (JWT) based authentication
Some Tiny services require setting up JSON Web Token (JWT) authentication. This allows the Tiny Cloud to verify that the end users are allowed to access a particular feature. JWT is a common authorization solution for web services and is documented in detail on the https://jwt.io/ website. For information on setting up JWT authentication, see the JWT authentication section.
User specific file access
Tiny Drive allows developers to set user-specific directories, so users can only see their own files. This can be done by setting the https://claims.tiny.cloud/drive/root custom JSON Web Token (JWT) claim to a path within Tiny Account. This path will automatically be constructed when the user is accessing Tiny Drive using a JWT key with that claim. The user can only see and manage files within that directory.
Security and performance
Tiny is aware that security is a primary concern when it comes to cloud storage. As a user’s assets are passed between Tiny Drive and the Tiny Cloud, Tiny Drive uses the Tiny Account API key and a JSON Web Token (JWT) to authenticate each data transaction.
File types
There is a fixed set of file extensions (formats) that can be uploaded, and these are placed in the file type categories below. Some file formats are blocked as they can be a security issue.
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
Starter projects
To get started quickly and understand how Tiny Drive works, Tiny recommends trying one of the starter projects on GitHub to set up a Tiny Drive.
The starter projects have their own procedures to get Tiny Drive up and running. Choose a starter project of a familiar language and follow the steps to setup Tiny Drive. The links will take you to the GitHub page for the starter project of your choice, where the source code is available for you to view.
