Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Photograph of beach and ocean from above, with source (upload) icon overlaid.

TinyMCE image upload made easy with Tiny Drive

Ben Long

April 29th, 2020

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

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

Man cheers keenly

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.

TinyMCE image selector prompting for a source URL.

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.

TinyMCE Insert/Edit Image dialog with Source icon (highlighted) allowing users to upload a local file.

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.

Tiny Drive file management and selection.

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.

TinyMCE image upload with 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.
Tiny account with Dashboard tab selected and API key displayed (value blurred for privacy).

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.
Tiny account with Secure Tokens (JWT) tab selected.

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.

Tiny Drive NodeJS starter project running in a browser.

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.

ImagesTiny Drive
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Text "Google Fonts" each letter styled with a different font.
    Tips & How-Tos

    How to use Google Fonts in TinyMCE

    by Ben Long in Tips & How-Tos
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor