New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ext.NET 4.3.0: Add Ext.Net.FileUploadField. click the "submit" button, the page will be lost. #1527

Closed
hejiquan opened this Issue Aug 14, 2017 · 6 comments

Comments

Projects
None yet
2 participants
@hejiquan

hejiquan commented Aug 14, 2017

Edit by Ext.NET - begin
Found: 4.3.0
Ext.NET forum thread: FileUploadField breaking Html forms on 4.3
Edit by Ext.NET - end

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

<script runat="server">
    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("DirectMethod", "Button Clicked").Show();
    }
</script>
<!DOCTYPE html>
<html>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:FileUploadField runat="server" />
        <ext:Button runat="server" Text="submit" OnDirectClick="Button1_Click" />
    </form>
</body>
</html>

See Also

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Aug 15, 2017

Contributor

Hello @hejiquan!

Thanks for the report. We've received another complaint about the file upload field but there were no test case at all. This one is pretty straightforward. We will investigate this!

Contributor

fabriciomurta commented Aug 15, 2017

Hello @hejiquan!

Thanks for the report. We've received another complaint about the file upload field but there were no test case at all. This one is pretty straightforward. We will investigate this!

@fabriciomurta fabriciomurta self-assigned this Aug 15, 2017

@fabriciomurta fabriciomurta added this to the 4.4.0 milestone Aug 15, 2017

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Aug 15, 2017

Contributor

The cause has been found. Now we'd need to think on a good solution for this.

ExtJS introduced a line of code to remove any form provided to Ext.data.request.Form.upload() from the document's DOM. So a copy of a "current" form should be built and passed in. This may mean additional memory needs to transmit a form with a grid, for example, which would not be desirable. But this "feature" may have been written to avoid/avert memory leaks from submitting forms.

ExtJS 6.2.1 offending line of code
ExtJX 6.5.0 offending line of code

This same issue is still actual in ExtJS 6.5.1.

Contributor

fabriciomurta commented Aug 15, 2017

The cause has been found. Now we'd need to think on a good solution for this.

ExtJS introduced a line of code to remove any form provided to Ext.data.request.Form.upload() from the document's DOM. So a copy of a "current" form should be built and passed in. This may mean additional memory needs to transmit a form with a grid, for example, which would not be desirable. But this "feature" may have been written to avoid/avert memory leaks from submitting forms.

ExtJS 6.2.1 offending line of code
ExtJX 6.5.0 offending line of code

This same issue is still actual in ExtJS 6.5.1.

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Aug 15, 2017

Contributor

This override should do for now:

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;
        }
    }
});
Contributor

fabriciomurta commented Aug 15, 2017

This override should do for now:

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;
        }
    }
});
@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Aug 15, 2017

Contributor

Adding the "sencha" label because a change in ExtJS caused the issue and ExtJS code will need to be reviewed to fix it. But the issue (probably) affects on Ext.NET server-side calls.

Contributor

fabriciomurta commented Aug 15, 2017

Adding the "sencha" label because a change in ExtJS caused the issue and ExtJS code will need to be reviewed to fix it. But the issue (probably) affects on Ext.NET server-side calls.

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Aug 24, 2017

Contributor

Added link to a report with feedback we got from forums: FileUploadField breaking Html forms on 4.3

Information injected into the first comment.

Contributor

fabriciomurta commented Aug 24, 2017

Added link to a report with feedback we got from forums: FileUploadField breaking Html forms on 4.3

Information injected into the first comment.

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Aug 30, 2017

Contributor

A different fix than the proposed was implemented. The proposed fix above breaks when the form is submit more than once.

Contributor

fabriciomurta commented Aug 30, 2017

A different fix than the proposed was implemented. The proposed fix above breaks when the form is submit more than once.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment