Upload binary image file using XMLHttpRequest from CSP page to IRIS for Health

Question

Jenna Poindexter · Mar 26, 2020

Hi-

I am trying to create a simple example of allowing binary (tiff) files to be selected and uploaded asynchronously to an IRIS for Health back-end. I have managed to write the HTML and Javascript which works great with regular text / ascii files, but fails with binary files.

When I upload a binary file (tiff) image I get garbage like this on the database server

^TKEN(5,"data")="MM"_$c(0)_"*"_$c(0,128)_"g ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ

The csp page I am using for the upload is as follows:

<html>

<head>


<script language="cache" method="OnPreHTTP" returntype="%Boolean">

                set ^TKEN=$I(^TKEN)

                quit $$$OK

</script>


<script language="javascript">

function FileLoad(){

        var formData = new FormData();

        var file = document.getElementById("myFile").files[0];

        

        formData.append("fileName", file.name);

        formData.append("fileSize", file.size);

        formData.append("file", file, file.name);


        var xhr = new XMLHttpRequest();


        // Upload data to server

        xhr.open("POST", "cacheFile.csp", true);


        xhr.send(formData);

        

        xhr.onload = function(e) {

            if (this.status == 200) {

                            alert(this.status + ' everything okie dokie');

                // everything is OK

            } else {

                alert(this.status + ' ' + this.statusText);

            }

        };

}

</script>

<!-- Put your page Title here -->

<title>   Medical Record Upload </title>

</head>

<body>

                Select file to upload:

                <input type="file" name="fileToUpload" id="myFile" onchange="javascript:FileLoad();">
</body>
</html>

I think there has to be something I’m missing in the javascript function “FileLoad”, but have no clue what that could be.

Any HTML/Javascript expertise that might be able to point me in the right direction

#CSP #JavaScript #InterSystems IRIS for Health