By Avner Schwartz


2011-09-01 08:19:49 8 Comments

I'd like to have a simple, one-click, image upload functionality with CKEditor. I'm using D6 and CKEditor 3.6.1. I do not want a server file browsing functionality, only uploading images from the user's own computer.

I've done a thorough search on this subject and have tried different suggested approaches. It seems like the solution that best suits my needs is installing the IMCE module and the CKFinder plugin for the CKEditor module. So I did just that, and followed the installation instructions found here: http://drupal.org/node/738092

The uploaded image manages to get to the destination folder on my server, but when I open CKEditor's 'Image properties' dialog and hit the 'Send to the server' button, nothing changes on the UI.

What I wish to happen is for CKEditor to close the 'Image' dialog and insert the uploaded image into the textarea.

Here are some screenshots to better explain my situation:

- Uploading a file from my desktop

Uploading a file from my desktop

- Expected result - 'Image' dialog automatically closed and image inserted to textarea

Expected result - 'Image' dialog automatically closed and image inserted to textarea

- Actual result - 'Image' dialog stays open and nothing changes

Actual result - 'Image' dialog stays open and nothing changes

Does anyone ever implemented an image upload functionality this way? Is there a better way to get what I want?

6 comments

@tanius 2016-03-20 19:01:11

You can use the dragndrop_uploads module. It provides versions for both Drupal 7 and Drupal 6, the latter are just hidden behind the "View all releases" link, probably because they are unsupported now.

Despite the name, it's not a generic file upload module but made for image uploading into rich text editors. From the project page:

The Drag'n'Drop Uploads module adds the ability to drag an image from your local filesystem, drop it onto a node body textarea and have the file automatically uploaded and referenced in your node. […] [It provides] Support for the WYSIWYG module.

@Patrick 2015-03-27 08:38:35

Simply try the the following plugin which allows you to directly upload files to the server without needing any file browser. Great and simply the best experiences you will get!

http://doksoft.com/soft/ckutils/index.html

@santarao kalisetti 2013-08-27 12:46:00

To upload an image, simply drag-and-drop from your desktop or from anywhere. You can also copy the image and paste it on the text area using ctrl+v.

@Clive 2013-08-27 12:51:57

Welcome to Drupal Answers :) Does this answer relate to the question in any way? Are you saying that CKeditor has a built-in feature to allow HTML5 drag/drop of files from the local file system? If so could you expand on where you've got that information from please?

@kiamlaluno 2013-08-27 12:59:37

Dragging the image and dropping it on the form element doesn't automatically upload the image, nor does it close the dialog box.

@Nitesh Sethia 2013-06-26 13:35:47

You could use the One time Upload Module in order to full fill your need if you wish to use Drupal 7 version.

Features:

  1. Upload images and insert into editor image code
  2. Upload files and insert into editor link code
  3. Multi-upload files and images
  4. Integration with image styles
  5. Editable html templates

For more detail about the module you could read the README.txt of this module.

@Bryan Casler 2011-09-01 09:14:18

If you ever get to D7, this module does exactly what you're looking for:

One Click Upload module

Button for BUEditor and CKEditor which allows upload files in one click.

Features

  • Upload images and insert into editor image code
  • Upload files and insert into editor link code
  • Multi-upload files and images
  • Integration with image styles
  • Editable html templates

@Sithu 2012-08-03 06:11:17

It is very useful, but the image uploaded cannot be resized.

@kubilay 2013-02-21 09:47:17

This is the correct answer. @Sithu, if you click on the uploaded image and open image property box by clicking to the image icon on CKEditor toolbar, you can set image size and other properties.

@john 2012-01-15 21:13:00

Now CKUtils Image plugin is available right for this thing! See also another plugins from set, for example to upload previews with link to full-sized image.

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] Uploading custom files, using CKFinder

  • 2012-10-07 18:42:13
  • user4035
  • 8211 View
  • 0 Score
  • 1 Answer
  • Tags:   wysiwyg

1 Answered Questions

[SOLVED] Inserting PDF files via the Image icon in ckeditor. Is there a better way?

  • 2013-06-12 05:46:14
  • kine456
  • 4757 View
  • 0 Score
  • 1 Answer
  • Tags:   files

1 Answered Questions

[SOLVED] Auto-upload image feature with image browser module (e.g: Image picker)

  • 2014-02-25 13:40:50
  • user21139
  • 269 View
  • 0 Score
  • 1 Answer
  • Tags:   7 media

1 Answered Questions

[SOLVED] Drupal 7 CKEditor-CKFinder remove "Browse Server"

  • 2013-02-10 09:23:32
  • Aneek Mukhopadhyay
  • 1034 View
  • 0 Score
  • 1 Answer
  • Tags:   wysiwyg

1 Answered Questions

[SOLVED] ckEditor Uploading Issue

  • 2013-08-16 06:56:00
  • user20077
  • 56 View
  • 0 Score
  • 1 Answer
  • Tags:   wysiwyg

1 Answered Questions

[SOLVED] how to load Ckeditor with IMCE file browser through javascript

1 Answered Questions

[SOLVED] Drupal 7.14 image upload unstable

  • 2012-07-23 12:03:54
  • confused
  • 530 View
  • 1 Score
  • 1 Answer
  • Tags:   media files

0 Answered Questions

Customize CKeditor/IMCE file upload function

  • 2012-09-20 15:58:17
  • jriggs
  • 301 View
  • 1 Score
  • 0 Answer
  • Tags:   6 wysiwyg files

2 Answered Questions

1 Answered Questions

[SOLVED] WYSIWYG Image Upload in Basic Page (CKEditor and CKFinder)

  • 2012-01-31 22:59:36
  • user173457
  • 647 View
  • 0 Score
  • 1 Answer
  • Tags:   media wysiwyg files

Sponsored Content