PDA

View Full Version : [CLOSED] [MVC] FileUpload in MVC



UnifyEducation
Jun 01, 2012, 9:39 AM
Hi, Could you give me an axample for using FileUpload in MVC?

Html.X().FormPanel()
.Border(false)
.ID("UploadForm")
.Items(itm =>
{
itm.Add(Html.X().TextField().FieldLabel("Name"));
itm.Add(Html.X().FileUploadField().FieldLabel("Select new document").Icon(Icon.Attach));
itm.Add(Html.X().TextField().FieldLabel("Description"));
})
.Listeners(l => l.ValidityChange.Handler = "#{SaveButton}.setDisabled(!valid);")
.Buttons(btn =>
{
btn.Add(Html.X().Button().ID("SaveButton").Text("Upload").Disable(true)
.OnClientClick("doUpload();")
.DirectEvents(d =>
{
d.Click.Before = "if (!#{UploadForm}.getForm().isValid()) { return false; } Ext.Msg.wait('Uploading ...', 'Uploading');";
d.Click.Failure = "Ext.Msg.show({ title : 'Error',msg : 'Error during uploading',minWidth: 200,modal : true,icon : Ext.Msg.ERROR,buttons : Ext.Msg.OK });";
}));
btn.Add(Html.X().Button().Text("Reset").Listeners(ls => ls.Click.Handler = "#{UploadForm}.getForm().reset();"));
}))

What must I add to this view and the controller?

Daniil
Jun 01, 2012, 11:09 AM
Hi,

Example View

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:FormPanel runat="server" Width="300" Url="/Test/Submit">
<Items>
<ext:FileUploadField
runat="server"
FieldLabel="FileUploadField"
AnchorHorizontal="100%">
<Listeners>
<Change Handler="this.ownerCt.submit();" />
</Listeners>
</ext:FileUploadField>
</Items>
</ext:FormPanel>
</body>
</html>


Example Controller Action

public ActionResult Submit()
{
HttpPostedFileBase file = Request.Files[0];
object r = new
{
success = true,
name = Request.Files[0].FileName
};
return Content(string.Format("<textarea>{0}</textarea>", JSON.Serialize(r))); ;
}

Daniil
Mar 28, 2013, 9:19 AM
A new example of upload. Demonstrates how to use a FormPanelResult and pass parameters.

Example View

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:FormPanel runat="server" Width="300" Url="/Aspx/Submit">
<Items>
<ext:FileUploadField runat="server" FieldLabel="FileUploadField" AnchorHorizontal="100%">
<Listeners>
<Change Handler="this.up('form').submit({
params: {
testParam: 'testValue'
}
});" />
</Listeners>
</ext:FileUploadField>
</Items>
</ext:FormPanel>
</body>
</html>


Example Action

public FormPanelResult Submit(string testParam)
{
FormPanelResult r = new FormPanelResult();
r.IsUpload = true;
r.Success = true;
string msg = Request.Files[0].FileName + "<br/>testParam: " + testParam;

X.Msg.Alert("Uploaded", msg).Show();

return r;
}

equiman
Jan 20, 2015, 9:16 PM
@Dannil thanks. Second example with parameters works perfect.

If some one needs convert received File to by Array this post can help it:
http://stackoverflow.com/questions/1934289/upload-an-image-and-get-its-bytes

equiman
Jan 21, 2015, 3:48 AM
I'm trying found the way... but i'm lost.

Where is the place to show Mask and how receive response when is success or failure?

Daniil
Jan 21, 2015, 4:45 AM
You could show a mask just before a .submit() call.

As for success and failure, there are respective handlers you could pass via a config object of a .submit(config) call.

See also
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-method-submit

equiman
Jan 27, 2015, 4:03 PM
Now I see the light... it's like an Ext.net.DirectMethod.request
Thanks!!!! works excellent.

Finally I'm not implement a mask:

Ext.Msg.wait('Uploading file...', '');

Then... when finish (to hide it):

Ext.MessageBox.hide();

In this cases... I think it's more useful wait message than a mask!