Save File Dialog on Submit PopupForm

Sep 1, 2011 at 9:06 AM

Hi,

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.

Coordinator
Sep 2, 2011 at 12:20 PM

Hi,

the popupform uses jquery form

http://jquery.malsup.com/form/#file-upload 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.

CODE:

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):

[HttpPost]
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.RefreshOnSuccess){%>
            location.reload(true);
       <%} %>
       <% 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">
            Msi:
        </div>
        <div class="einput">
            <input type="file" name="file" />
        </div>
    </div>
}