Search code examples
javascriptxpages

Get filesize of file selected xp:fileUpload in CSJS

I would like to check the size of the file selected in an xp:fileupload control in CSJS so I can prevent it being submitted (and possible fail due to limitations set on a server)

Is this possible?

I find this specification but I am not sure how to use it: https://www.openntf.org/xspext/xpages%20extension%20library%20documentation.nsf/xpages-doc/xp_fileUpload.html#prop_size

Solution

  • There's nothing the xp control can do unless some sort of JS client side functionality has been developed having that in mind.

    Of course, the JSF framework can check on the file size only when it's too late, read when it's already been uploaded to the server in its entirety. However I don't discard this possibility since it can still be useful in a fallback scenario.

    On the client side of things your option is to use FileReader (compatibility). You can define a function along these lines:

    function checkFileSize(inputFile) {
    if (!FileReader) return;

    var file = inputFile.files[0];

    if (file && file.size > Number(inputFile.dataset.limit)) {
        inputFile.value = '';
        alert(inputFile.dataset.error);
    }
}

    The fileUpload (the example is set to work with the onchange, and a limit of 1 MB):

    <xp:fileUpload id="uploadFile" onchange="checkFileSize(event.target)">
    <xp:this.attrs>
        <xp:attr name="data-limit" value="1000000" />
        <xp:attr name="data-error" value="The file exceeds 1MB" />
    </xp:this.attrs>
</xp:fileUpload>