[CLOSED] File upload fails on form.submit

  1. #1

    [CLOSED] File upload fails on form.submit

    Hi Fabricio,

    I am now upgrading another project in the same solution as the previous one, this time from 4.2 -> 5.

    We have a form we're using for file uploads, with this call:
     onUpload: function (button, e, options) {
            debugger;
            var form = this.lookup('upload-form').getForm();
    
    
    
            if (form.isValid()) {
    
                var vm = this.getViewModel();
                var store = vm.get('attachmentStore');
    
                var record = store.findRecord('docType', form.getFieldValues().documentType);
                if (record && !record.get('checkedOutBy') && record.get("documentId") > 0
                    && (form.getFieldValues().documentType != "N/A")) {
                    Ext.Msg.confirm('Confirm', 'Are you sure you want to remove previous file ?', function (choice) {
                        if (choice === 'yes') {
                            form.submit({
                                clientValidation: true,
                                url: '../../api/files/upload',
                                headers: { 'app': 'tlt' },
                                method: 'POST',
                                scope: this,
                                success: 'onSaveSuccess',
                                failure: 'onSaveFailure'
                            });
                        }
                    }, this);
                }
                else if (record && record.get('checkedOutBy')) {
                    Ext.Msg.alert('Alert', 'The previous version is checked out by ' + record.get('checkedOutBy')
                        + ' You cannot upload another file for this Document Type');
                    return;
                }
                else {
                    form.submit({
                        clientValidation: true,
                        url: '../../api/files/upload',
                        method: 'POST',
                        scope: this,
                        success: 'onSaveSuccess',
                        failure: 'onSaveFailure'
                    });
                }
    
            }
    
    
    
        },
    vm, store, and record all grab the proper values. The "record" is to grab any existing files and ask the user if the want to replace them, so we're only interested in the third option, the "else."

    It reaches this file:

    Click image for larger version. 

Name:	Ext file.png 
Views:	3 
Size:	18.1 KB 
ID:	25371

    But errors out at this line:

    Click image for larger version. 

Name:	ext error.png 
Views:	4 
Size:	45.4 KB 
ID:	25372

    I am going to assume that the ext.axd file is well vetted and bullet-proof, so there must be something wrong with the form being submitted. I just don't know where to look. Somehow the "key" is not allowed to null or undefined, yet it is.

    I will supply more info a bit later.

    Thanks, Bob Graham
    Last edited by fabricio.murta; Jun 26, 2020 at 11:32 PM.
  2. #2
    Hello Bob!

    The first screenshot you shared, can you share its URL? The part after ext.axd?, at least.

    We have an automated process that updates the header version in those files, so they should be reading as 5.2.0, and copyright ending at 2020. This one from your screenshot looks very odd.

    Although 5.0.0 didn't actually have a 'hotfix' release (like 5.0.1) which would prompt for immediate replacement, it has been superseded by two (minor) versions by now.

    My initial suspicion is that this issue might have affected the code: #1605 - Stop forcing Ext.USE_NATIVE_JSON as false (use Ext JS default). i.e.: at some point serialization or deserialization is not working as intended and should be adapted to the new "native json" adopted by Ext JS. Thus Ext.NET sees uninitialized members down the path.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I'm not sure what you mean by url, here is a screenshot of what I see when I hover over the tab in the sources panel:

    Click image for larger version. 

Name:	ext.axd url.png 
Views:	3 
Size:	10.2 KB 
ID:	25373

    Are you suggesting we upgrade the project to 5.2?

    If this is relatively painless I can do it. I assume our license includes all dot upgrades?

    Thanks, hope to hear back from you.

    Bob Graham
  4. #4
    After upgrading to EXT.Net 5.2, I am still getting the same error at the overrriden Ext.data.request.Form upload function:

    Click image for larger version. 

Name:	ext error after 5.2 upgrade.png 
Views:	4 
Size:	95.2 KB 
ID:	25374

    I was previously thinking that the error was at function(key), with key being null or undefined, but now I am seeing that options.headers is "undefined."

    Any help appreciated!

    I am trying to get the code to debug at the same point in our 4.2 version, which works properly.

    Thanks,
  5. #5
    Hello again, Bob!

    Quote Originally Posted by rgraham
    Are you suggesting we upgrade the project to 5.2?
    Yes, definitely.

    Quote Originally Posted by rgraham
    If this is relatively painless I can do it. I assume our license includes all dot upgrades?
    Yes for this one, too. In fact, your license enables you also to use the upcoming Ext.NET 7 (but it is meant to work only under ASP.NET Core and won't be a drop-in replacement).

    Quote Originally Posted by rgraham
    After upgrading to EXT.Net 5.2, I am still getting the same error at the overrriden Ext.data.request.Form upload function
    That was expected as there weren't any specific fixes to that part of the program, but no matter what, if you don't upgrade it just makes it harder to check the issue (and other issues) and get to a solution.

    Quote Originally Posted by rgraham
    I was previously thinking that the error was at function(key), with key being null or undefined, but now I am seeing that options.headers is "undefined."
    And adding a line like headers: {} to the submit parameters list didn't work for you? This may be triggering because you are calling the forms' submit() method and passing the options argument manually. In other words, you are going outside Ext.NET's "comfort zone" to perform the upload.

    It looks like if you simply upgraded Ext.NET from 4.2 to latest 4.x would be sufficient to reproduce the same issue; this is just a breaking change we can't foresee, by the "low level" nature of how your project performs form submission.

    I believe that adding the empty headers object should do, and probably would be a good idea to fix the issue in Ext.NET if we could reproduce the issue at our side (the old "test case" story). If you can get us something like that, we'd probably turn this thread into an issue to fix this for upcoming releases of Ext.NET.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hi Fabricio,

    After much test and search yesterday, I did add "headers: {}" to the form.submit() function, and this solved the problem.

    You may mark this as resolved, thank you.

    While we're wrapping up, you say that we're supplying the options manually, could you elaborate on that? How ought we do it that is in Ext's "Comfort zone?"

    Thanks for your help!

    Bob Graham
  7. #7
    Hello Bob! We are thrilled that the workaround worked for you!

    Quote Originally Posted by rgraham
    While we're wrapping up, you say that we're supplying the options manually, could you elaborate on that? How ought we do it that is in Ext's "Comfort zone?"
    That is said in belief that, for the needs your project has, you needed to pass custom options to the submission, instead of letting Ext.NET handle that. The "comfort zone" is when you rely on Ext.NET to do the "backstage works" for you. Ext.NET should handle everything flawlessly; but it may lack in the aspect that it cannot cover all situations.

    I cannot advise on how you could rely on Ext.NET to submit your form with the context given, although with what you provided I believe there may be ways in performing the upload without the need to pass those options object to the form.submit() call.

    If you are willing to take your chances in the possibility to adequate your example to fit Ext.NET's "comfort zone" -- so it won't be likely to break on further releases --, I am afraid to repeat myself with that old "test case" speech. It must be taken into account also the chance this is Ext.NET who needs a fix for that scenario.

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

Similar Threads

  1. Replies: 4
    Last Post: Jan 13, 2015, 8:21 AM
  2. File upload field form redirect to another razor
    By chinninani in forum 2.x Help
    Replies: 2
    Last Post: Jun 27, 2013, 9:12 AM
  3. [CLOSED] Multiple file support to upload in file upload control
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 01, 2013, 9:41 AM
  4. Replies: 1
    Last Post: Jun 23, 2011, 9:37 AM
  5. [CLOSED] Submit gridpanel data in form submit
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 14, 2010, 7:25 PM

Posting Permissions