I know that form nesting is not a valid option for html5 (and generally for html) so I'd like to understand how can I do a file upload inside a form without using another form.

I have a form where the user can choose one image from a dropdown. I'd like to give the user the ability to add another image on the fly while filling the form. The new image will be then added as an option to the dropdown and the user can choose it.

EDIT: when I say choose an image from a dropdown I mean that the images are stored on the server on a specific folder. In the dropdown I show the files name (stored in a db). Adding a new image to the folder will add it to the db to and will add the new image name to the select. But each select option will just be:

<option value=id_from_db>Image_name_from_db</option>

and the table in the db will have: id - name - path_to_file

Usually I use the jquery Form plugin to upload the new image and this plugin looks for a form with the <input type=file> tag to do the upload. Is there any chance to upload the image without the nested form? I was thinking about using an iframe but this looks like a crazy idea. The actual html structure looks like:

<form>

    //some more stuffs for the main form

    <select name=image>

        <option>existing options</option>

    </select>

    <form>

        <input type=file>

        <button>Upload file</button>

    </form>

    //some more stuffs for the main form

    <button>Submit form</button>

</form>

I have no issue posting the main form, I have no issue adding the new file as an option to the select. But this structure is not a valid html and will not work.