TinyMCE and Flask - Part 2 - Managing Images

Posted on by Kevin Foong

This is the second part of my earlier Flask / TinyMCE tutorial. See the first part here.

In this blog post I will outline the steps I used to save a thumbnail version of any image I upload to my post. Here I used the very useful Pillow (Python Imaging Library) library.

TinyMCE has a great image uploader feature where you can simply drag and drop images to directly upload into your post. I have summarised some of the main implementation points below:

The full source code is shown below.

from PIL import Image

# Handles javascript image uploads from tinyMCE
@bp.route('/imageuploader', methods=['POST'])
def imageuploader():
    file = request.files.get('file')
    if file:
        filename = file.filename.lower()
        fn, ext = filename.split('.')
        # truncate filename (excluding extension) to 30 characters
        fn = fn[:30]
        filename = fn + '.' + ext
        if ext in ['jpg', 'gif', 'png', 'jpeg']:
                # everything looks good, save file
                img_fullpath = os.path.join(current_app.config['UPLOADED_PATH'], filename)
                # get the file size to save to db
                file_size = os.stat(img_fullpath).st_size
                size = 160, 160
                # read image into pillow
                im =
                # get image dimension to save to db
                file_width, file_height = im.size
                # convert to thumbnail
                thumbnail = fn + '-thumb.jpg'
                tmb_fullpath = os.path.join(current_app.config['UPLOADED_PATH_THUMB'], thumbnail)
                # PNG is index while JPG needs RGB
                if not im.mode == 'RGB':
                    im = im.convert('RGB')
                # save thumbnail
      , "JPEG")

                # save to db
                img = Images(filename=filename, thumbnail=thumbnail, file_size=file_size, \
                            file_width=file_width, file_height=file_height)
            except IOError:
                output = make_response(404)
                output.headers['Error'] = 'Cannot create thumbnail for ' + filename
                return output
            return jsonify({'location' : filename})

    # fail, image did not upload
    output = make_response(404)
    output.headers['Error'] = 'Filename needs to be JPG, JPEG, GIF or PNG'
    return output

You can also create an admin page to manage all the images, as I have done below. This page also has the ability to delete images which will delete the actual image file, its thumbnail and the database record.

See the full source code on Github.

Let me know if you have any feedback!


Tags: tinymce, flask, python


Email is optional