jQuery Image Cropper with Uploader

Please check the updated version here! Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want […]

Please check the updated version here!

Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script.

The idea is that the user uploads a picture,  selects which area to crop and saves it under a specific directory.
The process then creates two images, one 100×100 and a thumbnail of 50×50. You can easly change the script to create the amount of pictures and sizes you need!

The example here is limited to .jpg images and no more than 800 kb. If you want to add more file types and increase the size, you can configure it when you call the uploadify script (index.php):

'fileExt'         : '*.jpg',
'sizeLimit'      : '819200',//max size bytes - 800kb

and in upload.php:

$handle->file_max_size = '819200'; // max size

Note that an usual error is due to the configuration of the “memory_limit” in php.ini. You should increase this value if you expect to upload larger images.

see the DEMO
download the source code here
Please check the updated version here!

Tagged with:


Chadking is an absolute geek that rarely leaves the comfort of his 3-screen desk. He is a self taught programmer and is addicted to all possible legal drugs.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 40

Comments are closed.
  1. Pingback: Tweets that mention jQuery Image Cropper with Uploader | Codrops -- Topsy.com

  2. Pingback: uberVU - social comments

  3. it’s sound great! a lovely features like gravatar, facebook, etc… thanks for share !!
    It could be nice if wordress add this build-in feature in next versions !


  4. Pingback: URL Image Getter/Uploader/Resizer | Codrops

  5. Pingback: 20 Plugins para jQuery | Renan Lima

  6. Uploaded this to my domain and could not get it to work at all. I can upload an image fine but jcrop never appears so i can crop the image. Any ideas what i could do to get this working cos I love it and need it.

  7. To continue my last comment, i tried a basic alert(‘hello’); on uploadify onComplete function and it doesn’t work. Please help…

    • Hi Carlos!
      I have tested it on my local machine and it seems to work fine. I have read some other comments that it doesn’t work, but I am not sure what exactly is causing that problem, since it’s working for me either on my local machine or here at Codrops. The only reason I could think of, is the size of the image you are uploading. Try to upload some small image first. You can set a different limit in the script afterwards.
      Let me know your results. I will try to find out what the problem might be.

  8. how ??? combine with data base mysql??

    how to insert file ext to data base mysql????

    thank u

  9. I love the demo! It looks like it works great. But, in the download code version there seems to be something wrong somewhere… I have exactly the same problem as Carlos. It’s definitely not a file size issue. A 50kb image uploads seemingly fine. But on completion the image fails to appear in firefox, chrome, or ie. IE give a javascript error: ‘null’ is null or not an object. I tried the newer v1.1 with exactly the same issue.
    😮 (

  10. one possible something…

    the jquery.uploadify.v2.1.0.js file makes reference to php file: uploadify.php

    “script : ‘uploadify.php’, // The path to the uploadify backend upload script”

    but that file is not included in the zip file

    • Hi dakine,
      the uploadify.php mentioned in the jquery.uploadify.v2.1.0.js is the default value. In the index file, it’s set as upload.php, so it will be overwritten.
      Could you try checking the permissions of the photos folder? That could be one of the causes… BTW, where are you using this? On your server? Locally? In the root folder?

  11. Hi,
    Thanks for the quick reply!
    The files are uploaded to a server. All folders have been set to full 777 access.
    It actually DOES upload the file (sort of) but it never appears as in the demo. But if you f5 after the error then the small starting thumbnail photo over the upload button has changed to whatever image was last attempted to upload. It’s like the upload goes fine and then when it hits ‘complete’ something in that next step fails.

  12. AHA….

    Found it.

    Thanks again for you quick reply earlier Cody. The server I usually use runs php5, this one I’m on at the moment is running php4. That’s the issue!

    Changed htaccess file to force php5 rendering and all is happy now!!


  13. Im running PHP 5, folders permissions are ok.

    Can’t get running on my localhost. It tries to upload the file, the progress bar appears, completes and goes away (super quickly). But the crop window doesn’t appear.

    Both v1 and v1.1 won’t work

  14. Hello,

    Thank you for this script.

    Is it possible to replace the flash button with an input ?

    The flash button is only visible on Internet Explorer.

    I’m french, I’m sorry for my english.

    Thank you

  15. I found the problem that most of you reported. It’s the upload.class – it has some errors, of functions that are deprecated.
    If you add error_reporting(0) to the class.upload.php it will work perfectly.

  16. If you are having trouble with the script not saving the image after cropped, check the values in crop.php that define the location of the images. The default is in the root/crop but if your script is in a different location you need to change these values (total 3)

  17. about class.upload.php – the author made some changes related to jCrop so better not to update the class

  18. hey, let me just say great script. only issue i have with it is when i try to upload a file which is too big, it alerts and says error like it should, but then crashes firefox so nothing works at all and you have to physically end process to close it. Hope this can be sorted would love to use you code in my site.


  19. hey, its me again. another issue i have just noticed is that it doesnt seem to actually crop the images rather than to just resize them to fit the sqaures.

  20. Hi,

    Its not working in firefox.
    I am not getting the upload button in your demo url even in firefox.
    And in demo image i upload is not getting save .
    I have firefox 3.6.17

  21. Hi, thanks for this great script, is there a way to upload more images while creating the thumbnails as well?

  22. Hey man, for some reason I can’t get the images to crop, it acts like it doesn’t see the selected area?

    Any ideas? Thanks man

  23. Exactly what I need. But I want to use a different image ratio like 150px wide by 100px wide. I want the preview and the dotted line selector guide to be the same aspect ratio? But no matter what I change, the selector guide wants to be square??? Thanks!

  24. Hi ! Thanks for this great script !! How to resize the image proportionally? thanks !

  25. Hi ! I’ve found how to resize the image proportionnaly :
    $handle->image_resize = true;
    $handle->image_ratio_x = true;
    $handle->image_y = ($handle->image_src_y image_src_y:600;

    But now, how can i insert the picture name in database ? Please i need help !! Thx a lot

  26. Sorry ! Corrected an error in my prvious code :
    $handle->image_y = ($handle->image_src_y image_src_y:600;

  27. Hi,
    I have the web application that requires 4 files of same image to be uploaded into 4 different folders, each time cropping same uploaded image, but to different dimensions.

    I am not able to do changes to the source code to suits my requirements.
    Please can any one help me.

  28. hi

    i can confirm the resize of the cropped image is not proportionally.

    changed in crop.php
    $handle->image_x = 140;
    $handle->image_y = 180:

    the created image is stretched.

    could you be that kind to reply … thx

  29. Hey, thanks so much for the great script.

    Besides, thanks for Antonio advice, must download the latest class.upload.php and replaced the original one, everything goes fine now.

  30. Hello can anybody tell me what must i do .

    everyone when upload a image is only one picture in destinaten call Picture.jpg

    what must i change for upload image

  31. Any ideas why it stucks at 100% uploading when trying to upload .gif images ?

    I managed to overcome any other obstacles but not this one yet.

    It does fine with png and jpg files.

    I tried this ‘fileExt’ : ‘*.jpg;*.gif;*.png’,

    which seemed to work for all three except that gifs stuck at 100% upload.

  32. I am pretty new to coding and would like to know how I can save these images to a folder on my server and add them to a mysql db.