Question

I have a MVC 3 application with Razor. The form is data driven and has a series of testboxes and radio buttons and a file upload control. The textboxes and radiobuttons reside in first form and the upload control is in its own form. If the file is uploaded first then everything is fine. But if say the user fills in the form with the textboxes and radio buttons and then browse’s to the file to attach and clicks attach (a submit button) within the 2nd form, the whole page is posted back and all the controls loses their values and its not user intutive. As I am trying to do the file upload and uploading the file on the server as a separate task on the form, I am not able to find any examples on the net for such a scenrio. All I find is people doing form elemnets and file uploads in one subit action. My requirement is such that the file upload is kept seperate so that users can attach files and also remove files which are attached, so only when they are happy do they submit the form. Any pointers welcome.

Answer 1

Here’s an approach you could try and which seems adapted to your scenario:

1. Use AJAX (or Flash/Silverlight/HTML5) in order to upload the file to avoid page reloads. There are many plugins and possibilities out there: plupload, uploadify, jquery form, …, just pick one that suits you.
2. When the user uploads the file store it on the server on some temporary location and return an unique id so that later you could fetch this file.
3. On the client use the id to inject it into a hidden field on the first form (the one that contains all the textboxes and radios).
4. When the user submits the first form the id of uploaded file will be sent to the server and you will be able to fetch the file that was uploaded.

This approach could also allow you to upload multiple files. Just play with jQuery and manipulate the array of hidden fields (add, remove, …).