jQuery Image Cropper with Uploader

Development October 17, 2009 by chadking 14 Comments

jquery_cropper

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: , , , ,

You might also like

Discussion14 Join the discussion

  • dlv
    October 29th, 2009 at 11:14

    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 !

    adeux

  • Carlos
    March 8th, 2010 at 20:33

    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.

  • Carlos
    March 8th, 2010 at 20:50

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

  • cody
    March 8th, 2010 at 21:29

    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.
    Regards

  • dani8
    April 25th, 2010 at 01:09

    how ??? combine with data base mysql??

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

    thank u

  • dakine
    June 1st, 2010 at 23:02

    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.
    :o (

  • dakine
    June 1st, 2010 at 23:27

    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

  • cody
    June 1st, 2010 at 23:43

    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?
    Cheers

  • dakine
    June 2nd, 2010 at 00:51

    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.

  • dakine
    June 2nd, 2010 at 01:14

    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!!

    D.

Follow this discussion

Trackbacks

Join the discussion