Upload binary image file using XMLHttpRequest from CSP page to IRIS for Health
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
Is this missing part of OnPreHTTP?
No. There is another page that is the target of the HTTPRequest POST which takes the file data passed in request and stores the file into the database. Problem is that the binary files aren't received properly
Hi Jenna,
my personal experience with binary over HTTP is painful.
I'd suggest using Base64-Encoding (which means ASCII readable Characters only)
The downside is you have to decode it at the receiver side.
But that way it should be foolproof over across all proxy-, web- and other servers in between.
HTTP was invented when there was EBCDIC for 8 bit and ASCII for 7 bit. And some transport software hasn't improved since.
Instead of using
FormData
, I'd try using aBlob
with MIME type image/tiff. Some references:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data
I think I may have it. Basically I. Base64.encoding the file on the client side and will need to decide it on the server.
I need to do a little more testing and debugging in the morning and will post the solution.