PDA

View Full Version : [CLOSED] Uploading file from a window using MVC



ingbabic
Feb 11, 2015, 8:54 AM
I want to upload file using FileUploadField. If I use plain FormPanel (without a window), everything works, but as soon as I put a FormPanel in a Window file upload does not work. Please try it yourself. This is the code (from samples) which works:



@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}

<h2>Index</h2>

@section example
{
<form id="fileUpload" enctype="multipart/form-data">
X.FormPanel()
.ID("BasicForm")
.Width(500)
.Frame(true)
//.Title("File Upload Form")
.PaddingSpec("10px 10px 0 10px")
.FieldDefaults(fd => fd.LabelWidth = 50)
.Defaults(d =>
{
d.Add(new Parameter("anchor", "95%", ParameterMode.Value));
d.Add(new Parameter("allowBlank", "false", ParameterMode.Raw));
d.Add(new Parameter("msgTarget", "side", ParameterMode.Value));
})
.Items(
X.TextField()
.ID("PhotoName")
.FieldLabel("Name"),

X.FileUploadField()
.ID("FileUploadField1")
.EmptyText("Select an image")
.FieldLabel("Photo")
.ButtonText("")
.Icon(Icon.ImageAdd)
)
.Listeners(l => l.ValidityChange.Handler = "#{SaveButton}.setDisabled(!valid);")
.Buttons(
X.Button()
.ID("SaveButton")
.Text("Save")
.Disabled(true)
.DirectEvents(de =>
{
de.Click.Url = Url.Action("UploadClick");
de.Click.FormID = "fileUpload";
de.Click.Before = @"if (!#{BasicForm}.getForm().isValid()) { return false; }
Ext.Msg.wait('Uploading your photo...', 'Uploading');";
de.Click.Failure = @"Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});";
}),

X.Button()
.Text("Reset")
.OnClientClick("#{BasicForm}.getForm().reset();")
)
)
</form>
}
But if you just surround a FormPanel in a Window like this:

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}

<h2>Index</h2>

@section example
{
<form id="fileUpload" enctype="multipart/form-data">
@(Html.X().Window()
.Title("Upload an image")
.Width(500)
.Closable(true)
.Resizable(false)
.Items(
X.FormPanel()
.ID("BasicForm")
.Width(500)
.Frame(true)
//.Title("File Upload Form")
.PaddingSpec("10px 10px 0 10px")
.FieldDefaults(fd => fd.LabelWidth = 50)
.Defaults(d =>
{
d.Add(new Parameter("anchor", "95%", ParameterMode.Value));
d.Add(new Parameter("allowBlank", "false", ParameterMode.Raw));
d.Add(new Parameter("msgTarget", "side", ParameterMode.Value));
})
.Items(
X.TextField()
.ID("PhotoName")
.FieldLabel("Name"),

X.FileUploadField()
.ID("FileUploadField1")
.EmptyText("Select an image")
.FieldLabel("Photo")
.ButtonText("")
.Icon(Icon.ImageAdd)
)
.Listeners(l => l.ValidityChange.Handler = "#{SaveButton}.setDisabled(!valid);")
.Buttons(
X.Button()
.ID("SaveButton")
.Text("Save")
.Disabled(true)
.DirectEvents(de =>
{
de.Click.Url = Url.Action("UploadClick");
de.Click.FormID = "fileUpload";
de.Click.Before = @"if (!#{BasicForm}.getForm().isValid()) { return false; }
Ext.Msg.wait('Uploading your photo...', 'Uploading');";
de.Click.Failure = @"Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});";
}),

X.Button()
.Text("Reset")
.OnClientClick("#{BasicForm}.getForm().reset();")
)
)
)
</form>
}

then whole sample does not work. I need this to be in a window (due to my apps design). What should I do?

Daniil
Feb 11, 2015, 4:49 PM
Hi @ingbabic,

A Window as a floating component is rendered to a <body> even if you put into a form. So, it is rendered outside of the <form> and, therefore a FileUploadField is outside of the <form>.

I would try either of the following approaches.

- Set RenderTo="fileUpload" for the Window

or

- Remove this de.Click.FormID = "fileUpload";. In this case a DirectEvent should create a temporary <form> automatically.

ingbabic
Feb 11, 2015, 5:14 PM
Well,
RenderTo="fileUpload" seem to be working but then whole window goes up and you don't see top part of the window (before FileUploadField), including title bar and everything else (see on the picture)

21051

Daniil
Feb 11, 2015, 5:44 PM
I think the <form> doesn't have height enough to contain the entire Window. It is a floating component and it doesn't expand the <form> height as it happens when you put a FormPanel inside it.

Please try the second approach.

ingbabic
Feb 12, 2015, 7:45 AM
Second approach does not work. It simply ignores what enter and behaves as if I never entered file name (field is required error).

Daniil
Feb 12, 2015, 3:46 PM
Reproduced.

There is a piece of functionality that resets a FileUploadField on submitting. You can read more details here (http://forums.ext.net/showthread.php?18833).

It turns out that resetting happens before a DirectEvent's Before handler.

I can suggest to set .ClearOnSubmit(false) for the FileUploadField.

Also please set:

de.Click.IsUpload = true;

There is a small Upload File using DirectEvent (http://forums.ext.net/showthread.php?27549) tutorial with some basics.

ingbabic
Feb 13, 2015, 7:25 AM
Thanks Daniil
It works now! I just want to tell one more thing. I tried to leave


.RenderTo("fileUpload")

but instead only


<form id="fileUpload" enctype="multipart/form-data">

I put


<form id="checkinForm" enctype="multipart/form-data" style="height:500px">

and it worked as well (without ClearOnSubmit(false)), only window vertical position varies depending on height of the form which I put.

Daniil
Feb 13, 2015, 9:31 AM
I guess if no height is specified for <form> it is zero height or something like that.