Results 1 to 10 of 10

Thread: File upload works in IE 11, but not Firefox or Chrome

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353

    Exclamation File upload works in IE 11, but not Firefox or Chrome

    I have a sneaking suspicion that the file upload in Ext JS 5.0.1 may be broken, at least in Firefox 33.1 and Chrome 38.0.2125.122 m on Windows 8.1.

    Neither Chrome nor Firefox let you spy on a form upload POST but capturing traffic in IE 11 shows the request body, but what's more important, my web service actually receives the file (which is all that matters!).

    I initially thought my "old" method of receiving an upload might have been broken with a change from .NET 4.0 to 4.5, but using IE 11 to upload to my "old" service method works just fine with Ext JS 5.0.1.

    It's only Chrome and Firefox which are broken. Maybe they are both disallowing the secret funny business that goes on behind the scenes when Ext JS tries to work with the hidden IFRAME? Or perhaps there is a bona fide bug here.

    Don't even think of asking me to create a Fiddle for this. I'm just going to tell my users to use IE to upload files for now.

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250

    Default

    What do you mean by broken? The file doesn't get sent at all? Is corrupted somehow? Unable to read the response? I'm not able to reproduce it using the KS, see: http://dev.sencha.com/ext/5.0.1/exam...rm-fileuploads

    The 3rd panel actually uploads to the server using a PHP script. I just uploaded a test image (alt.png) and I got the following response from the server (attached).

    Tested in Chrome 38.0.xxxxx.
    Attached Images Attached Images
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353

    Default

    It seems strange that code I've been using for 3 years on the server side suddenly would decide to receive files sent from Ext JS 5.0.1 in IE 11 only, and ignore Chrome and Firefox.

    I'm not ruling out some strange bug of my own creation here, but I would have expected my server code never to work from all browsers, or always to work with all browsers.

    I will have to keep plodding on with the IE-only support for now because I've spent far too much time troubleshooting this already. Perhaps it is only a .NET bug, but if it is, God knows how long it'll take to find the pesky thing.

  4. #4
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353

    Default

    I'm still suspicious of something going wrong at the browser end. If I look at some Ext JS 4.2.3 code and watch the data being sent in Chrome Developer Tools, I see this (among other form fields) for a file upload:


    Code:
    ------WebKitFormBoundaryI9YJonKW5C7MhAGB 
    Content-Disposition: form-data; name="file_path"; filename="Dr Bunsen Honeydew.jpg" 
    Content-Type: image/jpeg 
    
    
    
    
    ------WebKitFormBoundaryI9YJonKW5C7MhAGB--

    Whereas in Ext JS 5.0.1 in Chrome Developer Tools I only see this single line in the "Request Payload" section:


    Code:
    ------WebKitFormBoundaryjcfodABIBRQEcj6n--

    The Content-Length further up in the Developer Tools is only 44 for the one that won't work. My old code's content length is a more healthy 5078 (the JPG file I used to test this is 4,314 bytes).


    It's no wonder my web service thinks there's no data from Chrome/Firefox, it's because even Chrome (in this example) thinks it's sending nothing to the server. Here is my code to do the submission:

    Code:
    var me = this;
    var form = me.down('form').getForm();
    
    
    if (form.isValid()) {
        form.submit({
            url: '../Service/Uploads/',
            waitMsg: 'Uploading your file...',
            success: function (frm, action) {
                // snipped
            }
        });
    }
    Attached Images Attached Images

  5. #5
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353

    Default

    I was able to upload a file successfully from the Kitchen Sink demo using Chrome. Very weird. I can't see any difference between my form submit and yours (I'm not using a ViewController, though, not that it should matter... a form is a form, I would have thought).

    I'll have to go over it with a fine tooth comb and see what's going on.

  6. #6
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353

    Default

    I found the problem - and it was all my fault! I forgot to give my fileupload field an actual name! Silly me. Sorry for the confusion. Perhaps this tale of woe may help somebody in the future who happens to make this silly mistake.

  7. #7
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353

    Default

    I have found some more information that may be useful to somebody else one day. I checked uploads again in IE (now that I'm using my "new" method, which is a c# .NET WCF service rather than a plain Upload.aspx file) and found that Ext JS couldn't decode the response (which was definitely valid!).

    The solution is to add this before returning the response to the user to change the content-type header to text/html (it was application/json before):

    Code:
    WebOperationContext.Current.OutgoingResponse.ContentType = "text/html";
    The content-type already was text/html with my Upload.aspx, but not with my "new" service method. Crisis averted (albeit with some hair loss)!

    BTW, Chrome and Firefox were perfectly happy with an application/json content-type response header, it was just IE that was the fuss pot about text/html.

  8. #8
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  9. #9
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353

    Default

    Quote Originally Posted by evant View Post
    Thanks. I've never thought that section worth reading before (I assumed it would be a simple "return true or false" if it has an upload, so I never clicked on it to read it). I've gone with text/plain now, and it works fine

  10. #10
    Sencha Premium Member
    Join Date
    Jan 2015
    Location
    Phoenix,AZ USA
    Posts
    4

    Default

    Quote Originally Posted by marc.fearby View Post
    I found the problem - and it was all my fault! I forgot to give my fileupload field an actual name! Silly me. Sorry for the confusion. Perhaps this tale of woe may help somebody in the future who happens to make this silly mistake.
    It helped me today with some old code that used to work, perhaps it wasn't required in ext4. Thanks!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •