File Upload Form Examples

<!-- Job Application with File Upload -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="form_type" value="job_application">
  
  <div>
    <label for="full_name">Full Name</label>
    <input type="text" name="full_name" id="full_name" required>
  </div>
  
  <div>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" required>
  </div>
  
  <div>
    <label for="phone">Phone Number</label>
    <input type="tel" name="phone" id="phone" required>
  </div>
  
  <div>
    <label for="position">Position Applied For</label>
    <input type="text" name="position" id="position" required>
  </div>
  
  <div>
    <label for="experience">Years of Experience</label>
    <select name="experience" id="experience" required>
      <option value="">Select experience</option>
      <option value="0-2">0-2 years</option>
      <option value="3-5">3-5 years</option>
      <option value="6-10">6-10 years</option>
      <option value="10+">10+ years</option>
    </select>
  </div>
  
  <div>
    <label for="cover_letter">Cover Letter</label>
    <textarea name="cover_letter" id="cover_letter" rows="5" required></textarea>
  </div>
  
  <!-- File Uploads -->
  <div>
    <label for="resume">Resume/CV (Required)</label>
    <input type="file" name="resume" id="resume" accept=".pdf,.doc,.docx" required>
    <small>Accepted: PDF, DOC, DOCX (max 10MB)</small>
  </div>
  
  <div>
    <label for="portfolio">Portfolio Files (Optional)</label>
    <input type="file" name="portfolio" id="portfolio" 
           accept=".pdf,.jpg,.jpeg,.png,.zip" multiple>
    <small>Multiple files allowed. Accepted: PDF, Images, ZIP</small>
  </div>
  
  <button type="submit">Submit Application</button>
</form>

<!-- Contact Form with File Attachments -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="form_type" value="contact_with_files">
  
  <div>
    <label for="name">Your Name</label>
    <input type="text" name="name" id="name" required>
  </div>
  
  <div>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" required>
  </div>
  
  <div>
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" required>
  </div>
  
  <div>
    <label for="message">Message</label>
    <textarea name="message" id="message" rows="5" required></textarea>
  </div>
  
  <!-- File Attachment -->
  <div>
    <label for="attachments">Attachments (Optional)</label>
    <input type="file" name="attachments" id="attachments" multiple>
    <small>You can attach multiple files</small>
  </div>
  
  <button type="submit">Send Message</button>
</form>

<!-- Profile Form with Image Preview -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="form_type" value="profile_with_photo">
  
  <div>
    <label for="name">Full Name</label>
    <input type="text" name="name" id="name" required>
  </div>
  
  <div>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" required>
  </div>
  
  <div>
    <label for="bio">Bio</label>
    <textarea name="bio" id="bio" rows="4"></textarea>
  </div>
  
  <!-- Profile Photo with Preview -->
  <div>
    <label for="profile_photo">Profile Photo</label>
    <input type="file" name="profile_photo" id="profile_photo" 
           accept="image/*" onchange="previewImage(this)">
    
    <!-- Image Preview -->
    <div id="imagePreview" style="margin-top: 10px;">
      <p>No image selected</p>
    </div>
  </div>
  
  <button type="submit">Save Profile</button>
</form>

<script>
function previewImage(input) {
  const preview = document.getElementById('imagePreview');
  
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    
    reader.onload = function(e) {
      preview.innerHTML = '<img src="' + e.target.result + '" style="max-width: 200px; max-height: 200px; border: 1px solid #ccc;">';
    };
    
    reader.readAsDataURL(input.files[0]);
  } else {
    preview.innerHTML = '<p>No image selected</p>';
  }
}
</script>

<!-- Document Upload Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="form_type" value="document_upload">
  
  <div>
    <label for="project_name">Project Name</label>
    <input type="text" name="project_name" id="project_name" required>
  </div>
  
  <div>
    <label for="client_name">Client Name</label>
    <input type="text" name="client_name" id="client_name" required>
  </div>
  
  <div>
    <label for="project_type">Project Type</label>
    <select name="project_type" id="project_type" required>
      <option value="">Select type</option>
      <option value="web_development">Web Development</option>
      <option value="design">Design</option>
      <option value="marketing">Marketing</option>
      <option value="other">Other</option>
    </select>
  </div>
  
  <!-- Different Document Categories -->
  <div>
    <label for="design_files">Design Files</label>
    <input type="file" name="design_files" id="design_files" 
           accept=".psd,.ai,.sketch,.fig,.pdf" multiple>
    <small>Accepted: PSD, AI, Sketch, Figma, PDF</small>
  </div>
  
  <div>
    <label for="documents">Documents</label>
    <input type="file" name="documents" id="documents" 
           accept=".doc,.docx,.pdf,.txt" multiple>
    <small>Accepted: DOC, DOCX, PDF, TXT</small>
  </div>
  
  <div>
    <label for="images">Images</label>
    <input type="file" name="images" id="images" 
           accept="image/*" multiple>
    <small>All image formats accepted</small>
  </div>
  
  <div>
    <label for="other_files">Other Files</label>
    <input type="file" name="other_files" id="other_files" multiple>
    <small>Any file type</small>
  </div>
  
  <div>
    <label for="notes">Notes</label>
    <textarea name="notes" id="notes" rows="4" 
              placeholder="Any special instructions or notes..."></textarea>
  </div>
  
  <button type="submit">Upload Documents</button>
</form>

import React, { useState } from 'react';

function FileUploadForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [files, setFiles] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleFileChange = (e) => {
    const selectedFiles = Array.from(e.target.files);
    setFiles(selectedFiles);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);

    const uploadData = new FormData();
    
    // Add form fields
    Object.keys(formData).forEach(key => {
      uploadData.append(key, formData[key]);
    });
    
    // Add files
    files.forEach((file, index) => {
      uploadData.append(`file_${index}`, file);
    });
    
    uploadData.append('form_type', 'react_file_upload');

    try {
      const response = await fetch('https://connect.kitoform.com/f/YOUR_ENDPOINT_ID', {
        method: 'POST',
        body: uploadData,
      });

      if (response.ok) {
        alert('Files uploaded successfully!');
        setFormData({ name: '', email: '', message: '' });
        setFiles([]);
        // Reset file input
        document.getElementById('file-input').value = '';
      } else {
        alert('Upload failed. Please try again.');
      }
    } catch (error) {
      alert('Error uploading files.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          required
        />
      </div>

      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          required
        />
      </div>

      <div>
        <label>Message:</label>
        <textarea
          name="message"
          value={formData.message}
          onChange={handleInputChange}
          rows={4}
          required
        />
      </div>

      <div>
        <label>Files:</label>
        <input
          id="file-input"
          type="file"
          multiple
          onChange={handleFileChange}
          accept=".pdf,.doc,.docx,.jpg,.png"
        />
      </div>

      {files.length > 0 && (
        <div>
          <h4>Selected Files:</h4>
          <ul>
            {files.map((file, index) => (
              <li key={index}>
                {file.name} ({Math.round(file.size / 1024)} KB)
              </li>
            ))}
          </ul>
        </div>
      )}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Uploading...' : 'Submit'}
      </button>
    </form>
  );
}

export default FileUploadForm;