TinyMCE image upload made easy with Tiny Drive

Image upload in TinyMCE is simplified significantly with the introduction of Tiny Drive.

But before we get too excited...

A discussion about image upload in TinyMCE best starts with an overview of the Image plugin and some of the ways in which users can select images to include in their content.

The TinyMCE Image plugin

The TinyMCE Image plugin enables users to insert images in their content. Although it’s not included in the default editor configuration, it can be added with a few lines of code, as shown in the Image plugin docs.

There are multiple ways you can configure the Image plugin for users to select files.

Image selection - URL

By default, the Image plugin is configured so that, on selecting the Insert/edit image icon, users can choose an image by providing a URL. This is demonstrated in the demo on our home page.

Image selection - Local file picker

You can configure TinyMCE to allow users to choose a local file. In this case, you’ll also have to implement an image uploader on the backend to store the image somewhere online. More information on this, including a demo, can be found in the related documentation.

Image selection - Tiny Drive

Alternatively, Tiny Drive can handle image upload and storage for you, removing the need for you to configure any backend upload and storage.

In this case, on selecting the Source icon, users will be presented with their online Tiny Drive, from where they can upload, manage, and select their images.

Or, users can flick to the Upload tab, and choose a local file which is inserted into their content and uploaded automatically to their Tiny Drive.

When used in conjunction with PowerPaste, images dropped, or pasted, into the editor from a local machine are uploaded automatically to your Tiny Drive too.

Tiny Drive comes free with every plan, including the no cost Community plan.

Try the demo!

Get started with Tiny Drive

Personally, I think the easiest way to get started with your own working instance of Tiny Drive, integrated with TinyMCE, is to run the Tiny Drive NodeJS starter project. There are also starter projects available for .NET Core, PHP, and Java Spring.

1. Clone the repository to your local machine

git clone https://github.com/tinymce/tinydrive-nodejs-starter.git

2. Provide your API key

1. If you don’t already have a Tiny API key, get a free API key now.
2. Where you cloned the repository on your local machine, open tinydrive-nodejs-starter/config.js and replace your-api-key-here with your own API key from the Tiny My Account - Dashboard.
3. Also take note of this line: exports.privateKeyFile = './private.key'. This is configured in the next step.

3. Configure your JWT key

1. View Secure Tokens in your Tiny account.
2. Enter a key Description (this can be anything to help you identify what it’s used for) and click Generate key.
3. Your private key will be displayed. Copy it, including the -----BEGIN PRIVATE KEY----- and -----END PRIVATE KEY-----, and paste it in a new file called private.key inside the tinydrive-nodejs-starter directory.

4. Start the server

From within the  tinydrive-nodejs-starter directory, run:

$ npm i
$ npm run start

Once started, you will be presented with the project URL; for example:

Tiny Drive starter project is now available at: http://localhost:3000/

NOTE: To use TinyMCE on your own domain, you’ll have to list it as an approved domain in your account. When you do this, it may take a little time for this update to work its way through the system.

5. Open the project

Open the project in a browser using the URL displayed above (e.g., http://localhost:3000/) and start using TinyMCE integrated with your own Tiny Drive. You’ll be prompted to login first. Use the credentials configured in config.js.

WARNING: Having usernames and passwords stored in the config.js file is not recommended for a production system. You will need to incorporate a secure means of access control.

Try inserting some images, and play around with the online file manager. You’ll see that Tiny Drive is also integrated seamlessly with the Media and Link dialogs.

What next?

Tiny Drive can also be integrated with Dropbox and Google Drive to allow users to choose files from those online sources. This and more information about Tiny Drive can be found on the product page and in the documentation.

TinyMCE is highly configurable to allow you to fit it in with your desired UX. Read more about how to configure the TinyMCE toolbar and TinyMCE skins and icons to suit your apps and user requirements.

Contact us for more information about how Tiny Drive can be integrated into your solutions.