index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>File Upload with Progress</title>
  </head>
  <body>
    <h1>Upload a CSV File</h1>
    <input type="file" id="fileInput" />
    <button onclick="uploadFile()">Upload</button>
    <br /><br />
    <div>Upload Progress: <span id="progress">0</span>%</div>
    <pre id="output"></pre>

    <script>
      // Function to upload the file
      async function uploadFile() {
        const fileInput = document.getElementById('fileInput')
        const file = fileInput.files[0]

        if (!file) {
          alert('Please select a file.')
          return
        }

        const formData = new FormData()
        formData.append('file', file)

        // Send the file to the server
        try {
          const response = await fetch('/upload', {
            method: 'POST',
            body: formData,
          })

          const reader = response.body.getReader()
          const decoder = new TextDecoder()

          while (true) {
            const { done, value } = await reader.read()
            if (done) break

            const text = decoder.decode(value)
            const progressMatch = text.match(/Progress: (\d+)%/)
            if (progressMatch) {
              document.getElementById('progress').textContent = progressMatch[1]
            }
            document.getElementById('output').textContent += text
          }
        } catch (error) {
          console.error('Error uploading file:', error)
        }
      }
    </script>
  </body>
</html>