Alternative use of Image upload in CkEditor ~ Best We Want

Image upload in CkEditor

The Best alternative method to upload image in the CKEDITOR, have some trick to utilize. In this article i can work indirectly upload image. First upload image ( php ajax code follows without page refresh) without ckeditor is as follows.

Normal use of ckeditor some times have number of problems, even if use of CKEditor CDN. Some browsers cannot upload image with this. What ever maybe in this article we prove alternative use of Image upload in CkEditor.

Alternative Use of Image upload

The following code is php ,ajax, javascript, html combination. When run this following code upload image into certain path( here \images\ ) and gives complete image path. This path copy and paste into CKEDITOR image dialog box.

Javascript code place at <head> section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Html code at <body> section

<label>Select Image</label>
   <input type="file" name="file" id="file" />
   <br />
   <span id="uploaded_image"></span>

Following code as Ajax code inserted at <body > section

<script>
$(document).ready(function(){
 $(document).on('change', '#file', function(){
  var name = document.getElementById("file").files[0].name;
  var form_data = new FormData();
  var ext = name.split('.').pop().toLowerCase();
  if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
  {
   alert("Invalid Image File");
  }
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("file").files[0]);
  var f = document.getElementById("file").files[0];
  var fsize = f.size||f.fileSize;
  if(fsize > 2000000)
  {
   alert("Image File Size is very big");
  }
  else
  {
   form_data.append("file", document.getElementById('file').files[0]);
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
    },   
    success:function(data)
    {
     $('#uploaded_image').html(data);
    }
   });
  }
 });
});
</script>

Following upload.php file inserted separate file

<?php
//upload.php
if($_FILES["file"]["name"] != '')
{
 $test = explode('.', $_FILES["file"]["name"]);
 $ext = end($test);
 $name = rand(100, 999) . '.' . $ext;
 $location = './upload/' . $name;  
 move_uploaded_file($_FILES["file"]["tmp_name"], $location);
 echo "https://onlineexam.bestvwant.com/tc/images/".$name;
}
?>

Above lines of code inserted above the CKEDITOR , i.e above <textarea>. and show following output

Steps to follow in Alternative use of Image upload in CkEditor

Next follows , how to upload image into ckeditor step 1: click on choose file button, it will select one image from your device and process immediate without page refresh and display one full path of image

Alternative use of Image upload in CkEditor

Step 2: copy image upload path

Step 3: Now click on image icon appear in ckeditor, see below

step 4: Now paste of your image full path, like following, and click ok button

Now inserted image , where ever use in ckeditor box. This article very useful to ckeditor alternative image upload process.

Best We Want

Best Useful Information

Alternative use of Image upload in CkEditor