Ricardo Racciore Ricardo Racciore - 4 months ago 13
HTML Question

Accessing input files outside a form

I'am creating a widget (with tabbed divs) that contains multiple forms. Each form has multiple inputs such as name and description. The user is also able to upload photos. The problem here is that the photos are shared with all the forms. For example:

<div class="tabbedDiv">
<div class="tab1">
<form action="/Home/PostForm1" enctype="multipart/form-data" method="post">
<input type="text" ...>
<input type="text" ...>
<input type="submit" value="Submit">
</form>
</div>
<div class="tab2">
<form action="/Home/PostForm2" enctype="multipart/form-data" method="post">
<input type="text" ...>
<input type="text" ...>
<input type="submit" value="Submit">
</form>
</div>
<div class="tab3">
<form action="/Home/PostForm3" enctype="multipart/form-data" method="post">
<input type="text" ...>
<input type="text" ...>
<input type="submit" value="Submit">
</form>
</div>
</div>


<div class="pull-right fileUpload btn btn-default" id="inputDiv">
Upload
<i class="fa fa-camera"></i>
<input type="file" class="upload" id="imgInputNormal" name="imgInput[]" accept="image/*" multiple />
</div>


So my problem here is that when I post one of the forms (1,2 or 3) I cannot access the input files on my controller since the file input is not inside any form. If I put a file input on each one of the forms then all the files will only be referred to that same form. Like I've said in the beginning, these files will be independent from the widget forms.

This is how I'm getting the form files:

IFormFileCollection oCollection = Request.Form.Files;


So any idea on how can I share the file input will all the forms in order to get these same files in my controller when one of the form is submited?

Thank you.

PS: Let me know if I was not clear enough.

Answer

If your users will all be using HTML5-compliant browsers, the only thing I can think of is a bit of a dirty hack, but it might work - add the attribute form="form1" to your <input type="file"...>. Then handle the event when the tab changes, and change the form= attribute to the id of the form currently being displayed (your forms will need ids). This should associate the file input with the form currently being displayed and cause it to be submitted along with the rest of the data.

See http://www.w3schools.com/tags/att_input_form.asp for background.