codedust · December 30, 2020 23:14
diff --git a/panva-jose-file-encryption.html b/panva-jose-file-encryption.html
 <!DOCTYPE html>
 <html>
 <head>
  <script type="module">
    import CompactEncrypt from './jose/jwe/compact/encrypt.js'
    import CompactDecrypt from './jose/jwe/compact/decrypt.js'
    import generateKeyPair from './jose/util/generate_key_pair.js'
    import parseJwk from './jose/jwk/parse.js'

    const inputElement = document.getElementById("input");
    inputElement.addEventListener("change", handleFiles, false);
    function handleFiles() {
      console.log(this.files);
      this.files[0].arrayBuffer().then(ui8 => {
        console.log(ui8)
        jwe_test(ui8)
      })
    }

    function showFile(ui8) {
        const reader = new FileReader();
        const preview = document.querySelector('img');
        reader.addEventListener("load", function () {
          // convert image file to base64 string
          preview.src = reader.result;
        }, false);

        reader.readAsDataURL(new Blob([ui8], {type: 'image/png'}));
    }

    async function jwe_test(ui8){
      // generate key pair
      const { publicKey, privateKey } = await generateKeyPair('RSA-OAEP-256')
      console.log(publicKey)
      console.log(privateKey)

      console.log("plaintext", ui8)
      const jwe = await new CompactEncrypt(ui8)
        .setProtectedHeader({ alg: 'RSA-OAEP-256', enc: 'A256GCM' })
        .encrypt(publicKey)

      console.log(jwe)

      // decrypt
      const { plaintext, protectedHeader } = await CompactDecrypt(jwe, privateKey)
      showFile(plaintext)

      console.log("protectedHeader", protectedHeader)
      console.log("decrypted", plaintext)
    }
  </script>
 </head>
 <body>
  <input type="file" id="input" multiple>
  <img src="" height="200" alt="Image preview...">
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="module">
	import CompactEncrypt from './jose/jwe/compact/encrypt.js'
	import CompactDecrypt from './jose/jwe/compact/decrypt.js'
	import generateKeyPair from './jose/util/generate_key_pair.js'
	import parseJwk from './jose/jwk/parse.js'

	const inputElement = document.getElementById("input");
	inputElement.addEventListener("change", handleFiles, false);
	function handleFiles() {
	console.log(this.files);
	this.files[0].arrayBuffer().then(ui8 => {
	console.log(ui8)
	jwe_test(ui8)
	})
	}

	function showFile(ui8) {
	const reader = new FileReader();
	const preview = document.querySelector('img');
	reader.addEventListener("load", function () {
	// convert image file to base64 string
	preview.src = reader.result;
	}, false);

	reader.readAsDataURL(new Blob([ui8], {type: 'image/png'}));
	}

	async function jwe_test(ui8){
	// generate key pair
	const { publicKey, privateKey } = await generateKeyPair('RSA-OAEP-256')
	console.log(publicKey)
	console.log(privateKey)

	console.log("plaintext", ui8)
	const jwe = await new CompactEncrypt(ui8)
	.setProtectedHeader({ alg: 'RSA-OAEP-256', enc: 'A256GCM' })
	.encrypt(publicKey)

	console.log(jwe)

	// decrypt
	const { plaintext, protectedHeader } = await CompactDecrypt(jwe, privateKey)
	showFile(plaintext)

	console.log("protectedHeader", protectedHeader)
	console.log("decrypted", plaintext)
	}
	</script>
	</head>
	<body>
	<input type="file" id="input" multiple>
	<img src="" height="200" alt="Image preview...">
	</body>
	</html>