upload.html

{% extends 'base.html' %}

{% block title %}CSV Upload{% endblock %}

{% block content %}
    <div class="bg-white p-10 rounded-lg shadow-lg w-11/12 md:w-1/2 lg:w-1/3 mx-auto">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 text-center">Upload CSV</h2>

        <form id="uploadForm" enctype="multipart/form-data" class="space-y-6">
            <div>
                <label for="fileInput" class="block text-sm font-medium text-gray-700 mb-2">Choose CSV File</label>
                <input type="file" name="file" id="fileInput" accept=".csv" class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring focus:ring-blue-400">
            </div>

            <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400">Upload</button>
        </form>

        <!-- Error Display -->
        <div id="errorSection" class="hidden mt-4 bg-red-100 border border-red-400 text-red-700 p-4 rounded-lg">
            <strong class="font-bold">Error:</strong>
            <ul id="errorList" class="mt-2 list-disc list-inside"></ul>
        </div>

        <!-- Success Message -->
        <div id="successSection" class="hidden mt-4 bg-green-100 border border-green-400 text-green-700 p-4 rounded-lg">
            <strong class="font-bold">Success:</strong>
            <span id="successMessage" class="block mt-2"></span>
        </div>
    </div>

    <script>
        const form = document.getElementById('uploadForm');
        const fileInput = document.getElementById('fileInput');
        const errorSection = document.getElementById('errorSection');
        const errorList = document.getElementById('errorList');
        const successSection = document.getElementById('successSection');
        const successMessage = document.getElementById('successMessage');

        form.addEventListener('submit', async function (e) {
            e.preventDefault();

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            const response = await fetch('', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                }
            });

            const result = await response.json();

            // Clear previous messages
            errorList.innerHTML = '';
            successMessage.innerHTML = '';
            errorSection.classList.add('hidden');
            successSection.classList.add('hidden');

            if (response.ok && result.status === 'success') {
                // Show success message
                successMessage.innerText = result.message;
                successSection.classList.remove('hidden');
            } else if (response.status === 400 && result.status === 'error') {
                // Show errors
                result.errors.forEach(error => {
                    const li = document.createElement('li');
                    li.textContent = error;
                    errorList.appendChild(li);
                });
                errorSection.classList.remove('hidden');
            }
        });
    </script>
{% endblock %}