Question

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?

Answer 1

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