Attaching files and images to comments in Drupal

Description of the problem

The usual task in web development is to configure site comments. It is built-it feature of Drupal CMS. But when we want to let user attach images or files to posts, it becomes a problem to extend standard Drupal's module.

The most of web developers use workaround: inserting external images by URLs. But this is some cases unsecure solution that may cause much discomfort to users. Also this images may became removed from external servers (or replaced with another one without changing the URL!) and comments markup crushs.

Another decision is to use heavyweight "nodecomment" or "comment-upload" Drupal modules. But they are available for Drupal 6 only (in alpha and beta versions!) and they do not allow inserting images directly in the comment's body: they provide attiching files only.

Also you can use File Manager but this can be overkill and should be used mostly for website administration purposes.

The solution

I may offer you solution that works in Drupal of any version (with adaptations it may me used and in another CMS to) and has no lacks from previous methods.
It is based on the fact any Drupal site uses WYSIWYG HTML editor (usualy CKEditor or sometimes TinyMCE). It will work and TinyMCE too, but I'll explain you how to let users attach images and files via CKEditor. TinyMCE version of these plugins also can be found on DOKSoft site.

The plugins I offer you to use are CKEditor Quick Image Upload, CKEditor Image Preview Upload, CKEditor Image Gallery and CKEditor Quick File Upload.

Install the plugins I have said about to the site:

Copy plugins files to sites/all/modules/ckeditor/plugins.

Modify sites/all/modules/ckeditor/config.js:

config.doksoft_uploader_url = '/sites/all/modules/ckeditor/plugins/doksoft_uploader/uploader.php';

Modify sites/all/modules/ckeditor/plugins/doksoft_uploader/config.php:
```
$config['BaseUrl'] = '/sites/all/files/ckutils/';
$config['BaseDir'] = '../../../../files/ckutils/';
```
Do not forget to create this folder and check its write permissions and ownership (web-server user must be able to have read and write permissions to it).
Drupal has a profile system that provides separating configurations between user types. You can set one profile for administrator for using in administrative panel and one for comment form under you pages' content. Let us do it. Go to "Administration" → "Configuration" → "CKEditor" and choose profile you wish to use for comments (or create it). CKEditor's profiles in Drupal control panel
Go to CKEditor's profile and check plugins checkboxes. Than add their buttons by dragging them to the toolbar. Use file plugin for file attachments and I recommend you to user Quick Image Preview plugin for attached images. So, your images will be shown as previews and opened in popups (do not forget to install LightBox JS if you have not one). Enabling plugins in Drupal control panel and adding buttons to the CKEditor toolbar

Now set configured profile as default to anonymous and authorized users if you did not do it yet.

Congratilations! Now all your users can attach both images and photos to comments.

Result: attaching image to comment using CKEditor.

Drupal comment posting form with CKEditor

Frequency quesions

Q: Is it secure?
A: Yes, users will be able to upload files only in folder selected by administrator.

Q: Are there possible any file names conflicts?
A: No, all file names conflicts are managed by server side uploader, which can set needed names transparently to user.

Q: I do not see any new plugin buttons in my Drupal control panel
A: Try to copy plugin's files both to /sites/all/modules/ckeditor/plugins and /sites/all/libraries/ckeditor/plugins folders and switching WYSIWYG Drupal's module to CKEditor module.