14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

TinyMCE image upload made easy with Tiny Drive

April 29th, 2020

4 min read

Photograph of beach and ocean from above, with source (upload) icon overlaid.

Written by

Ben Long

Category

World of WYSIWYG

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
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. 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

  • World of WYSIWYGNov 29th, 2023

    Best WYSIWYG editor image upload solutions compared: under pressure

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.