Error message for maxFileSize validator not showing

[SimonF]

Hi there,
we noticed that the error message of a maxFileSize validator in an upload item is not showing. When selecting a file larger than maxFileSize, you can see the upload item flicker as it briefly shows the error which is then immediately cleared. Without the error message, the user has no idea why his file is rejected.

See here:


Reproducable with the latest SmartClient version (SmartClient_v110p_2017-03-21_Pro) and all current browsers.


Code for reproduction:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 800,
    titleOrientation: "left",
    encoding: "multipart",
    fields: [
        {
        name: "file",
        type: "upload",
        colSpan: "*",
        multiple: false,
        title: "files up to 10 MB",
        validateOnChange: true,
        validators : [{
           type: "maxFileSize",
           maxFileSize: 10485760,
           errorMessage: "Maximum file size is 10 MB"
         }]
        }
    ]
});

Regards

[Isomorphic]

The problem here is that you are using type: "upload", which means you end up with an UploadItem in your form. UploadItems have a lot of constraints on what you can do with them, because a form redraw causes the item's value to be lost. As the UploadItem docs point out, one of the things that causes a form redraw is a failing validation, so it is invalid usage to apply a validator to an UploadItem. We have now updated the docs to explicitly state this.

Instead, use a FileItem, as the docs recommend. This will happen automatically if you use type: "binary" instead of type: "upload"

[SimonF]

Thanks for your reply.
We tried file upload via a fileItem, but ran into some Issues with that, too: The DynamicForm's data source does not call its transformResponse function upon a response. We illustrated that in an example at http://jsfiddle.net/w3n6a6Ld/8/. When uploading a file, you can see in the console that a response is given, but the console.log() in transformResponse is not output:
If there is any questions about the problem please do not hesitate to ask.
Kind regards

[Isomorphic]

We're not seeing any problem with DataSource.transformResponse() - it fires properly when overridden in samples such as:
http://www.smartclient.com/smartclie....html#FSupload or
http://www.smartclient.com/smartclie...tomBinaryField

The issue you describe seems to be coming from jsfiddle and the behavior of requests sent to jsfiddle's special URL "/echo/js/" - our comm layer is not receiving that response.

Can you provide a stand-alone repro case as described in our debugging help topic?

[SimonF]

Even using another source than the echo-service it seems that the transformResponse is not being called:
See this link: http://jsfiddle.net/w3n6a6Ld/10/
You are right, that the given example can be modified with the code below, and then the transformRequest and transformResponse are fired.
Sadly we are having in our development the same issue as in the jsfiddle example. What makes me wonder is, that you can see the response of the Url in the browsers console. So why does the request is not executed and transformed in the example? Do you can give us any hints?

datasourceVariable.transformRequest = function(dataSourceRequest){
    console.log("transformRequest called");
    return dataSourceRequest;
};
datasourceVariable.transformResponse = function(dataSourceResponse, dataSourceRequest, jsonData){
    console.log("transformResponse called")
};

isc.DynamicForm.create({
    autoDraw: false,
    ID: "uploadForm", width: 300,
    dataSource: datasourceVariable,
    fields: [
        { name: "title", required: true },
        { name: "image", type: "imageFile", hint: "Maximum file size is 5 MiB" },
        { title: "Save", type: "button", 
            click: function () {
                this.form.saveData("if(dsResponse.status>=0) uploadForm.editNewRecord()");
            }
        }
    ]
});

Kind regards

[Isomorphic]

It looks like you are trying to send some kind of JSON response. File upload works via hidden frame comm, so your response is totally wrong. Take a look at what the server is sending as a response in the working sample.

[SimonF]

Thank you very much; your response really helped us make progress.
We tried to stay close to the upload example (http://www.smartclient.com/smartclie...er.html#upload) and our upload is working now. We always get the following error though:

*MUP6:WARN:DataSource:isc_DataSource_0:Error evaluating JSON: TypeError: evalText.match is not a function, JSON text: [object Object]



In the small example seen in the gif, this has no further consequences, but in our real application an error window is shown saying "Error: server returned invalid JSON response". Adding some debug output, we verified that the evalText in the call of _handleJSONTextReply is not a json text but a JS Object. Can you tell us what is wrong with our repsonse, or what settings for the data source we might be missing?

Our response of the DynamicForm data source:

<HTML>
<BODY ONLOAD='var results = document.formResults.results.value;if (!(new RegExp("^(\\d{1,3}\\.){3}\\d{1,3}$").test(document.domain))) {while (!window.isc && document.domain.indexOf(".") != -1 ) { try { parent.isc; break;} catch (e) {document.domain = document.domain.replace(/.*?\./, "");}}}parent.isc.Comm.hiddenFrameReply(1 , results)'>
<FORM name='formResults'><TEXTAREA readonly name='results'>
//isc_RPCResponseStart-->[{ "viewNumber":49, "isDSResponse":true, "affectedRows":1, "queueStatus":0, "javaSciptData":"finishButton_49.enable();isc.clearPrompt();", "invalidateCache":false, "status":0, "operationType":"add", "data": [  {   "pk":2,   "image_date_created":new Date (2017,2,28),   "image_filesize":100,   "image_filename":"8.jpg"  } ]}]//isc_RPCResponseEnd</TEXTAREA></FORM>
</BODY></HTML>

Response from the upload example for comparison:

<HTML>
<BODY ONLOAD='var results = document.formResults.results.value;if (!(new RegExp("^(\\d{1,3}\\.){3}\\d{1,3}$").test(document.domain))) {while (!window.isc && document.domain.indexOf(".") != -1 ) { try { parent.isc; break;} catch (e) {document.domain = document.domain.replace(/.*?\./, "");}}}parent.isc.Comm.hiddenFrameReply(6,results)'><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><FORM name='formResults'><TEXTAREA readonly name='results'>
//isc_RPCResponseStart-->[{affectedRows:1,data:[{image_filename:"8.jpg",pk:4,image_filesize:3144,title:"56356",image_date_created:new Date(1490708695000)}],invalidateCache:false,isDSResponse:true,operationType:"add",queueStatus:0,status:0}]//isc_RPCResponseEnd</TEXTAREA></FORM>
</BODY></HTML>

Kind regards

[Isomorphic]

If you are not using our server, at this point you are trying to replicate the internal hiddenFrame protocol, which is not a documented or supported protocol.

A couple of options:

1. you could go back to UploadItem, but use it as documented: it can't support validators, but you can build your own display for validators, as covered in the Upload Overview

2. sponsor the work to switch over to the new HTML5 File APIs for upload, so upload can go through xmlHttpRequest, and no longer requires a complex frame-based approach. This would drop support for older IE (which is why we haven't added this to the framework yet), but that may not be a problem for you