1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

alternative to image_upload plugin -> upload images with ckeditor

Discussion in 'General Troubleshooting' started by hotaruuser, Feb 29, 2012.

  1. hotaruuser

    hotaruuser New Member

    Hi there!

    I could not get the post_images plugin to work, and its not an optimal solution, since you cant choose where to place the picture.

    So, the ckeditor is better for this.

    Unfortunatedly, ckeditor has no built-in upload function. There are 2 commercial plugins available, but I do not want to use them.

    There are really several tutorials and approaches to this, just google for "image upload for ckeditor", but I found this one working:

    Simple tutorial for adding upload functionality to ckeditor

    Download the uploader.zip attachment.

    Unpack it

    open the uploader/uploader.php file with your preferred text editor and change

    Code:
    $url = 'http://YOURPATHHERE/
    to your sites url (I could make it working only by hardcoding it, sorry)

    upload the uploader folder to

    plugins/ckeditor/javascript/

    ----------------------

    Then you edit the ckeditor.php on the ckeditor folder, replace line 74 with this:

    Code:
    echo "<script type='text/javascript'> window.onload = function() {CKEDITOR.replace( '".$this->_textareaName."', { filebrowserImageUploadUrl : '". BASEURL ."/content/plugins/ckeditor/javascript/uploader/uploader.php?type=Images' } );};</script>";
    ----------------------

    Create a folder called uploads in your root/content/images

    ----------------------

    Done!

    In your ckeditor if you click on the images button, you see a additional tab called "upload" or similar in your language. Click on it, choose the file, transfer it to the server. The image should be automatically inserted into your post and you can handle it like other images from other servers.

    Please note!

    This is not tested widely, and I am no php expert, so please use with your own risk!


    Edit: security check build in, new version is uploaded
     

    Attached Files:

    Last edited: Mar 3, 2012
  2. frytec

    frytec Member

    hi hotaruuser, finally someone trying to make an alternative to post_images, that plugin never worked well for me either, so i had to stop using it, and my posts have no images because of that.

    but tell me, this tips you gave, will work like post_images plugin or it will add images inside post content?

    do you have an online working example of this?
     
  3. hotaruuser

    hotaruuser New Member

    Oh sorry, sometimes I get confused, its rather an alternative to images_upload!

    It upload the images on the server and add them directly inside the post... Sorry again for the misunderstanding, its my fault

    I change the topic title, sorry

    But, I dream litte now, if there could be a functionality added to ckeditor, which allows the user to "mark" a image as default thumbnail, which would be saved in the database (posts table) also, and could be displayed as post image thumbnail... *sigh*

    But thats far beyond my coding knowledge...
     
    Last edited: Feb 29, 2012
  4. mabujo

    mabujo Designer

    Just took a quick look at the code, be very careful using this as it creates a security risk.

    hotaruuser, you should perform some sort of validation on the uploaded file as the $_FILE type attribute is set by the browser and therefore should not be trusted.
    At very least check the type of the file using getimagesize(), but there is more that you can do.
     
  5. hotaruuser

    hotaruuser New Member

    Thank you mabujo for looking at it!

    This was a ready code I copied from ckeditor forums. I am not very good at filehandling. Maybe somebody could post a link to a tutorial about it, or edit the code? Thanks
     
  6. hotaruuser

    hotaruuser New Member

    Hmm, I tested it and tried to upload a pdf. It upload it and says invalid file. I checked at the upload folder, it was not there. Are you sure this needs another validation? I think ckeditor handle the validation itself, since its this is using some of its routine...
     
  7. mabujo

    mabujo Designer

    I haven't used ckeditor but it is a javascript editor, no?
    I doubt it does much in the way of file validation, and if it is client-side (i.e. javascript, run in the browser) it is basically useless.
    What gets sent to $_FILE['type'] can be spoofed by manipulating the variable sent in $_POST. You were'nt spoofing it in your test, you just gave it a pdf but an attacker can send a pdf and tell uploader.php that they uploaded a .png.
     
  8. PuckRobin

    PuckRobin New Member

    You change lines 28-31 as follows:
    PHP:
    if( !@move_uploaded_file($_FILES["upload"]["tmp_name"], $move_to_file) )
                    {
                        
    $warning 'Upload Failed!';
                    }
    else {
                    list(
    $width$height$type$attr) = getimagesize($move_to_file);
                    
    $fileType image_type_to_mime_type($type);
                    
    $allowedImageTypes = array("image/pjpeg","image/jpeg","image/jpg","image/png","image/x-png","image/gif");
                    if (!
    in_array($fileType$allowedImageTypes)) { 
                        
    $warning"Unsupported file type";
                        
    unlink $move_to_file// Delete unsupported file
                    
    }
    }
    http://stackoverflow.com/questions/9186352/how-to-check-file-format-in-server-side

    This doesn't support pdf though. You can use Ghostscript to take an image from pdf file and then check that imagesize, but I don't recommend allowing pdf files at all:
    PHP:
    exec('gs -dSAFER -dBATCH -sDEVICE=jpeg -dTextAlphaBits=4 -dGraphicsAlphaBits=4 -r300 -sOutputFile='.  'temp.jpg ' $move_to_file); // You may need to add/replace absolute filepath for temp.jpg and $move_to_file
    // Then check temp.jpg here
     
  9. hotaruuser

    hotaruuser New Member

    Hi there!

    Thank you all so much! PuckRobin, I added the security check you posted. Works fine, had just to add () to the unlink part...

    No, pdf should not be supported, since this is bound to the image icon and the image function of ckeditor, uploading pdfs makes no sense at that point.

    The only thing is, if you try to upload a invalid file type, it does say correct that the filetype is not allowed, but after you press ok, it goes back to the image window where the url of the not supported file is already filled in (which does not exist) , which could be confusing for the user...
     

Share This Page