binhop/static/binhop.js

async function process_upload(file) {
    const formData = new FormData();
    formData.append('file', file);

    const button = document.querySelector('button');
    button.setAttribute('aria-busy', 'true');
    button.textContent = `processing ${file.name}...`;
  
    const response = await fetch('api/upload_file', {
      method: 'POST',
      body: formData,
      timeout: 600000 // 10 minutes
    });
  
    if (response.ok) {
      const data = await response.json();
      const container = document.querySelector('.container');
  
      // visualization
      container.innerHTML = `
<div class="grid">
<div id="blob-column">
<canvas id="blob" width="600px" height="600px" style="background-color: #18232c;"></canvas>
</div>
<div id="info-column">
<small>
<h1>${data.meta.name}</h1>
<details open>
    <summary>blob meta</summary>
    <figure>
        <table role="grid">
            <tr>
                <th><strong>filename:</strong></th>
                <td>${data.meta.name}</td>
            </tr>
            <tr>
                <th><strong>process duration:</strong></th>
                <td>${data.meta.duration}</td>
            </tr>
            <tr>
                <th><strong>size:</strong></th>
                <td>${data.meta.sizeb} (${data.meta.sizeh})</td>
            </tr>
            <tr>
                <th><strong>sha1:</strong></th>
                <td>${data.meta.sha1}</td>
            </tr>
            <tr>
                <th><strong>md5:</strong></th>
                <td>${data.meta.md5}</td>
            </tr>
        </table>
    </figure>
</details>
<article>
    <header>Header</header>
    Body
    <footer>Footer</footer>
</article>
<article>
    <header>Header</header>
    Body
    <footer>Footer</footer>
</article>
<pre>${JSON.stringify(data, null, 2)}</pre>
</small>
</div>
</div>`;
    } else {
      console.error('error uploading file');
    }
  }
  
  function upload_file() {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      process_upload(file);
    });
    fileInput.click();
  }