[CLOSED] Uploading files

[r_honey]

Hi, please have a look at the following markup:

				<ext:FormPanel runat="server" ID="pnlBranchLogo" FileUpload="true" RenderFormElement="true" Frame="true" Layout="Form" Height="110">
					<Items>
						<ext:ComboBox runat="server" ID="comboBranchLogo" AllowBlank="false" StoreID="storeBranch" DisplayField="agencyName" ValueField="no"
								FieldLabel="Branch" ForceSelection="true" Mode="Local" />
						<ext:TextField runat="server" ID="txtBranchLogo" Name="BranchLogo" AllowBlank="false" ButtonText="Select Logo" FieldLabel="Logo Image"
								Note="Allowed Files (.bmp, .tif, .gif, .png, .jpg only)" NoteAlign="Down" Width="300">
							<CustomConfig>
								<ext:ConfigItem Name="inputType" Value="file" Mode="Value" />
							</CustomConfig>
						</ext:TextField>
						<ext:Button runat="server" ID="btnBranchLogo" Text="Submit Logo for Selected Branch" Handler="Bkg.btnBranchLogoClicked" />
					</Items>
				</ext:FormPanel>

When I use this, I get a javascript exception (htmlfile: Unknown runtime error) at "el.innerHTML = createHtml(o);" line inside Ext.DomHelper.overwrite method, when the FormPanel renders. The contents of object o are: {"tag":"form","cls":"x-panel-body","method":"POST","id":"ext-gen677","enctype":"multipart/form-data"}

When I remove the RenderFormelement="true", the form renders fine. However, now using:

pnlBranchLogo.getForm().submit({ url: ...

later when the button is clicked generates javascript error saying that form.submit() button is not supported (inside Ext.extend(Ext.data.Connection).

Any help would be appreciated!!

[Vladimir]

Hi,

FormPanel cannot render form tag inside ASP.NET because nested html forms (inside another html form) are not supported by HTML specification (therefore you have js error)

Also you cannot call submit method if you FormPanel inside another form (there is no own form for the panel) and FormPanel must submit files (because ExtJS logic assumes that FormPanel always renders own form and ASP.NET form breaks that logic).

I can suggest to use Click DirectEvent of the btnBranchLogo button (disadvantage of this approach is that all fields of the ASP.NET form will be submitted)

<Click Url="..." IsUpload="true" CleanRequest="true">
</Click>

Another suggestion (not sure if it is suitable for you), render FormPanel outside ASP.NET form panel

P.S. We added functionality which allows Ext.Net controls map submitable values to own propeties if there is no runat form therefore you can use several forms on your page and submit only what you need

[r_honey]

Hi vlad, thanks for the reply. I figured out the restrictions due to nested <form> tags created by RenderFormElement=true, and that the form element needs to be rendered for submitting data using getForm().submit();

Unfortunately, DirectEvent is not an options because I am uploading files through a web-service, and cannot afford posting back the entire form. Anyways, I found a workaround which runs fine for me.

I was not able to understand this:

We added functionality which allows Ext.Net controls map submitable values to own propeties if there is no runat form therefore you can use several forms on your page and submit only what you need

Can you please elaborate with an example??

[geoffrey.mcgill]

Can you please elaborate with an example??

Summary... you can have multiple <form>'s on the same page (as long as they are not nested).

You are not restricted to a single <form runat="server">.

Hope this helps.

[r_honey]

Well, as I said earlier, I have a work-around now, that I have discussed here:
http://www.rahulsingla.com/blog/2010...ng-web-service

[r_honey]

You are not restricted to a single <form runat="server">.

Hi geoff, apart from the "DefaultRenderTo=Body", is there anything else that might be in the context of vlad's statement: We added functionality which allows Ext.Net controls map submitable values to own propeties if there is no runat form therefore you can use several forms on your page and submit only what you need

[Vladimir]

Hi,

Please see the following sample
- in the following sample we don't have ASP.NET form (form runat="server")
- we have three FormPanel which renders own form (FormPanel can automatically detect that there is no ASP.NET form and will render own form)
- when you click "Submit this form" then each form will submit own fields only (fields from another form will not be submitted)
- please note that automatic mapping will be performed (from Request.Form collection to the fields properties). It is not required manually to do it (like, TextField1.Text = Request.Form[TextField1.ClientID];)
- fill all fields and press buttons to see messages with submitted information
- add ASP.NET form (wrap markup in the BODY), fill fields and see difference

Here is the code

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <title></title> 
    
    <script runat="server">
        private void ShowFormInfo(FormPanel form)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("Submitted fields: ");

            foreach (string key in Request.Form.Keys)
            {
                sb.Append(key).Append(", ");
            }

            sb.Append("<br/>Submitted files: ").Append(Request.Files.Count);

            sb.Append("<br/>Form items: <br/>");
            foreach (Field field in form.Items)
            {
                sb.Append(field.ClientID).Append("=").Append(field.Value.ToString()).Append("<br/>");
            }

            X.Msg.Alert("Submit", sb.ToString()).Show();
        }
        
        protected void Submit1(object sender, DirectEventArgs e)
        {
            ShowFormInfo(FormPanel1);
        }

        protected void Submit2(object sender, DirectEventArgs e)
        {
            ShowFormInfo(FormPanel2);
        }

        protected void Submit3(object sender, DirectEventArgs e)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("Submitted fields: ");

            foreach (string key in Request.Form.Keys)
            {
                sb.Append(key).Append(", ");
            }

            sb.Append("<br/>Submitted files: ").Append(Request.Files.Count);            

            X.Msg.Alert("Submit", sb.ToString()).Show();
        }
        
    </script>
</head>
<body>
      <ext:ResourceManager ID="ResourceManager1" runat="server" />
      
      <ext:Viewport runat="server" Layout="HBox">
          <LayoutConfig>
              <ext:HBoxLayoutConfig Align="StretchMax" />
          </LayoutConfig>
          <Items>
              <ext:FormPanel ID="FormPanel1" runat="server" Title="Form 1" Flex="1" FormID="Form1">
                  <Items>
                      <ext:TextField ID="Field1_1" runat="server" FieldLabel="Field 1" Text="Field1" />
                      <ext:TextField ID="Field1_2" runat="server" FieldLabel="Field 2" Text="Field2" />
                      <ext:TextField ID="Field1_3" runat="server" FieldLabel="Field 3" Text="Field3" />
                  </Items>
                  <Buttons>
                     <ext:Button runat="server" Text="Submit this form">
                        <DirectEvents>
                            <Click OnEvent="Submit1" FormID="Form1" />
                        </DirectEvents>
                     </ext:Button>
                  </Buttons>
              </ext:FormPanel>
              
              <ext:FormPanel ID="FormPanel2" runat="server" Title="Form 2" Flex="1" FormID="Form2">
                  <Items>
                      <ext:TextField ID="Field2_1" runat="server" FieldLabel="Field 1" Text="Field1" />
                      <ext:TextField ID="Field2_2" runat="server" FieldLabel="Field 2" Text="Field2" />
                      <ext:TextField ID="Field2_3" runat="server" FieldLabel="Field 3" Text="Field3" />
                  </Items>
                  <Buttons>
                     <ext:Button runat="server" Text="Submit this form">
                        <DirectEvents>
                            <Click OnEvent="Submit2" FormID="Form2" />
                        </DirectEvents>
                     </ext:Button>
                  </Buttons>
              </ext:FormPanel>
              
              <ext:FormPanel ID="FormPanel3" runat="server" Title="Form 3 - File uploads" Flex="1" FileUpload="true">
                  <Items>
                      <ext:FileUploadField ID="FileUploadField1" FieldLabel="Field 1" runat="server" Width="300" />
                      <ext:FileUploadField ID="FileUploadField2" FieldLabel="Field 2" runat="server" Width="300" />
                      <ext:FileUploadField ID="FileUploadField3" FieldLabel="Field 3" runat="server" Width="300" />
                      
                      <ext:Button runat="server" Text="Submit this form (automatic form detection)">
                        <DirectEvents>
                            <Click OnEvent="Submit3" />
                        </DirectEvents>
                     </ext:Button>
                  </Items>                  
              </ext:FormPanel>
          </Items>
      </ext:Viewport>
</body>
</html>

[r_honey]

Hi vlad, thanks for these wonderful replies and for the good work Ext.Net team is doing. I said this earlier also, and probably should say again, that Ext.Net (and ExtJs) frameworks are more dynamic than one can keep up a pace with them.

I tried your sample code and it runs fine. One implication of not wrapping it in <form runat="server"> is that it needs to be put in the asp page itself. If the aspx page has <form runat="server">, then the only option for the .ascx User Controls is to specify the renderTo attribute for the FormPanel outside the parent form, or put the FormPanel inside a Window, and move the window outside the ASP.NET form tag, using either renderTo, of DefaultRenderTo. Please correct me if I am wrong.

Your code ran successfully as is, but wrapping it up inside a <form runat="server"> and then submitting a form generated a js exception for the file which contains Ext.net.ResourceMgr at the top of it.

The exception generated was: 'length' is null or not an object
at 'length' is null or not an object ext.axd?v=2342, line 1897 character 22

[geoffrey.mcgill]

If you wrap the entire sample in a <form runat="server">, you'll need to remove the all the .FormID properties.

We've discussed some changes that will handle this automatically, actually, after complete (and if it works), Vladimir's original sample will work without having to set any .FormID properties. We just need a bit of time to implement.

[r_honey]

Well, yes, it worked without the FormID. Thanks for clearing that up..

Please keep us updated on any changes in this regard.. This is too useful a functionality to miss out!!!