<html>
<head>
<title>Beacon Sample: Attach Note With File</title>
    <script>
        var maxFileSize = 5000000;

        // This reads the file from the "file" input. If there is a file read, form fields are filled out.
        function readFile(event) {
            var fileElement = document.getElementById("file");

            if (fileElement.files && fileElement.files.length > 0) {
                var f = fileElement.files[0];
                // Validate File Size
                if (f.size > maxFileSize) {
                    alert('Error: File size (' + f.size + ') exceeds max file size (' + maxFileSize + ').');
                } else {
                    var FR = new FileReader();
                    FR.onload = function (e) {
                        document.getElementById("mimetype").value = f.type;
                        document.getElementById("FileName").value = f.name;
                        document.getElementById("documentbody").value = e.target.result.split(',')[1];
                        document.getElementById("isencoded").value = "true";
                    };
                    FR.readAsDataURL(fileElement.files[0]);
                }
            }
        }

        // Window Onload Events
        function startFunction() {
            var fileElement = document.getElementById("file");
            if (fileElement.addEventListener) {
                fileElement.addEventListener("change", readFile, false);
            } else if (fileElement.attachEvent) {
                fileElement.attachEvent("onchange", readFile);
            }
        }
        window.onload = startFunction;
    </script>
</head>
    <body>
        <br />
            File
            <input type="file" name="file" id="file" />
        <form action="https://data.peak15systems.com/beacon/service.svc/insert/entity/annotation"
              method="post"  enctype="application/x-www-form-urlencoded">
            <input type="hidden" value="" name="documentbody" id="documentbody" />
            <br/>
            Is Encoded
            <input type="text" name="isencoded" id="isencoded" value="false" />
            <br/>
            Token
            <input type="text" name="token" />
            <br />
            Object Id
            <input type="text" name="objectid" maxlength="50" />
            <br />
            Subject
            <input type="text" name="subject" maxlength="50" />
            <br />
            Note Text
            <input type="text" name="notetext" maxlength="50" />
            <br />
            Object Type Code
            <input type="text" name="objecttypecode" maxlength="50" value="contact"/>
            <br />
            Mime Type
            <input type="text" name="mimetype" id="mimetype" maxlength="50" />
            <br />
            File Name
            <input type="text" name="FileName" id="FileName" maxlength="50" />
            <br />
            <input type="submit" value="Submit" />
            <input type="button" id="clear" value ="Clear" />
        </form>
    </body>
</html>