The "imgupload.php" is a PHP script that can be used to upload image files on server, with CKEditor, and use them automatically in the editor's contents.

- You can download the script from this link: CKEditor Image Upload.

• To test the script: Demo

For comments, questions, or any issue related to this addon, write on Forum, in the "Scripts from Website" category.

Usage

1. To use this addon in CKEditor, Download the script and copy the "imgupload.php" file in the "ckeditor/plugins/" folder. Or, copy the code bellow, and add it into an "imgupload.php" file in "ckeditor/plugins/" folder.
2. Change the value of $upload_dir variable (line 5), with the path of images-directory on your server, RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER.
3. By default, if the uploaded file name exists on server, it will be renamed with "filename_NR.ext" (NR is a number). If you want to Overwrite the existing file, set value of 0 to RENAME_F (line 9).
4. Sets CHMOD writable permision (0777) to image-upload folder on your server (if on Linux system), to allow PHP to upload the files.
5. Enable the plugin by adding the filebrowserImageUploadUrl parameter in CKEditor configuration on your page:
CKEDITOR.replace('textareaId', {
  "filebrowserImageUploadUrl": "/path_to/ckeditor/plugins/imgupload.php"
});

Screenshoot

Click on image

imgbrowse Upload extension

Code of imgupload.php

- Click to select it.
<?php
// PHP Upload Script for CKEditor:  http://coursesweb.net/

// HERE SET THE PATH TO THE FOLDER WITH IMAGES ON YOUR SERVER (RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER)
$upload_dir = '/upload_dir/';

// If 1 and filename exists, RENAME file, adding "_NR" to the end of filename (name_1.ext, name_2.ext, ..)
// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);

// HERE PERMISSIONS FOR IMAGE
$imgsets = array(
 'maxsize' => 2000,     // maximum file size, in KiloBytes (2 MB)
 'maxwidth' => 900,     // maximum allowed width, in pixels
 'maxheight' => 800,    // maximum allowed height, in pixels
 'minwidth' => 10,      // minimum allowed width, in pixels
 'minheight' => 10,     // minimum allowed height, in pixels
 'type' => array('bmp', 'gif', 'jpg', 'jpe', 'png'),  // allowed extensions
);

$re = '';

if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) {
  $upload_dir = trim($upload_dir, '/') .'/';
  define('IMG_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name'])));  //get filename without extension

  // get protocol and host name to send the absolute image path to CKEditor
  $protocol = !empty($_SERVER['HTTPS']) ? 'https://' : 'http://';
  $site = $protocol. $_SERVER['SERVER_NAME'] .'/';
  $sepext = explode('.', strtolower($_FILES['upload']['name']));
  $type = end($sepext);    // gets extension
  list($width, $height) = getimagesize($_FILES['upload']['tmp_name']);  // gets image width and height
  $err = '';         // to store the errors

  //set filename; if file exists, and RENAME_F is 1, set "img_name_I"
  // $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename
  function setFName($p, $fn, $ex, $i){
    if(RENAME_F ==1 && file_exists($p .$fn .$ex)) return setFName($p, IMG_NAME .'_'. ($i +1), $ex, ($i +1));
    else return $fn .$ex;
  }
  
  $img_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, IMG_NAME, ".$type", 0);
  $uploadpath = $_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir . $img_name;  // full file path

  // Checks if the file has allowed type, size, width and height (for images)
  if(!in_array($type, $imgsets['type'])) $err .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';
  if($_FILES['upload']['size'] > $imgsets['maxsize']*1000) $err .= '\\n Maximum file size must be: '. $imgsets['maxsize']. ' KB.';
  if(isset($width) && isset($height)) {
    if($width > $imgsets['maxwidth'] || $height > $imgsets['maxheight']) $err .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgsets['maxwidth']. ' x '. $imgsets['maxheight'];
    if($width < $imgsets['minwidth'] || $height < $imgsets['minheight']) $err .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgsets['minwidth']. ' x '. $imgsets['minheight'];
  }

  // If no errors, upload the image, else, output the errors
  if($err == '') {
    if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {
      $CKEditorFuncNum = $_GET['CKEditorFuncNum'];
      $url = $site. $upload_dir . $img_name;
      $msg = IMG_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 3, '.', '') .' KB \\n- Image Width x Height: '. $width. ' x '. $height;
      $re = "window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')";
    }
    else $re = 'alert("Unable to upload the file")';
  }
  else $re = 'alert("'. $err .'")';
}
echo '<script>'. $re .';</script>';

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
CKEditor Free Image Uploader Addon

Last accessed pages

  1. Backgammon (5600)
  2. Multiple Select Dropdown List with AJAX (13113)
  3. Bubbles3 (25030)
  4. Zuma Deluxe (26814)
  5. Download PHP MySQL resources (7861)

Popular pages this month

  1. Qwop (4268)
  2. Bubbles3 (3733)
  3. Butterfly Kyodai (2663)
  4. Zuma Deluxe (2445)
  5. Backgammon (1271)