How to determine the size of a file to be uploaded on the client?

[crisley]

v9.1p_2015-09-16/Pro Development


When using a DynamicForm with a FileItem how does one obtain the size of the selected file before starting the uploading to the server?

---

<DataSource
  ID="fileUploadDataSource"
  serverConstructor="smartclient.ds.UploadFileDataSource">
  <fields>
    <field name="id" type="sequence" title="ID" primaryKey="true"/>
    <!-- max size is 10MB = 10485760 bytes -->
    <field name="file" type="binary" title="File" maxFileSize="10485760"/>
  </fields>
</DataSource>

fileUploadForm = isc.DynamicForm.create({
  ID: "fileUploadForm",
  dataSource: "fileUploadDataSource",
  encoding: "multipart",
  fields: [{
    name: "file",
    type: "FileItem",
    dataSource: "fileUploadDataSource",
    title: "uploadFileLabel"),
    width: 450,
    required: true,
    multiple: false,
    }, {
    title: "uploadFileButton",
    type: "button",
    click: function () {

      // Code to get file size and stop upload if size is 0 or too large.

      fileUploadForm.saveData(function(dsResponse, data, dsRequest) {
         // code for callback
      }, {willHandleError: true, showPrompt: true});
    }
  }
  ]
});

[Isomorphic]

In 5.1, validation of the file size is performed on the client-side in every browser where this is possible, as an automatic result of the maxFileSize declaration, so there would be no need to implement what you're attempting.

As far as 4.1, we don't have an API to provide the file size to you - you would have to look directly at the DOM (which is considered internals and subject to change).

[crisley]

My question comes as a result of the following:

If I choose a file which is an invalid symbolic link, the upload operation does not detect that the file is invalid and I only get an error dialog after a few minutes (which I suspect is the timeout). The error message is: "Operation timed out.". I was hoping that I could check the file size, and if it was zero do not call the saveData() function.


This can be reproduced using the SmartClient Upload example:

http://www.smartclient.com/docs/9.1/....html#FSupload

[Isomorphic]

It looks like you're trying out an example embedded in the docs, which is not actually hooked up to a valid upload target. The example in the Feature Explorer seems to be working fine. If this doesn't seem to be the case for you, try emailing the exact file you're using to support@isomorphic.com.

[crisley]

To reproduce (on linux):

> touch test.txt
> ln -sf test.txt link_test.txt
> rm test.txt

The file link_test.txt is still there, but in the Upload example, when you choose the file 'link_test.txt' and press 'Save', the example hangs until it times out.

Applications like Gmail, detect the problem immediately.

[crisley]

I performed the above steps on the Upload example in the Feature Explorer and got the same results, "Operation timed out"

[Isomorphic]

We just tried this here and it worked as expected. Are you able to reproduce this on more than one machine?

[crisley]

I tried the link you posted, and I get the "Operation timed out warning".

I am on Red Hat Linux (6.7) and tried it using Firefox (38.3.0) and Chrome (47.0.2526.73).

The error happens on all of our development machines (Red Hat)

[Isomorphic]

We suspect you've got either a firewall/security filter problem, or some kind of issue with how your browser and OS are working together to handle symlinks.

Please first try a zero-length file that is not a symlink.

If that's still not working, please try any other OS, and accessing from a different network.

[crisley]

A zero byte is uploaded immediately with no errors. The problem is not with network/firewall since I get the same behavior when I run my file upload code on my local machine (client and server).

[Isomorphic]

That eliminates a firewall, but not really the network config per se. Let us know when you've checked out the other possibilities we raised as well.