<a href="https://www.googleapis.com/auth/drive" class="button button-primary">Authorize Drive API</a>
<button type="submit" class="button button-success">Upload File</button>
<hr>
<div class="row">
    <div class="col-md-6">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title" class="form-control">
    </div>
    <div class="col-md-6">
        <label for="description">Description:</label>
        <textarea id="description" name="description" rows="5" cols="30"></textarea>
    </div>
</div>
<br>
<h4>Select file to upload:</h4>
<input type="file" id="file_to_upload" name="file_to_upload">
<hr>

<script>
function handleFileUpload() {
  const input = document.getElementById('file_to_upload');
  const reader = new FileReader();
  reader.onloadend = function (e) {
    if (this.status === 0 && e.target.files[0]) {
      upload(reader, e.target.files[0]);
    }
  }
  input.addEventListener('change', handleFileUpload);
}

function upload(reader, file) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.setRequestHeader('Content-Type', file.type);
  xhr.onload = function () {
    if (xhr.status === 200) {
      alert(xhr.responseText);
    } else {
      console.log(xhr.status, xhr.statusText);
    }
  };
  reader.readAsBinaryString(file);
}
</script>