EXTJS Fileupload - Problem with IE8 security bar

Question

I'm trying to make an EXTJS application to send email with an attachment. So I have a very basic form that include textfield for the subject, another textfield with inputType: 'file' for the attachment, and an html editor.

var panel = new Ext.form.FormPanel({
    fileUpload:true,
    labelAlign: 'right',        
    monitorValid: true,
    border: false,
    bodyBorder: false,       
    defaults:{
        anchor: '100%',
        labelStyle: 'font-weight:bold;'
    },
    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'SUBJECT',
            name: 'subject',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            fieldLabel: 'ATTACHMENT',
            name: 'file_to_upload',
            anchor: '80%',
            itemCls: 'attachment-field',
            allowBlank: true,
            inputType:'file'
        },
        {
            xtype: 'htmleditor',
            fieldLabel:'MESSAGE',
            name:'msg'
        }
    ]
});

And this form is placed in a window which will submit to the server:

var window = new Ext.Window({
    title: 'Compose a message',
    height: 600,
    width: 800,
    autoScroll: true,
    border: false,
    bodyBorder: false,        
    items: panel,
    buttons:[
        {
            text: 'Send',
            formBind: true,
            handler: function() {
                panel.getForm().submit({
                    url: *Call to the server*,
                    method  : 'POST',
                    timeout: 300000, // 5min
                    waitMsg: 'Please wait while we send your email',                        
                    success :function(form, action) {
                        window.close();
                    }                                                
                });
            }
        },
        {
            text: 'Close',
            handler: function() {
                window.close();
            }
        }
    ]
});

And everything works great when I submit the form to the server using FF. But a problem occurs with IE8. IE is showing the security bar saying that I'm trying to download a file to the computer, which is exactly reverse of what I'm doing ( I'm uploading a file)!

How can I prevent triggering this security bar?

--EDIT December 18th, 2010 16:48 EST-- Is it possible that it can be caused by this: (comming from the EXTJS basicForm documentation)

File uploads are not performed using normal 'Ajax' techniques, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM element temporarily modified to have its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered. The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body. Characters which are significant to an HTML parser must be sent as HTML entities, so encode "<" as "<", "&" as "&" etc. The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a responseText property in order to conform to the requirements of event handlers and callbacks. Be aware that file upload packets are sent with the content type multipart/form and some server technologies (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.

I don't think I understand everything about there explanation...

-- END EDIT --

Thanks Alain

score 6 · Answer 1 · answered Dec 18 '10 at 21:53

6

On the server side, you MUST do the following, even though it looks a bit odd:

set the response type to "text/html"
send {"success": true} as JSON object

the response type makes the browser render the response in the iframe ExtJS uses ExtJS reads that from the DOM, and interprets it as JSON, looking for the success field.

answered Dec 18 '10 at 21:53

Erich Kitzmueller

34,314
6
72
98

Thanks, but this is exactly what I'm doing. I re-verified and my server produce: @Produces(value = {"application/json", "text/html"}) and I'm returning a hashmap with "succes":true. The odd thing is that it work perfectly in FF... – Alain Dec 18 '10 at 22:11
what if you take out the "application/json" thing? – Erich Kitzmueller Dec 19 '10 at 08:59
1

I put a vote to your answer because it solve a part of the problem. It make a real difference if the application/json is not there. IE is not poping the security message anymore. – Alain Feb 15 '11 at 05:48
I don't completely understand the nature of this workaround, but it works for me in IE8. – BillyTom Jan 14 '14 at 15:33
Thanks worked for me, I am using Ext 5 , I dont understand why this bug is not yet fixed. – Ameya Dec 02 '14 at 06:11

score 2 · Accepted Answer · edited Jan 18 '11 at 12:14

2

This is what Ext writes to the document.

<iframe id="ext-gen170" name="ext-gen170" class="x-hidden" src="about:blank"><html><head></head><body></body></html></iframe>

This problem can be resolve by setting a valid https src path e.g. https://yousite.com/blank.html

I haven't found yet how to modify the src. Any help would be welcome

edited Jan 18 '11 at 12:14

sth

200,334
49
262
354

answered Jan 18 '11 at 11:45

Rajiv

56
1
3

setting src does not work but it worked by setting the response content type to text\html – Ameya Dec 02 '14 at 06:12

score 1 · Answer 3 · answered Jan 30 '11 at 19:15

I believe ExtJs is doing this:

    if(Ext.isIE) {
        frame.src = Ext.SSL_SECURE_URL;
    }

Where that string is defined as:

    /**
     * URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
     * the IE insecure content warning (<tt>'about:blank'</tt>, except for IE in secure mode, which is <tt>'javascript:""'</tt>).
     * @type String
     */
    SSL_SECURE_URL : isSecure && isIE ? 'javascript:""' : 'about:blank',

...and isSecure is:

    isSecure = /^https/i.test(window.location.protocol);

So that's where your about:blank is coming from. If that doesn't work, it sounds like you need to set that URL to something that works for you (or maybe the value of isSecure is acting up).

score 0 · Answer 4 · answered Feb 13 '11 at 06:33

following your suggestions and many test, here is what I did. I just assign the SSL_SECURE_URL constants right after I included the extall library to a blank image on my https application.

Ext.SSL_SECURE_URL = 'https://mysite.com/blank.gif';

No problem anymore.

Thanks a lot.

EXTJS Fileupload - Problem with IE8 security bar

4 Answers4

Linked