View on GitHub

Drag n' Drop Image Uploader

A drag and drop Image upload plugin for CKEditor

Download this project as a .zip file Download this project as a tar.gz file

DragDropUpload

A small, lightweight (and free!) CKEditor plugin for uploading images via drag and drop.

Try it out:

It's like SimpleUploads but free! And with fewer features!

DropUploads currently supports Imgur and Amazon's S3 as storage locations.

Here's it in action:


Install:

Clone or download this respository and then follow the Manual Installation instructions from the official CKEditor Documentation. Adding to CKEditor's Add-on repository pending.

The super short version: Copy the DragDrop folder to the plugins directory of ckeditor.

Usage Instructions

First, add the plugin name to ckeditor's extraPlugins property inside of config.js:

CKEDITOR.editorConfig = function( config ) {
    // rest of config
    config.extraPlugins = 'dragdrop'; <-- add the plugin
    })

Next, we need to supply a few configuation options depending on the backend service we're using. This is a simple javascript object consisting of 1. The name of the backend service, and 2. the settings it needs to function.

Currently Imgur and S3 are the two upload locations supported, but, since uploading files boils down to submitting a POST towards the general direction of a server, new backends are trivial to implement.

Imgur:

CKEDITOR.editorConfig = function( config ) {
    // rest of config
    config.extraPlugins = 'dragdrop';

    // configure the backend service and credentials
    config.dragdropConfig = {
    backend: 'imgur',
    settings: {
    clientId: 'YourImgurClientID'
    }
    }
    });

AWS S3:

CKEDITOR.editorConfig = function( config ) {
    // rest of config
    config.extraPlugins = 'dragdrop';

    // configure the backend service and credentials
    // aws requires a few extra..
    config.dragdropConfig = {
    backend: 's3',
    settings: {
    bucket: 'bucketname',
    region: 'your-region',
    accessKeyId: 'key',
    secretAccessKey: 'secret-key'
    }
    };
    });

Note: This, of course, exposes your S3 keys to the wild. So.. probably shouldn't use this outside of testing -- or for very highly trusted users.