<form id="upload-form">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <input type="tel" name="phone" placeholder="Phone Number">
  
  <label for="resume">Upload Resume</label>
  <input type="file" name="resume" id="resume" accept=".pdf,.doc,.docx">
  
  <label for="documents">Upload Documents (Multiple)</label>
  <input type="file" name="documents[]" id="documents" multiple>
  
  <!-- Progress bar -->
  <div id="progress-container" style="display: none;">
    <div class="progress-bar">
      <div id="progress-bar" style="width: 0%; background: #3b82f6; height: 20px; transition: width 0.3s;"></div>
    </div>
    <span id="progress-text">0%</span>
  </div>
  
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('upload-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  
  const form = e.target;
  const formData = new FormData(form);
  const maxSizeMB = 100;
  const maxBytes = maxSizeMB * 1024 * 1024;
  
  // Client-side total size check
  let totalSize = 0;
  for (const [key, value] of formData.entries()) {
    if (value instanceof File) totalSize += value.size;
  }
  if (totalSize > maxBytes) {
    alert(`Total file size exceeds ${maxSizeMB} MB limit. Please reduce file sizes.`);
    return;
  }
  
  const progressContainer = document.getElementById('progress-container');
  const progressBar = document.getElementById('progress-bar');
  const progressText = document.getElementById('progress-text');
  progressContainer.style.display = 'block';
  
  try {
    const xhr = new XMLHttpRequest();
    
    xhr.upload.addEventListener('progress', function(e) {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        progressBar.style.width = percent + '%';
        progressText.textContent = percent + '%';
      }
    });
    
    xhr.addEventListener('load', function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        alert('Form submitted successfully!');
        form.reset();
        progressContainer.style.display = 'none';
      } else {
        let message = 'Upload failed. Please try again.';
        try {
          const data = JSON.parse(xhr.responseText);
          if (data.error) message = data.error;
        } catch (_) {}
        alert(message);
        progressContainer.style.display = 'none';
      }
    });
    
    xhr.addEventListener('error', function() {
      alert('Network error. Please try again.');
      progressContainer.style.display = 'none';
    });
    
    xhr.open('POST', 'https://myformconnect.io/f/YOUR_FORM_UUID_HERE');
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send(formData);
  } catch (err) {
    alert('Upload failed. Please try again.');
    progressContainer.style.display = 'none';
  }
});
</script>