1

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.

Tseng
  • 61,549
  • 15
  • 193
  • 205
Ricardo Mota
  • 1,194
  • 2
  • 12
  • 25
  • if the forms are in separate tabs, and therefore never visible together, then I don't understand why you don't just put one photo input onto each form. Only one of the forms can ever be submitted at a time, so presumably the user must choose which one to submit and then fill in the fields on that form? So having the photo upload in each form would be no problem? – ADyson Jul 28 '16 at 13:10
  • Hi. The problem there is that the user might change the tab. If he does that I would like to keep the files that he has chosen first. Thats why I've decided to keep the files outside the forms and make them independent. – Ricardo Mota Jul 28 '16 at 13:15
  • 1
    You could do something like this with jquery/ajax: http://stackoverflow.com/questions/3820860/post-with-mvc-2-including-values-outside-of-form – Steve Greene Jul 28 '16 at 13:32

1 Answers1

2

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.

ADyson
  • 57,178
  • 14
  • 51
  • 63