PDA

View Full Version : [CLOSED] File import wizard



ingbabic
Jun 09, 2015, 3:16 PM
I have following scenario: User wants to import a file in the system. He will do it using a wizard form where on first page he have to set a file to import, a name for a document that will be created in the system and the type of the document. In Second wizard page he optionally have to enter different set of metadata depending on the type of the document he have chosen on the first page. For now I have done something like this:


<form id="fileUpload" enctype="multipart/form-data">
@(
Html.X().Window().Title("Import file").Width(500).Height(400).Layout(LayoutType.Fit)
.Items
(
Html.X().Panel().ID("WizardPanel").BodyPadding(15).Layout(LayoutType.Card).ActiveIn dex(0)
.Items
(
Html.X().FormPanel().ID("Panel1").Border(false).Header(false).Layout(LayoutType.VB ox)
.Items
(
Html.X().FileUploadField().ID("FileUploadField1").ClearOnSubmit(false).EmptyText("Select a file").FieldLabel("File:").ButtonText("...").LabelWidth(40).AllowBlank(false).Width(300),
Html.X().TextField().ID("docName").FieldLabel("Name:").LabelWidth(40).Width(300),
Html.X().ComboBox().FieldLabel("Type:").LabelWidth(40).Width(300)
.Items(new ListItem[] { new ListItem("Invoice", "invoice"), new ListItem("Contract", "contract"), new ListItem("Instructions", "instructions")})
.SelectedItems(new ListItem() { Value = "invoice" }),
Html.X().Component().Flex(1),
Html.X().Checkbox().BoxLabel("Subscribe to this document")
)
,
Html.X().Panel().ID("Panel2").Html("<h1>Card 2</h1><p>Step 2 of 2</p>").Border(false).Header(false)
)
.Buttons
(
Html.X().Button().ID("btnPrev").Text("Prev").Disabled(true).Icon(Icon.PreviousGreen).DirectEv ents(de =>
{
de.Click.Url = Url.Action("Prev_Click");
de.Click.ExtraParams.Add(new Parameter("index", "#{WizardPanel}.items.indexOf(#{WizardPanel}.layout .activeItem)", ParameterMode.Raw));
}),
Html.X().Button().ID("btnNext").Text("Next").Icon(Icon.NextGreen).DirectEvents(de =>
{
de.Click.Url = Url.Action("Next_Click");
de.Click.ExtraParams.Add(new Parameter("index", "#{WizardPanel}.items.indexOf(#{WizardPanel}.layout .activeItem)", ParameterMode.Raw));
}),
Html.X().Button().ID("btnFinish").Text("Finish").Icon(Icon.Accept).DirectEvents(de =>
{
de.Click.Url = Url.Action("Finish_Click");
de.Click.IsUpload = true;
de.Click.ExtraParams.Add(new Parameter("formValues", "#{Panel1}.getForm().getFieldValues(false)", ParameterMode.Raw));
de.Click.Success = @"
this.up('window').close();
";
de.Click.Failure = @"Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});";
})
)
)
)
</form>

The problem is that fileUploadField.HasFile returns false. If I comment out "WizardPanel" and leave only FormPanel and "Finish" button in window then everything works. What to do?

Daniil
Jun 10, 2015, 2:16 PM
Hi @ingbabic,

With the new setup the Click DirectEvent cannot find a form to submit.

That wrapping a Window into a <form> doesn't work - the Window is rendered directly to <body> anyways. So, you can remove this:

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


If I comment out "WizardPanel" and leave only FormPanel and "Finish" button in window then everything works.

A DirectEvent searches a <form> or a FormPanel up to the hierarchy starting from the control that owns that DirectEvent. So, if a Button is inside a FormPanel's Buttons, it can find that FormPanel. If a Button is inside Buttons of Panel that is outer from the FormPanel, it cannot find it.

I would recommend you to use a DirectEvent's FormID.

de.Click.FormID = "Panel1";

ingbabic
Jun 11, 2015, 12:59 PM
Works! Thanks for explanation.