[FIXED] [#1527] [4.4.0] FileUploadField breaking Html forms on 4.3

Page 1 of 2 12 LastLast
  1. #1

    [FIXED] [#1527] [4.4.0] FileUploadField breaking Html forms on 4.3

    After upgrading to 4.3 from 4.2 we noticed Html forms are being broken returning an empty page when:

    1. A FileUploadField control is put inside them, and...
    2. You perform a post back such as DirectEvents/Click

    Sample code from Ext.Net Examples with 4.3 upgrade (Examples/Form/FileUploadField/Basic/Default.aspx)

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void UploadClick(object sender, DirectEventArgs e)
        {
            string tpl = "Uploaded file: {0}<br/>Size: {1} bytes";
    
            if (this.FileUploadField1.HasFile)
            {
               X.Msg.Show(new MessageBoxConfig
                {
                    Buttons = MessageBox.Button.OK,
                    Icon = MessageBox.Icon.INFO,
                    Title = "Success",
                    Message = string.Format(tpl, this.FileUploadField1.PostedFile.FileName, this.FileUploadField1.PostedFile.ContentLength)
                });
            }
            else
            {
               X.Msg.Show(new MessageBoxConfig
                {
                    Buttons = MessageBox.Button.OK,
                    Icon = MessageBox.Icon.ERROR,
                    Title = "Fail",
                    Message = "No file uploaded"
                });
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>FormPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <style>
            #fi-button-msg {
                border: 2px solid #ccc;
                padding: 5px 10px;
                background: #eee;
                margin: 5px;
                float: left;
            }
        </style>
    
        <script>
            var showFile = function (fb, v) {
                if (v) {
                    var el = Ext.get('fi-button-msg');
                    el.update('<b>Selected:</b> ' + v);
    
                    if (!el.isVisible()) {
                        el.slideIn('t', {
                            duration: .2,
                            easing: 'easeIn',
                            callback: function () {
                                el.highlight();
                            }
                        });
                    } else {
                        el.highlight();
                    }
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
    			<Listeners>
    				<DocumentReady Handler="alert('DocumentReady: Forms=' + document.getElementsByTagName('form').length);" />
    				<BeforeAjaxRequest Handler="alert('BeforeAjaxRequest: Forms= ' + document.getElementsByTagName('form').length);" />
    				<AjaxRequestComplete Handler="alert('AjaxRequestComplete: Forms=' + document.getElementsByTagName('form').length);debugger;" />
    			</Listeners>
            </ext:ResourceManager>
    
            <h1>File Upload Field</h1>
    
            <h2>Basic FileUpload</h2>
    
            <p>A typical file upload field with Ext style.  Direct editing of the text field cannot be done in a
                consistent, cross-browser way, so it is always read-only in this implementation.</p>
    
            <ext:FileUploadField ID="BasicField" runat="server" Width="400" Icon="Attach" />
    
            <ext:Button runat="server" Text="Get File Path">
                <Listeners>
                    <Click Handler="var v = #{BasicField}.getValue(); Ext.Msg.alert('Selected&nbsp;File', v && v != '' ? v : 'None');" />
                </Listeners>
            </ext:Button>
    
            <h2>Basic FileUpload (Button-only)</h2>
    
            <p>You can also render the file input as a button without the text field, with access to the field's value via the
                standard <tt>TextField</tt> interface or by handling the <tt>FileSelected</tt> event (as in this example).</p>
    
            <ext:FileUploadField runat="server" ButtonOnly="true">
                <Listeners>
                    <Change Fn="showFile" />
                </Listeners>
            </ext:FileUploadField>
    
            <div id="fi-button-msg" style="display:none;"></div>
            <div class="x-clear"></div>
    
            <h2>Form Example</h2>
    
            <p>The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
                field is required in this example), empty text, etc.</p>
    
            <ext:FormPanel
                ID="BasicForm"
                runat="server"
                Width="500"
                Frame="true"
                Title="File Upload Form"
                PaddingSummary="10px 10px 0 10px"
                LabelWidth="50">
                <Defaults>
                    <ext:Parameter Name="anchor" Value="95%" Mode="Value" />
                    <ext:Parameter Name="allowBlank" Value="false" Mode="Raw" />
                    <ext:Parameter Name="msgTarget" Value="side" Mode="Value" />
                </Defaults>
                <Items>
                    <ext:TextField ID="PhotoName" runat="server" FieldLabel="Name" />
                    <ext:FileUploadField
                        ID="FileUploadField1"
                        runat="server"
                        EmptyText="Select an image"
                        FieldLabel="Photo"
                        ButtonText=""
                        Icon="ImageAdd"
                        />
                </Items>
                <Listeners>
                    <ValidityChange Handler="#{SaveButton}.setDisabled(!valid);" />
                </Listeners>
                <Buttons>
                    <ext:Button ID="SaveButton" runat="server" Text="Save" Disabled="true">
                        <DirectEvents>
                            <Click
                                OnEvent="UploadClick"
                                Before="if (!#{BasicForm}.getForm().isValid()) { return false; }
                                    Ext.Msg.wait('Uploading your photo...', 'Uploading');"
    
                                Failure="Ext.Msg.show({
                                    title   : 'Error',
                                    msg     : 'Error during uploading',
                                    minWidth: 200,
                                    modal   : true,
                                    icon    : Ext.Msg.ERROR,
                                    buttons : Ext.Msg.OK
                                });">
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button runat="server" Text="Reset">
                        <Listeners>
                            <Click Handler="#{BasicForm}.getForm().reset();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    You can also see the same behavior in the online Ext.Net Form Example at => https://examples4.ext.net/#/Form/FileUploadField/Basic/
    Last edited by fabricio.murta; Aug 30, 2017 at 1:19 AM.
  2. #2
    Hello @AdvanceLoanTechnologies!

    We have a couple people report this. In fact we not only investigated the issue but (hopefully) fixed it! But we couldn't get anyone of the people reporting the issue to provide feedback whether the proposed fix works for them or not...

    So while we expect to be ready to commit the change to the code at any moment, we couldn't have the community feedback from the fix. That would ultimately make it to Ext.NET 4.4.0, but it would be great if you could confirm whether our research tackled down the issue or if it creates other issues for you.

    Would you mind checking out github issue #1527 and letting us know whether that does it (right) for you?
    Fabrício Murta
    Developer & Support Expert
  3. #3

    FileUploadField breaking Html forms on 4.3 - Test fix

    Hi Fabricio:

    We just tested the fix found at https://github.com/extnet/Ext.NET/issues/1527 in our local Ext.Net Examples projects 4.2 (upgraded to NuGet 4.3) and seems to be working.

    Below the same sample page with the JS fix added

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void UploadClick(object sender, DirectEventArgs e)
        {
            string tpl = "Uploaded file: {0}<br/>Size: {1} bytes";
    
            if (this.FileUploadField1.HasFile)
            {
               X.Msg.Show(new MessageBoxConfig
                {
                    Buttons = MessageBox.Button.OK,
                    Icon = MessageBox.Icon.INFO,
                    Title = "Success",
                    Message = string.Format(tpl, this.FileUploadField1.PostedFile.FileName, this.FileUploadField1.PostedFile.ContentLength)
                });
            }
            else
            {
               X.Msg.Show(new MessageBoxConfig
                {
                    Buttons = MessageBox.Button.OK,
                    Icon = MessageBox.Icon.ERROR,
                    Title = "Fail",
                    Message = "No file uploaded"
                });
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>FormPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <style>
            #fi-button-msg {
                border: 2px solid #ccc;
                padding: 5px 10px;
                background: #eee;
                margin: 5px;
                float: left;
            }
        </style>
    
        <script>
        	/* https://github.com/extnet/Ext.NET/issues/1527 */
        	Ext.define('gh1527', {
        		override: 'Ext.data.request.Form',
        		upload: function (form, url, params, options) {
        			var me = this,
    					extnet_call = false;
    
        			form = Ext.getDom(form);
    
        			options = options || {};
    
        			Ext.each(Object.keys(options.headers), function (key) {
        				if (key == "X-Ext-Net") {
        					extnet_call = true;
        					return false;
        				}
        			});
    
        			if (!extnet_call) {
        				return me.callParent(arguments);
        			} else {
        				var frameDom = document.createElement('iframe'),
    						frame = Ext.get(frameDom),
    						id = frame.id,
    						hiddens = [],
    						encoding = 'multipart/form-data',
    						buf = {
    							target: form.target,
    							method: form.method,
    							encoding: form.encoding,
    							enctype: form.enctype,
    							action: form.action
    						},
    						addField = function (name, value) {
    							hiddenItem = document.createElement('input');
    							Ext.fly(hiddenItem).set({
    								type: 'hidden',
    								value: value,
    								name: name
    							});
    							form.appendChild(hiddenItem);
    							hiddens.push(hiddenItem);
    						},
    						hiddenItem, obj, value, name, vLen, v, hLen, h, request;
    
        				frame.set({
        					name: id,
        					cls: Ext.baseCSSPrefix + 'hidden-display',
        					src: Ext.SSL_SECURE_URL,
        					tabIndex: -1
        				});
    
        				document.body.appendChild(frameDom);
    
        				if (document.frames) {
        					document.frames[id].name = id;
        				}
    
        				Ext.fly(form).set({
        					target: id,
        					method: 'POST',
        					enctype: encoding,
        					encoding: encoding,
        					action: url || buf.action
        				});
    
        				if (params) {
        					obj = Ext.Object.fromQueryString(params) || {};
    
        					for (name in obj) {
        						if (obj.hasOwnProperty(name)) {
        							value = obj[name];
        							if (Ext.isArray(value)) {
        								vLen = value.length;
        								for (v = 0; v < vLen; v++) {
        									addField(name, value[v]);
        								}
        							} else {
        								addField(name, value);
        							}
        						}
        					}
        				}
    
        				this.frame = frame;
    
        				frame.on({
        					load: this.onComplete,
        					scope: this,
        					single: !Ext.isOpera
        				});
    
        				form.submit();
    
        				Ext.fly(form).set(buf);
    
        				for (hLen = hiddens.length, h = 0; h < hLen; h++) {
        					Ext.removeNode(hiddens[h]);
        				}
    
        				return form;
        			}
        		}
        	});
    
            var showFile = function (fb, v) {
                if (v) {
                    var el = Ext.get('fi-button-msg');
                    el.update('<b>Selected:</b> ' + v);
    
                    if (!el.isVisible()) {
                        el.slideIn('t', {
                            duration: .2,
                            easing: 'easeIn',
                            callback: function () {
                                el.highlight();
                            }
                        });
                    } else {
                        el.highlight();
                    }
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
    			<Listeners>
    				<DocumentReady Handler="alert('DocumentReady: Forms=' + document.getElementsByTagName('form').length);" />
    				<BeforeAjaxRequest Handler="alert('BeforeAjaxRequest: Forms= ' + document.getElementsByTagName('form').length);" />
    				<AjaxRequestComplete Handler="alert('AjaxRequestComplete: Forms=' + document.getElementsByTagName('form').length);debugger;" />
    			</Listeners>
            </ext:ResourceManager>
    
            <h1>File Upload Field</h1>
    
            <h2>Basic FileUpload</h2>
    
            <p>A typical file upload field with Ext style.  Direct editing of the text field cannot be done in a
                consistent, cross-browser way, so it is always read-only in this implementation.</p>
    
            <ext:FileUploadField ID="BasicField" runat="server" Width="400" Icon="Attach" />
    
            <ext:Button runat="server" Text="Get File Path">
                <Listeners>
                    <Click Handler="var v = #{BasicField}.getValue(); Ext.Msg.alert('Selected&nbsp;File', v && v != '' ? v : 'None');" />
                </Listeners>
            </ext:Button>
    
            <h2>Basic FileUpload (Button-only)</h2>
    
            <p>You can also render the file input as a button without the text field, with access to the field's value via the
                standard <tt>TextField</tt> interface or by handling the <tt>FileSelected</tt> event (as in this example).</p>
    
            <ext:FileUploadField runat="server" ButtonOnly="true">
                <Listeners>
                    <Change Fn="showFile" />
                </Listeners>
            </ext:FileUploadField>
    
            <div id="fi-button-msg" style="display:none;"></div>
            <div class="x-clear"></div>
    
            <h2>Form Example</h2>
    
            <p>The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
                field is required in this example), empty text, etc.</p>
    
            <ext:FormPanel
                ID="BasicForm"
                runat="server"
                Width="500"
                Frame="true"
                Title="File Upload Form"
                PaddingSummary="10px 10px 0 10px"
                LabelWidth="50">
                <Defaults>
                    <ext:Parameter Name="anchor" Value="95%" Mode="Value" />
                    <ext:Parameter Name="allowBlank" Value="false" Mode="Raw" />
                    <ext:Parameter Name="msgTarget" Value="side" Mode="Value" />
                </Defaults>
                <Items>
                    <ext:TextField ID="PhotoName" runat="server" FieldLabel="Name" />
                    <ext:FileUploadField
                        ID="FileUploadField1"
                        runat="server"
                        EmptyText="Select an image"
                        FieldLabel="Photo"
                        ButtonText=""
                        Icon="ImageAdd"
                        />
                </Items>
                <Listeners>
                    <ValidityChange Handler="#{SaveButton}.setDisabled(!valid);" />
                </Listeners>
                <Buttons>
                    <ext:Button ID="SaveButton" runat="server" Text="Save" Disabled="true">
                        <DirectEvents>
                            <Click
                                OnEvent="UploadClick"
                                Before="if (!#{BasicForm}.getForm().isValid()) { return false; }
                                    Ext.Msg.wait('Uploading your photo...', 'Uploading');"
    
                                Failure="Ext.Msg.show({
                                    title   : 'Error',
                                    msg     : 'Error during uploading',
                                    minWidth: 200,
                                    modal   : true,
                                    icon    : Ext.Msg.ERROR,
                                    buttons : Ext.Msg.OK
                                });">
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button runat="server" Text="Reset">
                        <Listeners>
                            <Click Handler="#{BasicForm}.getForm().reset();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    However, we have the following concerns:

    1. Will this JS fix affect other parts of the Ext.Net libraries?
    2. When will 4.4 be released with this fix?
    Last edited by AdvanceLoanTechnologies; Aug 24, 2017 at 2:13 PM. Reason: Code sample formatting
  4. #4
    Hello @AdvanceLoanTechnologies!

    Thanks for the feedback, and glad it worked for you!

    The way the fix was written tries to avoid the behavior required by Ext.NET should the call come from ExtJS-specific events, so what we expect is the fix won't affect other parts of ExtJS and also retain Ext.NET behavior from previous versions, without breaking it.

    As for the release date of Ext.NET 4.4.0, we can't precise you with it, but we expect to make it in the next few weeks. You can already check out the status of the next release if you check out from github, branch ExtJS_651. We've already submit it to the examples explorer preliminary tests and it runs fine. We just can't call it stable because there are still outstanding changes to be applied to Ext.NET code to reflect the ExtJS API changes.

    This bug is still not merged in to the development branch, as mentioned in our previous post here.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5

    FileUploadField breaking Html forms on 4.3 - 4.4 Release

    Do you expect this fix will be merged into DEV and make it before 4.4 release?
  6. #6
    Yes, we are going to apply it in at any moment from now.

    We'll tie this thread to the issue, so we post an update here as soon as the merge is done.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    We are also testing the fix from the github issue because we have to fix this bug right away. So far we are having no issues with the fix, and pages with FileUploadFields are now working. I will update here if we run into any issues.
  8. #8
    If you happen to use any radio group with FileUploadField within the same form, you'd also want to follow this one:

    - FileUploadField conflicting with RadioButtons state on 4.3
  9. #9
    Hello @AdvanceLoanTechnologies and @tylert!

    We have just pushed the fix to github. In the end we didn't use the solution we proposed initially. I found at some point that re-submitting the form does not re-submit the file, and does the "file-field-less" submit procedures. I mean, the first time a direct event/method/submit happened, the submission worked as expected. From the second time onwards, the form was tainted by a rather undesired side effect of the submission code and no longer considered the file upload field(s) within.

    Besides, the new approach seems to be more transparent and congruent to ExtJS development that caused this issue in the first place, so I'm confident it will work great on most of your test cases.

    Just for the record, the related issue where radio components were not being correctly submitted in this situation is also fixed. Again, this related issue came before the very bug covered by this thread appeared. It was just not reported/discovered before this one arose.

    We're looking forward to your most welcome feedback!
    Fabrício Murta
    Developer & Support Expert
  10. #10

    Blank Page after direct event with Ext FileUpload

    I am experiencing the same issue mentioned in this thread. You mention a new fix instead of the override. Can you please let me know how to get it. I am using 4.3.x

    Thanks
    Idriss
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 5
    Last Post: Jun 20, 2018, 1:53 PM
  2. [OPEN] [#432] RegisterGlobalScript and MVC/ASPX Web Forms not working
    By adrianot in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 17, 2014, 1:43 PM
  3. Ext 2.1 Breaking changes
    By PetrSnobelt in forum 2.x Help
    Replies: 5
    Last Post: Dec 17, 2012, 4:49 AM
  4. Replies: 9
    Last Post: Dec 12, 2012, 5:04 AM

Posting Permissions