tests/demos/webserial/index.html

<!doctype html>
<html>
  <head>
    <title>avrgirl test</title>
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|Cabin+Sketch|Fugaz+One|Itim|Sacramento&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  <div class="main">
      <div class="wrapper">
        <div class="bot">
          <h1>Upload-o-matic</h1>
          <p>Choose a program to upload to an arduino</p>

          <form id="uploadForm"> 
            <label>Board:
              <select id="boardType">
                <option value="uno">Uno</option>
                <option value="mega">Mega</option>
              </select>
            </label>

            <label>Program:
              <div class="fileButtonWrapper">
                <button id="fileButton" type="button" aria-controls="fileInput">Choose file</button>
                <input id="fileInput" tabindex="-1" type="file"/>
                <span id="fileName">no file chosen</span>
              </div>
            </label>

            <button type="submit" id="uploadBtn">Upload!</button>
          </form>
        </div>
        <div class="board">
          <img src="images/ArduinoUno.svg"/>
        </div>
        <div id="pipe"></div>
        <div id="progress"></div>
        <div id="gear"><img src="images/gear4.svg"/></div>
      </div>
    </div>
    <script src="/js/avrgirl-arduino.global.js" charset="UTF-8"></script>
    <script>
      function handleSubmit(e) {
        e.preventDefault();

				let filecontents;
        const file = fileInput.files[0];
        const reader = new FileReader();
        const board = boardType.value;

        reader.onload = function(event) {
          filecontents = event.target.result;

					let avrgirl = new AvrgirlArduino({
						board: board,
						debug: true
					});
          
          gear.classList.add('spinning');

          avrgirl.flash(filecontents, (error) =>  {
            gear.classList.remove('spinning');
            progress.textContent = "done!";
						if (error) {
							console.error(error);
						} else {
							console.info('done correctly.');
						}
					});

       };
        reader.readAsArrayBuffer(file);
      }

      const uploadForm = document.getElementById('uploadForm');
      const fileInput = document.getElementById('fileInput');
      const fileButton = document.getElementById('fileButton');
      const fileName = document.getElementById('fileName');
      const boardType = document.getElementById('boardType');
      const uploadBtn = document.getElementById('uploadBtn');
      const log = document.getElementById('log');
      const progress = document.getElementById('progress');
      const gear = document.getElementById('gear');

      uploadForm.addEventListener('submit', handleSubmit, false);
      fileButton.addEventListener('click', () => fileInput.click());
      fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (file) fileName.textContent = file.name;
      });
    </script>
  </body>
</html>