jellehak/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>Javascript tool to convert BSON binary file into JSON</title>

    <style>
        html, body {
            /* margin: 0; */
            /* padding: 0; */
        }
        .drop {
            padding: 10px;
            display: flex;
            text-align: center;
            border: 1px dashed black;
        }

        .output {
            width: 100%;
        }
    </style>
</head>

<body>

    <div>
        <input class="drop" type="file" onchange="parse(event)" />
        <br>
        <!-- <pre id="jsonoutput"></pre> -->
        <textarea class="output" id="jsonoutput">
        </textarea>
    </div>

    <script type="module">
        import BSON from "https://cdn.jsdelivr.net/npm/bson@4.2.3/dist/bson.browser.esm.js"

        window.parse = function myFunction(event) {

            var reader = new FileReader();
            reader.onload = function (event) {
                // Create array for binary input
                var uintArray = new Uint8Array(event.target.result);

                // Deserialize it
                // var doc_2 = BSON.deserialize(uintArray);
                // https://stackoverflow.com/questions/56585231/how-to-deserialize-dumped-bson-with-arbitrarily-many-documents-in-javascript
                let documents = []
                BSON.deserializeStream(uintArray, 0, 10, documents, 0);

                // Modify HTML content
                document.getElementById("jsonoutput").innerHTML = JSON.stringify(documents, null, 4);
            };

            // Assume that there is only one file and use it
            var file = event.target.files[0];
            reader.readAsArrayBuffer(file);
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Javascript tool to convert BSON binary file into JSON</title>

	<style>
	html, body {
	/* margin: 0; */
	/* padding: 0; */
	}
	.drop {
	padding: 10px;
	display: flex;
	text-align: center;
	border: 1px dashed black;
	}

	.output {
	width: 100%;
	}
	</style>
	</head>

	<body>

	<div>
	<input class="drop" type="file" onchange="parse(event)" />
	<br>
	<!-- <pre id="jsonoutput"></pre> -->
	<textarea class="output" id="jsonoutput">
	</textarea>
	</div>

	<script type="module">
	import BSON from "https://cdn.jsdelivr.net/npm/bson@4.2.3/dist/bson.browser.esm.js"

	window.parse = function myFunction(event) {

	var reader = new FileReader();
	reader.onload = function (event) {
	// Create array for binary input
	var uintArray = new Uint8Array(event.target.result);

	// Deserialize it
	// var doc_2 = BSON.deserialize(uintArray);
	// https://stackoverflow.com/questions/56585231/how-to-deserialize-dumped-bson-with-arbitrarily-many-documents-in-javascript
	let documents = []
	BSON.deserializeStream(uintArray, 0, 10, documents, 0);

	// Modify HTML content
	document.getElementById("jsonoutput").innerHTML = JSON.stringify(documents, null, 4);
	};

	// Assume that there is only one file and use it
	var file = event.target.files[0];
	reader.readAsArrayBuffer(file);
	}
	</script>
	</body>

	</html>