UploadItem marked as required in a DynamicForm

[Nick Mogielnicki]

1. For uploading files we use a dynamic form, the UploadItem and a ComboBoxItem are both marked as required.
This works just beautifully.

2. However, if I do not select a file to upload, then press submit button, I of course get the field is required error on the UploadItem.

3. I then click the browse button, and select a file to upload.

4. I press the submit button , after the form is validated but before it is submitted, I call a server side datasource to check some data
which is unrelated to the file to upload, but after the call to that datasource, the file name is nulled out in the form.

5. My question is how can I clear the error state of the UploadItem, such that when I do select a file, its value is not lost when the form is submitted?
And further, why is the value of the File selected lost, and how can I work around this while keeping the UploadItem required.

6. This behaviour is not browser dependant, it happens on IE, FF, and Safari.

Looking at the forums I see that UploadItems are a bit touchy.
Any help you could give me would be greatly appreciated.

1. For uploading files we use a dynamic form, the UploadItem and a ComboBoxItem are both marked as required.
This works just beautifully.  There is a custom validator on the UploadItem, in IE you can type into the upload item text box, and we are checking
against certain entries.

2. However, if I do not select a file to upload, then press submit button, I of course get the field is required error on the UploadItem.

3. I then click the browse button, and select a file to upload.

4. I press the submit button , but somewhere prior to the form being submitted the value of the UploadItem is nulled out on me.
I include the code below, see highlights in red, after form is validated but before it is submitted, I call a server side datasource to check some data
which is unrelated to the file to upload, but after the call to the datasource, the file name is nulled out in the form.

5. My question is how can I clear the error state of the UploadItem, such that when I do select a file, its value is not lost when the form is submitted?
And further, why is the value of the File selected lost, and how can I work around this while keeping the UploadItem required.

6. This behaviour is not browser dependant, it happens on IE, FF, and Safari.

Looking at the forums I see that UploadItems are a bit touchy.
Any help you could give me would be greatly appreciated.

Cheers,

Nick Mogielnicki

Here is the pertinent DynamicForm code and related functions:

=================================================================================================================

 var uploadForm = isc.DynamicForm.create({
    name:"uploadForm",
    encoding:"multipart",
    action:"MyFGUpload.do",
    canSubmit:true,
    autoFetchData:false,
    target:"hiddenIframeForUpload",
    show: function () {
        uploadForm.getField("UploadPath").fetchData();
        this.Super("show", arguments);
    },
    fields:[
        {
            name:"UploadPath",
            title:"Upload Path",
            required:true,
            autoFetchData:false,
            _constructor:"ComboBoxItem",
            optionDataSource:upload_DS,
            showOptionsFromDataSource:true
        },
        {
            name:"FileName",
            title:"File",
            required:true,
            _constructor:"UploadItem",
            }]
        },            
        {
            name:"SubmitButton",
            title:"Send",
            _constructor:"Button",
            click:function () {
                sendFile();
            }
        }
    ],
});

 var sendFile = function () { 

    var thisUploadPath = myFgForm.getField("UploadPath").getValue();

     // need this to get Safari 4.0.4 to work
    uploadForm .getItem("FileName").updateValue();  

    // we have the value of the file selected.....
    alert ('sendFile, upload file = ' + uploadForm .getField("FileName").getValue());   

     if (uploadForm.validate()) {

         // we have the value of file selected.....
        alert ('sendFile, form is valid,  file = ' + uploadForm .getField("FileName").getValue());

         // save off the file name so I can re-set it after it gets nulled out mysteriously ?
        var file = myFgForm.getField("FileName").getValue();

        // call server side data source
        uploadMonitored_DS.fetchData({uploadPath:thisUploadPath}, function (dsResponse, data, dsRequest) {

            // AT THIS POINT THE VALUE OF THE FILE NAME IN THE FORM IS NULL!                
            myFgMonitoredUploadFlag.setValue(data.monitored);    

           // NULL IS RETURNED IN THE getValue code
           alert ('sendFile, after uploadMonitored_DS.fetchData call, file = ' + uploadForm.getField("FileName").getValue());

           // TRYING TO RESET THE VALUE OF THE FILE NAME IN THE FORM - DOES NOT WORK!
           uploadForm.getField("FileName").setValue(file);
           uploadForm.getItem("FileName").updateValue();  

           // even after trying to reset the file name in the form, FileName is NULL
           alert ('sendFile, after resetting the file value in the form,  file = ' + uploadForm.getField("FileName").getValue());               

           processMonitoredUpload(value);
        }
        );
    }
}

function processMonitoredUpload(value) {
    if (value) {

        // FileName is NULL
        alert ('processMonitoredUpload, upload file = ' +   uploadForm.getField("FileName").getValue());

        var thisFileName = uploadForm.getField("FileName").getValue();
        var thisUploadPath = uploadForm.getField("UploadPath").getValue();

         fileUploadValidation_DS.fetchData(
            {uploadPath:thisUploadPath, fileName:thisFileName, renameMessage: thisRenameMessage},
                function (dsResponse, data, dsRequest) { processUploadValidataion(dsResponse, data, dsRequest) }
        );
    }
}

function processUploadValidataion(dsReponse, data, dsRequest) {    
     // FileName is NULL - null pointer ensues on the server side
    alert ('processUploadValidataion, upload file = ' + uploadForm.getField("FileName").getValue());
    uploadForm.submit();
    return;
}

[Isomorphic]

Hi Nick,

See the Upload overview in the docs - it indicates you
should use FileItem instead and gives various other context.

[Nick Mogielnicki]

So just replace UploadItem with FileItem in the DynamicForm and that is it?
I will try that straight away.

[Nick Mogielnicki]

need to use the UploadItem

I tried replacing the UploadItem with a FileItem, FileItem does not work on Mosaic 4.0.4 which my application has to support.

But the issue still remains, when a DynamicForm with either a UploadItem or FileItem that is marked as required, when the UploadItem is not present and validation fails, I cannot clear the error state such that when I do select a file to upload the filename is not lost when the form is submitted.

please see my earlier code snippet.

[Isomorphic]

What is "Mosiac 4.0.4"? Is it a browser supported by SmartClient?

What actually happens when you try to use FileItem?

If you read the docs for UploadItem, it explains why you see what you're seeing. The approach it recommends to work around this is the same one that FileItem implements. So let's focus on getting past whatever issue you're having with FileItem.

[Nick Mogielnicki]

I meant Safari

sorry about that.
the issue i had with FileItem, is the same as UploadItem, when the file was not chosen(it is marked as required) and the validator kicked in a redraw was kicked off. i go back and now click on the button and choose a file, but when I go to submit I cannot get its value from the DynamicForm. look at my first post and substitute FileItem for UploadItem.

[Isomorphic]

Your first post is not syntactically valid JavaScript and appears to depend on various other things - we can't run it to reproduce the problems you're reporting.

Returning to the Upload Overview: you want to use a FileItem and call saveData, not submit(). You don't want to target an IFrame, you just implement a normal server-side DataSource operation just like others you have presumably already written.

That whole approach is by far the simplest. But note it is documented as one approach and there is a second approach separately documented for users who do not have the SmartClient Server. You can't just mix elements of the two approaches, each makes sense on it's own.

So we would recommend following the first approach in it's entirety. Probably best to start with new code.

[Nick Mogielnicki]

Point well taken, but for the time being i have a workaround where those items are no longer marked as required in the DynamicForm, On click of submit I validate in my own method and if fields are not present, inform the user via isc.warn(..). Thanks for your help