frontend/js/upload.js

/**
 * Upload functionality for AI Document Analyzer
 */

document.addEventListener('DOMContentLoaded', () => {
  // Initialize document upload
  initDocumentUpload();
  
  // Initialize image upload
  initImageUpload();
});

/**
 * Initialize document upload functionality
 */
function initDocumentUpload() {
  const dropArea = document.getElementById('document-drop-area');
  const fileInput = document.getElementById('document-file-input');
  const analyzeBtn = document.getElementById('analyze-document-btn');
  
  let selectedFile = null;
  
  // Handle drag and drop events
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, (e) => {
      e.preventDefault();
      e.stopPropagation();
    });
  });
  
  // Add dragover class
  dropArea.addEventListener('dragenter', () => {
    dropArea.classList.add('dragover');
  });
  
  dropArea.addEventListener('dragover', () => {
    dropArea.classList.add('dragover');
  });
  
  // Remove dragover class
  dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('dragover');
  });
  
  // Handle file drop
  dropArea.addEventListener('drop', (e) => {
    dropArea.classList.remove('dragover');
    const file = e.dataTransfer.files[0];
    handleDocumentFile(file);
  });
  
  // Handle click to browse
  dropArea.addEventListener('click', () => {
    fileInput.click();
  });
  
  // Handle file selection
  fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    handleDocumentFile(file);
  });
  
  // Handle analyze button click
  analyzeBtn.addEventListener('click', () => {
    if (selectedFile) {
      const analysisType = document.querySelector('input[name="document-analysis"]:checked').value;
      uploadDocumentForAnalysis(selectedFile, analysisType);
    }
  });
  
  /**
   * Handle document file selection
   * @param {File} file - The selected file
   */
  function handleDocumentFile(file) {
    if (!file) return;
    
    // Check if file type is allowed
    const allowedTypes = '.pdf,.docx,.pptx,.xlsx,.xls';
    if (!isFileTypeAllowed(file.name, allowedTypes)) {
      showError('File type not supported. Please upload a PDF, DOCX, PPTX, or Excel file.');
      return;
    }
    
    // Update UI to show selected file
    dropArea.classList.add('file-selected');
    dropArea.innerHTML = `
      <i class="fas fa-file-alt"></i>
      <h3>${file.name}</h3>
      <p>${formatFileSize(file.size)}</p>
      <p class="file-types">Click to change file</p>
    `;
    
    // Enable analyze button
    analyzeBtn.disabled = false;
    
    // Store selected file
    selectedFile = file;
  }
  
  /**
   * Upload document for analysis
   * @param {File} file - The document file to analyze
   * @param {string} analysisType - The type of analysis to perform
   */
  function uploadDocumentForAnalysis(file, analysisType) {
    showLoading();
    
    const formData = new FormData();
    formData.append('file', file);
    formData.append('analysis_type', analysisType);
    
    fetch('/api/analyze-document', {
      method: 'POST',
      body: formData
    })
      .then(response => {
        if (!response.ok) {
          return response.json().then(data => {
            throw new Error(data.detail || 'Error analyzing document');
          });
        }
        return response.json();
      })
      .then(data => {
        hideLoading();
        displayResults(data);
      })
      .catch(error => {
        hideLoading();
        showError(error.message);
      });
  }
}

/**
 * Initialize image upload functionality
 */
function initImageUpload() {
  const dropArea = document.getElementById('image-drop-area');
  const fileInput = document.getElementById('image-file-input');
  const analyzeBtn = document.getElementById('analyze-image-btn');
  
  let selectedFile = null;
  
  // Handle drag and drop events
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, (e) => {
      e.preventDefault();
      e.stopPropagation();
    });
  });
  
  // Add dragover class
  dropArea.addEventListener('dragenter', () => {
    dropArea.classList.add('dragover');
  });
  
  dropArea.addEventListener('dragover', () => {
    dropArea.classList.add('dragover');
  });
  
  // Remove dragover class
  dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('dragover');
  });
  
  // Handle file drop
  dropArea.addEventListener('drop', (e) => {
    dropArea.classList.remove('dragover');
    const file = e.dataTransfer.files[0];
    handleImageFile(file);
  });
  
  // Handle click to browse
  dropArea.addEventListener('click', () => {
    fileInput.click();
  });
  
  // Handle file selection
  fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    handleImageFile(file);
  });
  
  // Handle analyze button click
  analyzeBtn.addEventListener('click', () => {
    if (selectedFile) {
      const analysisType = document.querySelector('input[name="image-analysis"]:checked').value;
      uploadImageForAnalysis(selectedFile, analysisType);
    }
  });
  
  /**
   * Handle image file selection
   * @param {File} file - The selected file
   */
  function handleImageFile(file) {
    if (!file) return;
    
    // Check if file type is allowed
    const allowedTypes = '.jpg,.jpeg,.png';
    if (!isFileTypeAllowed(file.name, allowedTypes)) {
      showError('File type not supported. Please upload a JPG, JPEG, or PNG file.');
      return;
    }
    
    // Create a preview of the image
    const reader = new FileReader();
    reader.onload = function(e) {
      dropArea.classList.add('file-selected');
      dropArea.innerHTML = `
        <img src="${e.target.result}" alt="Preview" style="max-width: 100%; max-height: 200px; margin-bottom: 16px;">
        <h3>${file.name}</h3>
        <p>${formatFileSize(file.size)}</p>
        <p class="file-types">Click to change image</p>
      `;
    };
    reader.readAsDataURL(file);
    
    // Enable analyze button
    analyzeBtn.disabled = false;
    
    // Store selected file
    selectedFile = file;
  }
  
  /**
   * Upload image for analysis
   * @param {File} file - The image file to analyze
   * @param {string} analysisType - The type of analysis to perform
   */
  function uploadImageForAnalysis(file, analysisType) {
    showLoading();
    
    const formData = new FormData();
    formData.append('file', file);
    formData.append('analysis_type', analysisType);
    
    fetch('/api/analyze-image', {
      method: 'POST',
      body: formData
    })
      .then(response => {
        if (!response.ok) {
          return response.json().then(data => {
            throw new Error(data.detail || 'Error analyzing image');
          });
        }
        return response.json();
      })
      .then(data => {
        hideLoading();
        displayResults(data);
      })
      .catch(error => {
        hideLoading();
        showError(error.message);
      });
  }
}