4

Currently I have a form which requests user information e.g. name, photo and dob

<form action="action.php" method="post" enctype="multipart/form-data" >
    <input type="text" name="name" value="" />
    <input type="file" name="image" />
    <input type="text" name="dob" value="" />
    <input type="submit" name="submit" value="submit" />
</form>

I would like the user to be able to upload and then crop the image before sending the form. What would be the best way to do this? I know it is not possible to nest forms. Would the following work:

  • have an event on the browse button
  • when user clicks browse and selects file, the image is uploaded via ajax
  • when upload is complete an overlay is presented to user
  • user is able to crop the image - user clicks save and dialog closes
  • dimensions are stored in hidden fields in the form
  • user completes rest of form and submits

Or is there a better solution?

3

3 Answers 3

0

Your solution sounds like the most logical way to do it, if you wish to have the server perform the cropping.

You could however, have users with HTML5 supported browsers perform the cropping through canvas and send the final cropped image to you as data. The only advantage with this option is that it could take some load off your servers, but it would basically mean you'd need to implement both your solution and this, unless you expect all your users to be using HTML5 browsers.

Additionally, you would still need to perform some validations on the image from the server side, even if they submitted a canvas that supposedly should be cropped (users can always circumvent javascripts). The user would technically be uploading the image twice as well, unless canvas can access local files defined by the user without them having to upload them before editing (I certainly would think there'd be security measures in browsers to prevent that).

0

I think you have to first save image to disk and than only you should be able to crop it. Checkout http://deepliquid.com/projects/Jcrop/demos.php . Which programming language you are using ?

This shows php implementation .

http://www.sanisoft.com/blog/2010/11/08/jcrop-demo-using-php/

http://www.cagintranet.com/archive/how-to-use-jcrop-from-within-an-application/

If you are using ajax uploader it might not be refreshing page . There will be a javascript call back method on sucessfull upload. On that function you can set image src using jquery and than enable your cropping UI .

function AjaxUploaderSucess(){
    $("#imgBox").show()
    $("#imgBox").attr("src", uploadimageUrl); 
    $("#imgBox").Jcrop();//Enable your crop ui
}
6
  • How are you saving file to server ? You must use a programming language to do that as html,javascript and css are for gui and not for server side processing.Even for cropping image you must d some server side process.
    – Pit Digger
    Commented Jun 7, 2011 at 16:31
  • oh sorry I misunderstood, will be using php
    – xylar
    Commented Jun 7, 2011 at 16:36
  • @user608576 i think you misunderstood my original question. I know the process of how to crop, resize and upload the image. The problem is the image input is inside the form and I want to upload the image without pressing submit on the form, crop it, then submit it.
    – xylar
    Commented Jun 7, 2011 at 18:16
  • Check updated answer.Providing more details helps answering question.
    – Pit Digger
    Commented Jun 7, 2011 at 20:01
  • @user608576 hmm I don't think that solves my problem. I need a solution of how to upload an image without clicking submit. when the file has upload I will allow the user to crop it, then save these dimensions in the form which will be submitted alongisde the name,dob etc. I have found this workaround: stackoverflow.com/questions/2230150/…
    – xylar
    Commented Jun 8, 2011 at 14:25
0

Got this working using http://www.webtoolkit.info/ajax-file-upload.html which I found via Alternative to an Ajax upload form nested in another form

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.