Save File Dialog on Submit PopupForm

Sep 1, 2011 at 9:06 AM


Before, excuse my english.

I create a PopupForm with textbox, dropdowns, grids, etc. and it work correctly on submit.

When i add a input type file in the popupform, on submit Firefox shows me a save file dialog.

What can be happening?

Thank you.

Sep 2, 2011 at 12:20 PM


the popupform uses jquery form here is a demo of file upload using jquery.form

if it doesn't work you could try do it using some async file upload js lib 

Sep 6, 2011 at 7:46 PM

I had this same requirement for a project that I'm working on. I was able to get a file to upload along with the input form. Below are some examples. I chose a text area based on the suggestion from jQuery Form Plugin though I suppose a custom element would be better since it's really just XML coming back and then getting stripped by a RegEx. Hope this helps.


MVC Controller (note that I'm tracking the files via DB and just storing them on disk with a random Guid, the area on disk is stored in the web.config):

public ActionResult Create(HttpPostedFileBase file, EntityInput input)
	if (!ModelState.IsValid)
		return View(input);

	if (file.ContentLength > 0)
		var fileId = _crudService.Create(new File() { FileName = file.FileName });
		file.SaveAs(Path.Combine(ConfigurationManager.AppSettings["filestore"], fileId.ToString()));

		var entity= _builderCreate.BuildEntity(input, new Entity(););
		entity.FileId = fileId;				
		return Content(string.Format("<textarea>{{\"Id\":\"{0}\"}}</textarea>", _EntityService.Create(entity)));
	return Json(null);

JavaScript (this is modifying the OnSuccess method of PopupForm.ascx)

function OnSuccess<%=o %>(result) {            
   var re = new RegExp("<textarea>(.*?)</textarea>");
   var m = re.exec(result);            
   if (m != null) result = $.parseJSON(m[1]);
   if (result == 'ok' || typeof(result) == 'object') {
       $("#<%=o %>").dialog('close');
       <%} %>
       <% if(Model.SuccessFunction != null) {%>
           <%=Model.SuccessFunction %>(result);
   } else {
      update<%=o %> (result)
CSHTML (EntityInfo is obviously whatever you want for your input):
@model EntityInput
@using (Html.BeginForm())
    @Html.EditorFor(o => o.EntityInfo)
    <div class="efield">
        <div class="elabel">
        <div class="einput">
            <input type="file" name="file" />