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?