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.
You can use the readAsDataURL method to display the image in the dropdown. Or just add an option that reads something like "use own image" after the user used the file input to upload an image.
Then you can just post the form as normal, containing both the user's image and the information that he wants to use it. Connecting the two bits of information will happen on the server side.
If you absolutely want to upload the image first, use AJAX. jQuery can get the value from the input without considering the rest of the form:
$(imageInput).on('change', function(){
var data = this.files[0];
$.post(imagePostUrl, data);
});
In the html, either put the imageInput outside your form, or remove the image input from your form data with Javascript when the form is submitted, if you don't want your image to be uploaded again.
Please note that this will only work in HTML5 compliant browsers. Older browsers can't send files via AJAX this way.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments