UberUploadCropper V2 – Upload, Crop, No Flash
20 Dec
Posted by: trent in: Design, Impromptu, Javascript
Finally, UberUploadCropper gets a much needed update. First off, flash is gone. Now you can upload and crop with just javascript and your serverside language of choice. What is UberUploadCropper? It is a jQuery plugin which pulls together jCrop, Impromptu, and FileUploader plugins into one uniform unit to upload and crop images.
The latest version can be found with all it’s glory on Github, along with 2 examples. The examples provide a very basic, upload and crop routine. The second, a much more advanced example, demonstrates how to handle large images efficiently. Both examples should be fairly easy to merge into your own projects. Here is a video of version 1 of UberUploadCropper in action. I will provide a newer video shortly:
This plugin uses these three fantastic plugins:
- jQuery Impromptu for modal windows.
- Jcrop to crop the images.
- FileUploader to upload the images.
The plugins mostly differ in using ajax upload instead of Uploadify. So all options which use to target Uploadify have been removed and replaced with the corresponding FileUploader options. The examples are commented and should be pretty clear cut. Enjoy!
Update 2012-12-09
The File Uploader project has been relabeled as Fine Uploader.
Also, if you want to become more familiar with jQuery Impromptu so you can create more advanced prompts like UberUploadCropper I highly recommend the ebook “Impromptu From I to U”.
buy PDF + Code
buy PDF Only
81 Responses
Alex
Feb 01, 2012Hello there, thanks for this amazing work!
I’ve been looked for good pic-upload-crop plugin for a while.
My problem is that after I upload a picture, it comes an alert “Could not save uploaded file.The upload was cancelled, or server error encountered”, and it stopped.
This error comes from fileuploader.php.
I’ve check the write permission for /upload folder.
Is there anything I missed?
Thank you so much for the help!
Alex
Feb 01, 2012Hello there,
I found the solution for my problem below.
Please see here.
“I was able to resolve this and get uploads working by changing line 13 of fileuploader.php from:
$temp = tmpfile();
to
$temp = fopen(“php://temp”, “wb”);
I’m not sure which is the preferred method, but for some reason tmpfile() just isn’t working in a few server environments I’ve tried Assets in.”
It works for me! Still thanks Trend for fantastic script!
trent
Feb 01, 2012You’re welcome, glad you got it going!
iMartin
Feb 07, 2012Nice work !! It worked fine for me.
Tested on latest chrome, FF3.6, IE7 and IE8 !!
Thank’s a lot :)
marco
Feb 10, 2012Hi! Great script! What are the security control that i MUST do? Can you help me, please?
marco
Feb 11, 2012If i create a file with a javascript content or a shell and i rename it in .jpg it upload the file to the server… can you help us (with your genials ideas and tecniques) to write the necessary security control to don’t allow this kind of things, please?
Thank you very much!
trent
Feb 12, 2012Security is a very broad topic, some major points for you to check for would include:
- directory and uploaded file permissions (an image should be read only, see this page http://www.php.net/manual/en/function.chmod.php)
- file type (the fileuploader class has checks integrated for this, but only the extension. You may also want to check the mimetype? http://www.php.net/manual/en/function.getimagesize.php )
- file size (the fileuploader class has checks integrated for this)
These checks are not difficult to perform, and the class provided in the download handles some of it, but not all.
You can also create a unique token for that specific form request, if that token does not exist, then it may be coming from a bad request. Many php frameworks have integrated security for things like this.
marco
Feb 13, 2012thank you very much for your answer and for your advices! i’m trying to check the ‘mime’ with getimagesize but i have an error:
I wrote this code and putted at the end of qqFileUploader __contruct
$theimgPath = “http://localhost/_mySite/_userAccountFolder/$userID/”;
$imageInfo = getimagesize($theimgPath . $this->file->getName());
if($imageInfo['mime'] != ‘image/gif’ && $imageInfo['mime'] != ‘image/jpg’ && $imageInfo['mime'] != ‘image/bmp’&& $imageInfo['mime'] != ‘image/png’){
die(“{‘error’:'error in uploading’}”);
}
but i have an error :
Warning: getimagesize(http://localhost/_mySite/_userAccountFolder/311/fiore.bmp) [function.getimagesize]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found
Where i can put this control?
trent
Feb 13, 2012You may need to use the file path for that method, not the url
marco
Feb 13, 2012Do you say like this?
$imgN = $this->file->getName();
$pathinfo = pathinfo($this->file->getName());
$myPath = $pathinfo['dirname'];
$theimgPath = myPath . $imgN;
$imageInfo = getimagesize($theimgPath);
in $myPath i receive just a dot ‘.’
i tried to write a relative path like “../../_userAccountFolder/$userID/” too,
but in both the case i have the same result…
trent
Feb 13, 2012You would need to make sure getimagesize includes the file path and file name
marco
Feb 14, 2012ok, i made the right control in a new function called validate(), i’ve even mod this:
if (isset($_GET['qqfile'])) {
$this->file = new qqUploadedFileXhr();
if(!$this->file->validate()){
$this->file = false;
die(“{‘error’:'you cannot upload this’}”);
}
} elseif (isset($_FILES['qqfile'])) {
$this->file = new qqUploadedFileForm();
if(!$this->file->validate()){
$this->file = false;
die(“{‘error’:'you cannot upload this’}”);
}
} else {
$this->file = false;
}
and now if i send a false image, the script don’t upload it into the server, but now if i detect that it is a fake image, i just would want to stop the operation with the error without starting the crop.. how can i made this? Because now i just receive a popup with the error that i written in the “die” but the script continues to go..
Thank you very much!
marco
Feb 20, 2012Has anyone got any idea how can i stop the operation when i verify that it isn’t a real image?
Thanks to all
Kirk Hoey
Feb 28, 2012I love this! However, I have been running into trouble with the advanced example. Problem one… When I drag a file to upload the “drop files here to upload” box doesn’t appear unless I drag it back off the browser window, then it appears. And also if I decide not to drop the file, the “drop files here…” box stays put and doesn’t switch out with the the upload button. Problem two… If you set multiple to “true” for multiple uploads, The cropper doesn’t seem to work right. The first photo is fine. Then, when you get to the next photo, there isn’t one and it appears as the scaler is showing in a tiny corner of the modal box. If you hit “previous” to get back to the first photo, then the 2nd photo appears under the 1st photo stretching past the modal box. I’ve tested this in Chrome and Firefox on Windows… Has anyone else had problems with these bugs? I’d really love to use this I hope I can find a solution!
trent
Feb 28, 2012Kirk, Currently the multiple option does not work. There is a known issue with Uberuploadcropper when needing to create multiple Jcrop instances. This could likely be easily fixed, but haven’t had the opportunity to do so yet. Single upload crops should work fine however.
As far as the drag and drop, try checking for a newer version of that ajax upload library.
Alex
Mar 23, 2012Hi Trent, it’s me again. ^^
I’m trying to rename the file when upload process done.
I create the specific file name such as “001.jpg” on “index.php”, and how can I pass this name to “upload.php” and other script so that the file will be renamed and saved to “001.jpg”?
Please pardon my basic question, but I’ve worked for it for two days and still can’t find out. T____T
Thank you very much.
Alex
Mar 23, 2012Hey, sorry for bothering again, I found a way by myself but I think it’s not traditional one.
Firstly, on the “index.php”, I change the value of attribute “action” from “upload.php” to “upload.php?newName=001″, where “001″ will automatically generated by my php script from database.
Secondly, on the “fileuploader.php” line 129, I changed the “$filename = $pathinfo['filename'];” to $filename = $filename = $_GET["newName"];. The filename will be renamed to 001.jpg and saved and showed on screen correctly.
It works great for me.
It there a better way to achieve this work? I want to learn the standard method.
Thank you so much for everything!
trent
Mar 23, 2012Hey Alex,
The advanced example on GitHub changes the filename and passes it back, have a look at line 30:
https://github.com/trentrichardson/UberUploadCropper/blob/master/example-advanced/upload.php
$result = $uploader->handleUpload(UPLOAD_DIR, false, md5(uniqid()));
The third param would be your “001″. $result will end up looking similar to this(which is passed back to the upload cropper):
{ success: true, filename: “001.jpg”, originalFilename: “original.jpg” }
Hope that makes sense, the advanced example on Github covers this issue by setting the filename to md5(uniqid()) .jpg/.png/.gif etc..
trent
Mar 23, 2012Essentially you can undo your change to fileuploader.php and just pass in to handleUpload your $_GET['newName'] like so:
$uploader->handleUpload(UPLOAD_DIR, false, $_GET['newName'] );
Calle
Apr 02, 2012Hey Trent, thanks for a great upper & cropper! I’m trying to work out where the word “Done” is populated on the impromptu crop modalbox.. Struggling with finding where it’s being made! the closest i came was in the uberuploadcropper.js if (v = …
Any pointers greatly appreciated :)
trent
Apr 02, 2012Calle, have a look around line 107 and 109 in the uberuploadcropper file. There are key value pairs of buttons. The keys are button text and values are…well.. Button values. Just changing the keys should do the trick. Hope that helps?
Calle
Apr 03, 2012there it was! i fiddled with those earlier, but only changed the values in quotes. thanks! =)
Thinh
Apr 08, 2012Hello there, thanks for this amazing work!
I place the button upload on the bottom and when I click in the crop area, it had a error that the web page scroll to the bootom, it’s not focus to the image.
Can you help me, please?
Thinh
Apr 08, 2012my page: http://goodlife.com.vn/UberUploadCropper-5492420/example-advanced/
source code: http://goodlife.com.vn/UberUploadCropper-5492420.zip
Thinh
Apr 08, 2012sorry my source code here: http://goodlife.com.vn/UberUploadCropper-edit.zip
trent
Apr 09, 2012Looks like its unable to load jquery. It is trying to pull from a local ip address.
Thinh
Apr 09, 2012Can I set limit image upload?
trent
Apr 10, 2012You can but the problem is uberuploadcropper only handles 1 image at the time. There is a bug with Jcrop integration which prevents multiple uploads and crops at the same time.
Thinh
Apr 11, 2012Hi Trent,
I have fixed my page, now it can load jquery, but it’s still have this problem.
Peter
Apr 12, 2012Great script!
I’ve successfully installed it into my website but was just wondering, is it difficult to make it upload a separate thumbnail image of the cropped image so it can be reference throughout the site to save load times?
Keep up the good work!
trent
Apr 12, 2012Thinh, May want to check your php logs and directory paths/permissions. It appears to have trouble processing the upload.
Peter, Generally once the file is uploaded you make a copy of the uploaded file and resize and/or crop the copied file to be your thumbnail. No need to upload 2 files to achieve that. The provided image manipulation class can do the crops and resizes.
Thinh
Apr 12, 2012Hi Trent,
Thanks for your help!
I don’t think it’s directory paths/permissions, my problem is:
“I place the button upload on the bottom and when I click on the crop area, the web page scroll to the bootom, it’s not focus to the image.”
You can see at my page: http://goodlife.com.vn/UberUploadCropper-5492420/example-advanced/
InfoMan
Apr 15, 2012Hi Trent, Very good work, thanks for your great tool.
I’ve just changed some lines of code to make it allowed to upload and crop *.bmp files. I can now upload *.bmp file but the crop tool doesn’t function, I can drag and choose the area to crop but the result image is just the original big one, how to fix that please? I’ll be greatly appreciative if you help me out.
trent
Apr 17, 2012Thinh,
I see the issue, I’m not sure if that is linked to Impromptu or Jcrop.. It occurs when clicking inside the cropping square like you said, so I’m thinking Jcrop but there have been no new releases.
InfoMan,
The php library provided doesn’t include cropping/resizing bmp, so while the upload may work the resizing/cropping will not. I only provided gif, png, jpg since those are the most common to the web. I do believe php can handle those however so it would be simple to add. Start here:
http://www.php.net/manual/en/function.imagecreatefromwbmp.php
and in the php file add another condition in the resize and crop functions, and follow the pattern by the other image types.
nes
Apr 20, 2012Hello very nice job. But what we have to do if we want only one image in a preview div . Because as long as we upload file, we get many file in the preview. But i need to get only the latest and croped picture there. I try to change this part of code for(var i=0,l=imgs.length; i<l; i++){
$PhotoPrevs.append('’);
} but i get too much errors that i couldn’t resolve. Thanks for your help !
Vadim
Apr 27, 2012If php resizing is so easy to add, why not add it?
By the way I’m impressed that there is included a multiple upload, but not so impressed that since it was included, resizing works only on the first uploaded while the rest don’t even show for resizing. Or was that so easy to do that no one even bothered looking into it?
Vadim
Apr 27, 2012I meant bmp resizing, not php resizing..
trent
Apr 27, 2012It’s not difficult, why don’t you add it? Its open source and available to fork on Github:
https://github.com/trentrichardson/UberUploadCropper
The features it has met my needs at the time. If you look through my site I have a lot of open source projects, none of which I ask any money for, so those projects don’t feed my family or pay my bills. I’m not going to spend my time meeting every single need of every single person. My time is valuable. I make changes when I have spare time, not during family time, not during my sleep. I make the code open source so that it can be helpful to others, and they can change it to meet their needs. If they like they can submit it back to the project.
I hope you and anyone else stopping by understands. I’m only one person, I can’t do everything. I’ll do my job to pay my bills and feed my family, and I’ve given you a head start on doing your job if this little bit of code helps you any at all.
jpizzle
Apr 28, 2012Hey trent, amazing tool!
I’ve been searching for something like this for awhile, and this is by far the best implementation. I really appreciate the fact that you’re doing this and releasing the code open source :) Thanks so much!
I have a quick question, i’m using the example-basic version, and when I upload an image that is larger than the height of the browser window, the impromptu fade (gray background) ends up being only the original height of the web page (before the dialog containing the uploaded image pops up). As a result (because of the large image that exceeds the original height of the page) there is a large section down below that is not covered by the fade gray background.
Could you point me in the right direction on what I should be modifying to fix this? I’m by no means a JS guru (like you!:P), but should be able to cobble together a solution with a bit of guidance.
Many thanks again!
JP in Singapore
trent
Apr 28, 2012Hey jpizzle,
You’ll definitely want to dive in to the advanced example as that is where it comes in. It shows how to resize the image to a manageable size for the webpage crop it, then apply the crop to the original size image so no quality is lost.
It may take a few minutes to get a grasp of the routine, but once it’s implemented it makes perfect sense.
jpizzle
Apr 28, 2012Hi Trent,
Thanks so much for replying. Yes, I initially started out with the example-advanced, but after awhile realised that I wanted to get a WYSIWYG effect for the crop tool, which is something the basic version provides.
What i mean by WYSIWYG effect for the crop, means that whatever the user sees when he selects his crop size (which I am fixing at 250×250), will be exactly what is saved on a 1:1 basis. However, there’s no way to do this anymore if the crop preview image is resized to fit the page…
The example-basic works perfectly ( i made some changes that creates thumbnails in different sizes), with the only issue being the impromptu fade not covering the full size of the web page.
Thanks!
dGubb
Apr 29, 2012Hi Trent, Your script in amazing!! Just what ive been looking for! Im trying to save a separate thumbnail 3x smaller (200×145) than the cropped image (600×435). Could you shed some light on how i go about this?
Thanks!
D
jpizzle
Apr 30, 2012HI trent, no issues any more. I figured it out!
I just inserted this code:
var $body = $(document.body);
var $window = $(window);
var bodyHeight = $body.outerHeight(true),
windowHeight = $window.height(),
documentHeight = $(document).height(),
height = bodyHeight > windowHeight ? bodyHeight : windowHeight,
height = height > documentHeight? height : documentHeight;
$('#jqifade').height(height);
right at the end of
$(this).load(function() {
dGubb
Apr 30, 2012Hi Trent the fileupload shows a “Failed” message with anything over 3 MB, ive tried different file types yet still getting the same error. None of the messages on line 271 of fileuploader.js are being shown, so im not sure where the issue is. I’ve increased the ‘qqFileUploader’ $sizeLimit to 83886080 which should be fine as thats 8MB and my server settings allow for a far greater upload file limit
Could you or someone please help.
David
trent
May 01, 2012Hey dGrubb,
For the creating a thumbnail just use the gd_image functions to first create new file name:
$thumbFilePath = $gd->createName($origFilePath, “_thumb”);
Then a separate thumb image:
$gd->copy($origFilePath, $thumbFilePath);
Then resize that new thumb file to your size:
$gd->resize($thumbFilePath, 200, 145);
Have a look at the functions in gd_image, they are well documented on how to use them. It’s not a super advanced library but accommodates most basic image needs pretty well.
For the file upload size you probably need to update your php.ini file to allow larger uploads. Change 2 variables, your max post size and max upload size. (Just open php.ini and search for max). Then restart your apache/iis server.
hansk
May 03, 2012I’m trying to get the minimum crop width working. Now it’s allmost working, I only need to pass the original image width to the Jcrop.js file (jquery.Jcrop.min.js). Does someone knows how I can do that?
Thanks in advance!
trent
May 03, 2012Look in the upload.php at the comments for this line:
$result = $uploader->handleUpload(UPLOAD_DIR, false, '');$result is what is returned to the Jcrop. It is an associative array so you can add more values to that array if you need to
hansk
May 04, 2012Thanks trent, it works now, there’s now a minimum crop area when cropping the uploaded image. So I can’t crop smaller than the minSize.
Now, the only thing I need to do is check the image if it’s bigger (pixels) than that minimum size. I want to do this after upload, but before the Impromptu window. Therefor I’m trying to make a “step 1.5″ in the upload.php file, where I want to check the “minSize”. Am I on a good way there?
trent
May 04, 2012Sounds like you’re on the right track
hansk
May 09, 2012Thanks, after some modifications I got it working. There’s now a custom message if someone tries to upload an image which is too small.
michael
May 14, 2012Great script Trent!
How to forbid uploading of images less 300px x 300px?
Holmesy
May 14, 2012Could this script do cross domain?
trent
May 16, 2012Michael, this plugin doesn’t have that ability, but you may be able to check for a minimum file size? This may be fairly dependable that the image is large enough. Looks like the file-uploader plugin has a minSizeLimit and sizeLimit options: (around line 262)
https://github.com/valums/file-uploader/blob/master/client/fileuploader.js#L262
Holmesy,
Not sure on that. The file-uploader plugin would likely be the one that wouldn’t be. The others should work fine.
thomas
May 22, 2012Amazing work!
I got it working with sizes but i want GIF and PNG to be converted to JPG. Does anybody know?
thomas
May 25, 2012Tried to modify the files but im no php-guy ;) This code under works for me. Most of my images are jpg anyways..
I added this to a new linkbutton and separate php file. So i run it if the upload is png.
Put this in a new file and call it what you want(for png to jpg). Just change the paths..
<?php
$imageFile = 'uber/uploads/myimage.png';
$imageObject = imagecreatefrompng($imageFile);
imagejpeg($imageObject, 'uber/uploads/myimage.jpg');
echo "PNG converted and replaced the JPG";
Trent
May 25, 2012Thanks for posting your solution Thomas. Does this code handle transparency ok from a png? Jpg I don’t think can handle transparency. Seems like in the transparency will show as black, but I think you can set the canvas color as white. I don’t remember the method to handle that though.
Varun Gupta
May 28, 2012Hey Trent,
Amazing job with the script! Were able to find what we were looking for.
However there is one problem we face Trent and are unable to fix it. Your help would be greatly appreciated. Thanks in advance….
Problem –
1. We tested with the Advanced Example that was given on the link https://github.com/trentrichardson/UberUploadCropper
2. We uploaded an image and the name showed in the bullet below the upload button, and the cropped image appeared below it.
3. We hit Upload one more time. It again gave the option to crop and listed the second image below the first bullet in the second bullet. It also uploaded both the files cropped.
4. This can be done any number of times.
We would like to inhibit the option to upload the second time, and also the option of multiple upload.
Is it possible that when the user hits upload for the second time, instead of cropping and uploading a second image, the first image gets replaced? Meaning multiple images do not get uploaded. Only one gets uploaded. Hitting upload and cropping again just replaces the old image uploaded.
Look forward Trent…
Thanks much!
thomas
May 29, 2012Trent:
Found a way to convert png with alpha as an color. :)
http://stackoverflow.com/questions/2569970/gd-converting-a-png-image-to-jpeg-and-making-the-alpha-by-default-white-and-not
Varun:
If i understood you right.. For overwriting the existing image over and over..
In upload.php change the false to true. It should look like this:
$result = $uploader->handleUpload(UPLOAD_DIR, true, ‘myimage’);
Varun Gupta
May 29, 2012Many thanks Thomas.
Did try your suggestion before. The line in upload.php looks like –
$result = $uploader->handleUpload(UPLOAD_DIR, true, ‘myimage’);
However, the problems which still persist after this were –
1. On hitting upload for the second time, the gif loads and gives an error “Failed” on the frontend in the second bullet below the original file name.
2. The image does not replace and the upload fails.
Is there a way in which when the user hits upload for the second time, the following happens –
1. The same filename in bullet one reloads on the frontend
2. The file in the uploads folder gets replaced with the new file
Arthur
May 30, 2012Hi Trent,
First, thank you for this amazing scripts and thank you for sharing that with us ;)
I’ve got a question. I try to crop an image already saved on the server.
Few explanation: First i upload a image from my computer, save this image(the original) on the server, crop it (save the crop on the server too) and display the crop image (resize) on my page.
That works very well.
Now i just want to modify the cropping image that i display on my page.
For that, i try to recall the original image(that i have on the server) to crop it again and display the new cropping image.
I hope i was clear (sorry for my english).
For summary, don’t want to upload from a computer but from a directory on the server.
Could you or someone please help.
Thank you
Arthur
Bhavin
Jun 01, 2012Hi Trent,
Beautiful script.
Tried using this
$thumbFilePath = UPLOAD_DIR . $gd->createName($filePath, "_thumb");
$gd->copy($filePath, $thumbFilePath);
But no copies are being created in the uploads folder…any thoughts?
Regards,
Bhavin
Bhavin
Jun 01, 2012Hi Trent,
One more thing. When you select a file to upload, but then decide to cancel by pressing the “x” button on the top right corner, the /uploads/ directory shows the file. How do we stop that from happening?
So while the cropping window opens up, that’s fine, but then i decide to cancel it, the file still gets uploaded. How do we stop it? Where do i change the code?
Thanks,
Bhavin
Bhavin
Jun 01, 2012Hi Trent,
Finally got it working, but let me know if this is the correct way to go about doing what i said before…creating a big image and a thumbnail..
$oldSize = $gd->getProperties($filePath);
$newSize = $gd->getAspectRatio($oldSize['w'], $oldSize['h'], 800, 0);
$bigFilePath = $gd->createName($filePath, “_big”);
$gd->copy($filePath, $bigFilePath);
$gd->resize($bigFilePath, $newSize['w'], $newSize['h']);
// 3) crop the full size image
$gd->crop($filePath, $newCoords['x'], $newCoords['y'], $newCoords['w'], $newCoords['h']);
// 5) create thumbnail
$ar = $gd->getAspectRatio($newCoords['w'], $newCoords['h'], 100, 0);
$gd->resize($filePath, $ar['w'], $ar['h']);
$thumbnailFilePath = $gd->createName($filePath, ‘_thumb’);
rename($filePath, $thumbnailFilePath);
Cheers,
Bhavin
Thinh
Jun 08, 2012Hello There,
I had increase upload_max_filesize to 10M in php.ini but I couldn’t upload file > 2M.
How do I fix this problem?
Thanks,
trent
Jun 08, 2012There is also a max post size you may need to adjust too. The upload plugin on the javascript side also has a max and min file size option. So, three in total:
- php.ini: upload max filesize
- php.ini: max post size
- fileuploader.js: sizeLimit and minSizeLimit
Then restart server
trent
Jun 08, 2012Bhavin, looks like you’re on the right path. Just remember that if the picture is smaller than 800px you will lose quality by sizing it larger. If you’re certain it will always be larger than 800 you should be ok.
Thundar
Jun 11, 2012I’ve found an issue about multiple image cropping. As stated before, the images duplicate. It is somehow related to Jcrop(‘disable’) and ‘enable’. I commented all of them in my uberuploadercropper.js and now it works fine.
Cool script btw.
Nandana
Jun 14, 2012Hi,
It is an awesome script. All went well with me .But when I puts it in my server. The image to crop which comes in light box is taking too much time. People will think it doesn’t work. It takes about 6-8 seconds to load. And also while loading it looks untidy because the image comes first the the outer div. Can anything be done about this?
Pablo
Jun 19, 2012Hi Nandana, could you explain more in detail how fixed the problem with multiple images?
Thank you very much.
Paul.
Pablo
Jun 19, 2012Estimated Trent, congratulations for your great work. I have the same problem you had last raised Kirk 02/28/2012. Know if that fixes the case of loading several images simultaneously.?
Thank you very much.
Paul.
Pablo
Jun 20, 2012Trent, partly solve the problem of multiple images, using the latest version of JCrop. One can follow the sequence and cut one by one. The only remaining problem is that from the second onwards are duplicated vertically. Could you guide me how to fix this?
Thank you very much for your generosity.
Paul.
trent
Jun 20, 2012Hey Pablo, I currently haven’t had the time to look at the issue. Each state change may need to enable and disable the other Jcrop instances on state change
Pablo
Jun 20, 2012Dear Trent, I sincerely appreciate your generosity in making this code available to us. I have found the code point where there is duplication of the images. In the file jquery-uberuploadcropper.js defeat the next segment: (line 132)
$(this).Jcrop(options);
if(i > 0)
$(this).Jcrop(‘disable’);
I can follow the sequence of multiple images, there are no duplicate. I can not cut them. As you told me is about to destroy and create every time we change state. If you have any ideas I’ll be very grateful.
Thank you very much.
Paul
Mario
Jul 14, 2012Great plugin! I managed to configure everything to work with my website, I was just wondering: how can I reset the the thumbnail/displayed image and the file list every time I upload, instead of appending? I tried to figure out from your JS, but the DOM techniques you use are way above my skill level.
Thanks!
Bruckner Jürgen
Aug 13, 2012Great script !!
how can i change it to “without upload function” ?
Only from exist pictures on my server.
christopher musni
Sep 05, 2012hi trent,
nice to reach you, by the way I am a Pilipino.
I am integrating it with mysql database to store the image’s url when i am uploading it to the server,part of it, i want to produce a small(48×48) and a medium(200×200)images with their urls stored in two separate fields in my file table. And I made it right and running!!!… Thanks for your great development…it saves me a lot of time. Godbless
Malek
Oct 06, 2012Thank you so much for your code. I wish you and your family a happy life :)
mahendra
Oct 20, 2012Hello,
great work trent nice work really appreciated.It’s work completely in my local but when i upload that in live site then it’s give me error of “http : error” i don’t know what missing by me .
Please check this following link.
http://joomlaextensions.co.in/interpartnership/index.php?option=com_jek2storymultipleform&view=jesubmit&Itemid=443
in that when upload image after 100% give error “HTTP Error” can you please check and give solution regarding that issue.
please reply me as soon as possible.
thanks in advance.
Regards,
mahendra varma
new_coder
Nov 02, 2012Hi,
Great job.. But I think there is a mistake with cancellation process.. if you cancel while cropping the images remain on upload folder.. I mean;
1- click UPLOAD and choose an image
2- when on cropping screen click X to close (cancel the cropping)
3- you will see 2 images (original and resized) inside your upload folder which will stay there forever till you delete them manually
With this problem anybody can upload mb’s of images to your upload folder without any stopping..
Am i right or i am the only one having this problem?
Mikeal
Nov 06, 2012I’m running this on Windows 2008 in IIS7 and the IMG[].filename is returning undefined. Any ideas?
trent
Nov 07, 2012Turn on your php debugging and look for errors. Also check file permissions on the upload folder.