OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

dynamically add new upload rows

  • Thread starter Thread starter K Max
  • Start date Start date
K

K Max

Guest
this is my Django's frontend. In a nutshell, one selects a class and a subject with options dynamically populated from Django context variables. then, based on the upload type, multiple upload rows are supposed to appear where each row can have different types of file uploads based on the selected type.

The addUploadRow is supposed to dynamically add new upload rows to the upload-rows div. However, the rows are not popping out.

I'm very new to JS and HTML. any idea where the problem is?

here's my code

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment Upload</title>
    {% load static %}
    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-8">
        <h1 class="text-2xl font-bold mb-4">Assignment Upload</h1>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-4">
            <div class="bg-white-custom p-4 shadow rounded">
                <label for="class_id" class="block text-sm font-medium text-gray-700">Class:</label>
                <select name="class_id" id="class_id" required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                    <option value="">Select Class</option>
                    {% for class in classes %}
                    <option value="{{ class.id }}">{{ class.identifier }} (Year {{ class.year }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="bg-white-custom p-4 shadow rounded">
                <label for="subject_id" class="block text-sm font-medium text-gray-700">Subject:</label>
                <select name="subject_id" id="subject_id" required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                    <option value="">Select Subject</option>
                    {% for subject in subjects %}
                    <option value="{{ subject.id }}">{{ subject.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div id="upload-rows" class="space-y-4">
            <div class="upload-row grid grid-cols-1 gap-4 md:grid-cols-2">
                <div class="bg-white-custom p-4 shadow rounded">
                    <label for="upload_type_0" class="block text-sm font-medium text-gray-700">Upload Type:</label>
                    <select name="upload_type[]" id="upload_type_0" class="upload_type mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" required onchange="toggleFileInputs(this, 0)">
                        <option value="">Select Upload Type</option>
                        <option value="all_in_one">All in One</option>
                        <option value="separate_files">Separate Files</option>
                        <option value="qr_combined_a_separate">Combined Question Rubric, Separate Answer</option>
                        <option value="question_answer">Question and Answer</option>
                    </select>
                    <div class="file-input-section mt-4" id="file-input-section-0"></div>
                </div>

                <div class="bg-white-custom p-4 shadow rounded">
                    <label for="student_ids_0" class="block text-sm font-medium text-gray-700">Students:</label>
                    <select name="student_ids[]" id="student_ids_0" multiple required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                        <!-- Student options will be dynamically loaded here -->
                    </select>
                    <span class="text-red-500">Please select at least one student.</span>
                </div>

                <div class="col-span-2">
                    <button type="button" onclick="uploadFiles(this)" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Upload
                    </button>
                </div>
                
                <div class="col-span-2 mt-4">
                    <div id="progress-bar-container-0" class="hidden">
                        <label for="progress-bar-0" class="block text-sm font-medium text-gray-700">Upload Progress:</label>
                        <div class="relative pt-1">
                            <div class="flex mb-2 items-center justify-between">
                                <div class="text-right">
                                    <span id="progress-bar-percentage-0" class="text-xs font-semibold inline-block text-indigo-600">0%</span>
                                </div>
                            </div>
                            <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
                                <div id="progress-bar-0" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" style="width:0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <button type="button" onclick="addUploadRow()" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            Add Upload
        </button>

    </div>

    <div id="upload-success-modal" class="modal hidden">
        <div class="modal-content bg-white p-4 rounded shadow">
            <span class="close-button">&times;</span>
            <p id="upload-success-message" class="text-center"></p>
        </div>
    </div>

    <script>
        let uploadCounter = 1;

        function addUploadRow() {
            const uploadRowTemplate = `
                <div class="upload-row grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div class="bg-white-custom p-4 shadow rounded">
                        <label for="upload_type_${uploadCounter}" class="block text-sm font-medium text-gray-700">Upload Type:</label>
                        <select name="upload_type[]" id="upload_type_${uploadCounter}" class="upload_type mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" required onchange="toggleFileInputs(this, ${uploadCounter})">
                            <option value="">Select Upload Type</option>
                            <option value="all_in_one">All in One</option>
                            <option value="separate_files">Separate Files</option>
                            <option value="qr_combined_a_separate">Combined Question Rubric, Separate Answer</option>
                            <option value="question_answer">Question and Answer</option>
                        </select>
                        <div class="file-input-section mt-4" id="file-input-section-${uploadCounter}"></div>
                    </div>
                    <div class="bg-white-custom p-4 shadow rounded">
                        <label for="student_ids_${uploadCounter}" class="block text-sm font-medium text-gray-700">Students:</label>
                        <select name="student_ids[]" id="student_ids_${uploadCounter}" multiple required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                            <!-- Student options will be dynamically loaded here -->
                        </select>
                        <span class="text-red-500">Please select at least one student.</span>
                    </div>
                    <div class="col-span-2">
                        <button type="button" onclick="uploadFiles(this)" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Upload
                        </button>
                    </div>
                    <div class="col-span-2 mt-4">
                        <div id="progress-bar-container-${uploadCounter}" class="hidden">
                            <label for="progress-bar-${uploadCounter}" class="block text-sm font-medium text-gray-700">Upload Progress:</label>
                            <div class="relative pt-1">
                                <div class="flex mb-2 items-center justify-between">
                                    <div class="text-right">
                                        <span id="progress-bar-percentage-${uploadCounter}" class="text-xs font-semibold inline-block text-indigo-600">0%</span>
                                    </div>
                                </div>
                                <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
                                    <div id="progress-bar-${uploadCounter}" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" style="width:0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;
            const uploadRows = document.getElementById('upload-rows');
            uploadRows.insertAdjacentHTML('beforeend', uploadRowTemplate);
            uploadCounter++;
        }

        function toggleFileInputs(selectElement, index) {
            const uploadType = selectElement.value;
            const fileInputSection = document.getElementById(`file-input-section-${index}`);
            
            fileInputSection.innerHTML = ''; // Clear previous file inputs

            if (uploadType === 'all_in_one') {
                fileInputSection.innerHTML = `
                    <label class="block text-sm font-medium text-gray-700" for="all_in_one_file_${index}">Upload All in One File:</label>
                    <input type="file" id="all_in_one_file_${index}" name="files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
            } else if (uploadType === 'separate_files') {
                fileInputSection.innerHTML = `
                    <label class="block text-sm font-medium text-gray-700" for="question_file_${index}">Upload Question File:</label>
                    <input type="file" id="question_file_${index}" name="question_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    <label class="block text-sm font-medium text-gray-700 mt-2" for="answer_file_${index}">Upload Answer File:</label>
                    <input type="file" id="answer_file_${index}" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    <label class="block text-sm font-medium text-gray-700 mt-2" for="rubric_file_${index}">Upload Rubric File:</label>
                    <input type="file" id="rubric_file_${index}" name="rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
            } else if (uploadType === 'qr_combined_a_separate') {
                fileInputSection.innerHTML = `
                    <label class="block text-sm font-medium text-gray-700" for="question_rubric_file_${index}">Upload Combined Question and Rubric File:</label>
                    <input type="file" id="question_rubric_file_${index}" name="question_rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    <label class="block text-sm font-medium text-gray-700 mt-2" for="answer_file_${index}">Upload Answer File:</label>
                    <input type="file" id="answer_file_${index}" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
            } else if (uploadType === 'question_answer') {
                fileInputSection.innerHTML = `
                    <label class="block text-sm font-medium text-gray-700" for="question_answer_file_${index}">Upload Question and Answer File:</label>
                    <input type="file" id="question_answer_file_${index}" name="question_answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
            }
        }

        function uploadFiles(button) {
            const uploadRow = button.closest('.upload-row');
            const formData = new FormData();

            // Append the file inputs to the FormData object
            const fileInputs = uploadRow.querySelectorAll('input[type="file"]');
            fileInputs.forEach((input) => {
                if (input.files[0]) {
                    formData.append(input.name, input.files[0]);
                }
            });

            // Append the select inputs to the FormData object
            const selectInputs = uploadRow.querySelectorAll('select');
            selectInputs.forEach((input) => {
                formData.append(input.name, input.value);
            });

            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload/', true);

            const progressBarContainer = uploadRow.querySelector('[id^="progress-bar-container"]');
            const progressBar = uploadRow.querySelector('[id^="progress-bar"]');
            const progressBarPercentage = uploadRow.querySelector('[id^="progress-bar-percentage"]');

            xhr.upload.onprogress = function(event) {
                if (event.lengthComputable) {
                    const percentComplete = (event.loaded / event.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                    progressBarPercentage.innerText = Math.round(percentComplete) + '%';
                }
            };

            xhr.onload = function() {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    document.getElementById('upload-success-message').innerText = response.message;
                    document.getElementById('upload-success-modal').classList.remove('hidden');
                } else {
                    console.error('Upload failed.');
                }
            };

            xhr.send(formData);

            progressBarContainer.classList.remove('hidden');
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('class_id').addEventListener('change', function() {
                const classId = this.value;
                const studentSelects = document.querySelectorAll('select[id^="student_ids_"]');
                if (classId) {
                    fetch(`/get-students-for-class/${classId}/`)
                        .then(response => response.json())
                        .then(data => {
                            studentSelects.forEach(select => {
                                select.innerHTML = ''; // Clear existing options
                                data.students.forEach(student => {
                                    const option = new Option(student.name, student.id);
                                    select.add(option);
                                });
                            });
                        })
                        .catch(error => console.error('Error fetching students:', error));
                } else {
                    studentSelects.forEach(select => select.innerHTML = ''); // Clear if no class is selected
                }
            });

            // Ensure toggleFileInputs works for the initial row
            document.getElementById('upload_type_0').addEventListener('change', function() {
                toggleFileInputs(this, 0);
            });
        });
    </script>
</body>
</html>

I've created the single function that dynamically add the rows but i cant integrate it to the main code:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment Upload</title>
    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-8">
        <h1 class="text-2xl font-bold mb-4">Assignment Upload</h1>
        <div id="upload-rows" class="space-y-4">
            <!-- Dynamic upload rows will be added here -->
        </div>
        <button type="button" id="addUploadRow" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Add Upload
        </button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Function to add a new upload row
            document.getElementById('addUploadRow').addEventListener('click', function() {
                const uploadRows = document.getElementById('upload-rows');
                const index = uploadRows.children.length;
                const newRow = document.createElement('div');
                newRow.className = 'upload-row grid grid-cols-1 gap-4 md:grid-cols-2 p-4 bg-white shadow rounded';
                newRow.innerHTML = `
                    <div>
                        <label for="upload_type_${index}" class="block text-sm font-medium text-gray-700">Upload Type:</label>
                        <select name="upload_type[]" id="upload_type_${index}" class="upload_type mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                            <option value="">Select Upload Type</option>
                            <option value="all_in_one">All in One</option>
                            <option value="separate_files">Separate Files</option>
                            <option value="qr_combined_a_separate">Combined Question Rubric, Separate Answer</option>
                            <option value="question_answer">Question and Answer</option>
                        </select>
                        <div class="file-input-section mt-4" id="file-input-section-${index}"></div>
                    </div>
                `;
                uploadRows.appendChild(newRow);

                // Add change listener to new select element
                document.getElementById(`upload_type_${index}`).addEventListener('change', function() {
                    toggleFileInputs(this, index);
                });
            });

            // Function to toggle file inputs based on selected upload type
            function toggleFileInputs(selectElement, index) {
                const uploadType = selectElement.value;
                const fileInputSection = document.getElementById(`file-input-section-${index}`);
                fileInputSection.innerHTML = ''; // Clear existing inputs

                if (uploadType === 'all_in_one') {
                    fileInputSection.innerHTML = `
                        <label class="block text-sm font-medium text-gray-700">Upload All in One File:</label>
                        <input type="file" name="files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    `;
                } else if (uploadType === 'separate_files') {
                    fileInputSection.innerHTML = `
                        <label class="block text-sm font-medium text-gray-700">Upload Question File:</label>
                        <input type="file" name="question_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <label class="block text-sm font-medium text-gray-700 mt-2">Upload Answer File:</label>
                        <input type="file" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <label class="block text-sm font-medium text-gray-700 mt-2">Upload Rubric File:</label>
                        <input type="file" name="rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    `;
                } else if (uploadType === 'qr_combined_a_separate') {
                    fileInputSection.innerHTML = `
                        <label class="block text-sm font-medium text-gray-700">Upload Combined Question and Rubric File:</label>
                        <input type="file" name="question_rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <label class="block text-sm font-medium text-gray-700 mt-2">Upload Answer File:</label>
                        <input type="file" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    `;
                } else if (uploadType === 'question_answer') {
                    fileInputSection.innerHTML = `
                        <label class="block text-sm font-medium text-gray-700">Upload Question and Answer File:</label>
                        <input type="file" name="question_answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    `;
                }
            }

            // Trigger the first row addition on load
            document.getElementById('addUploadRow').click();
        });
    </script>
</body>
</html>

<p>this is my Django's frontend. In a nutshell, one selects a class and a subject with options dynamically populated from Django context variables.
then, based on the upload type, multiple upload rows are supposed to appear where each row can have different types of file uploads based on the selected type.</p>
<p>The addUploadRow is supposed to dynamically add new upload rows to the upload-rows div.
However, the rows are not popping out.</p>
<p>I'm very new to JS and HTML. any idea where the problem is?</p>
<p>here's my code</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment Upload</title>
{% load static %}
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-8">
<h1 class="text-2xl font-bold mb-4">Assignment Upload</h1>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-4">
<div class="bg-white-custom p-4 shadow rounded">
<label for="class_id" class="block text-sm font-medium text-gray-700">Class:</label>
<select name="class_id" id="class_id" required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="">Select Class</option>
{% for class in classes %}
<option value="{{ class.id }}">{{ class.identifier }} (Year {{ class.year }})</option>
{% endfor %}
</select>
</div>
<div class="bg-white-custom p-4 shadow rounded">
<label for="subject_id" class="block text-sm font-medium text-gray-700">Subject:</label>
<select name="subject_id" id="subject_id" required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="">Select Subject</option>
{% for subject in subjects %}
<option value="{{ subject.id }}">{{ subject.name }}</option>
{% endfor %}
</select>
</div>
</div>

<div id="upload-rows" class="space-y-4">
<div class="upload-row grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="bg-white-custom p-4 shadow rounded">
<label for="upload_type_0" class="block text-sm font-medium text-gray-700">Upload Type:</label>
<select name="upload_type[]" id="upload_type_0" class="upload_type mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" required onchange="toggleFileInputs(this, 0)">
<option value="">Select Upload Type</option>
<option value="all_in_one">All in One</option>
<option value="separate_files">Separate Files</option>
<option value="qr_combined_a_separate">Combined Question Rubric, Separate Answer</option>
<option value="question_answer">Question and Answer</option>
</select>
<div class="file-input-section mt-4" id="file-input-section-0"></div>
</div>

<div class="bg-white-custom p-4 shadow rounded">
<label for="student_ids_0" class="block text-sm font-medium text-gray-700">Students:</label>
<select name="student_ids[]" id="student_ids_0" multiple required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<!-- Student options will be dynamically loaded here -->
</select>
<span class="text-red-500">Please select at least one student.</span>
</div>

<div class="col-span-2">
<button type="button" onclick="uploadFiles(this)" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Upload
</button>
</div>

<div class="col-span-2 mt-4">
<div id="progress-bar-container-0" class="hidden">
<label for="progress-bar-0" class="block text-sm font-medium text-gray-700">Upload Progress:</label>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div class="text-right">
<span id="progress-bar-percentage-0" class="text-xs font-semibold inline-block text-indigo-600">0%</span>
</div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
<div id="progress-bar-0" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" style="width:0%"></div>
</div>
</div>
</div>
</div>
</div>
</div>

<button type="button" onclick="addUploadRow()" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Add Upload
</button>

</div>

<div id="upload-success-modal" class="modal hidden">
<div class="modal-content bg-white p-4 rounded shadow">
<span class="close-button">&times;</span>
<p id="upload-success-message" class="text-center"></p>
</div>
</div>

<script>
let uploadCounter = 1;

function addUploadRow() {
const uploadRowTemplate = `
<div class="upload-row grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="bg-white-custom p-4 shadow rounded">
<label for="upload_type_${uploadCounter}" class="block text-sm font-medium text-gray-700">Upload Type:</label>
<select name="upload_type[]" id="upload_type_${uploadCounter}" class="upload_type mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" required onchange="toggleFileInputs(this, ${uploadCounter})">
<option value="">Select Upload Type</option>
<option value="all_in_one">All in One</option>
<option value="separate_files">Separate Files</option>
<option value="qr_combined_a_separate">Combined Question Rubric, Separate Answer</option>
<option value="question_answer">Question and Answer</option>
</select>
<div class="file-input-section mt-4" id="file-input-section-${uploadCounter}"></div>
</div>
<div class="bg-white-custom p-4 shadow rounded">
<label for="student_ids_${uploadCounter}" class="block text-sm font-medium text-gray-700">Students:</label>
<select name="student_ids[]" id="student_ids_${uploadCounter}" multiple required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<!-- Student options will be dynamically loaded here -->
</select>
<span class="text-red-500">Please select at least one student.</span>
</div>
<div class="col-span-2">
<button type="button" onclick="uploadFiles(this)" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Upload
</button>
</div>
<div class="col-span-2 mt-4">
<div id="progress-bar-container-${uploadCounter}" class="hidden">
<label for="progress-bar-${uploadCounter}" class="block text-sm font-medium text-gray-700">Upload Progress:</label>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div class="text-right">
<span id="progress-bar-percentage-${uploadCounter}" class="text-xs font-semibold inline-block text-indigo-600">0%</span>
</div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
<div id="progress-bar-${uploadCounter}" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" style="width:0%"></div>
</div>
</div>
</div>
</div>
</div>`;
const uploadRows = document.getElementById('upload-rows');
uploadRows.insertAdjacentHTML('beforeend', uploadRowTemplate);
uploadCounter++;
}

function toggleFileInputs(selectElement, index) {
const uploadType = selectElement.value;
const fileInputSection = document.getElementById(`file-input-section-${index}`);

fileInputSection.innerHTML = ''; // Clear previous file inputs

if (uploadType === 'all_in_one') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700" for="all_in_one_file_${index}">Upload All in One File:</label>
<input type="file" id="all_in_one_file_${index}" name="files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
} else if (uploadType === 'separate_files') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700" for="question_file_${index}">Upload Question File:</label>
<input type="file" id="question_file_${index}" name="question_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<label class="block text-sm font-medium text-gray-700 mt-2" for="answer_file_${index}">Upload Answer File:</label>
<input type="file" id="answer_file_${index}" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<label class="block text-sm font-medium text-gray-700 mt-2" for="rubric_file_${index}">Upload Rubric File:</label>
<input type="file" id="rubric_file_${index}" name="rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
} else if (uploadType === 'qr_combined_a_separate') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700" for="question_rubric_file_${index}">Upload Combined Question and Rubric File:</label>
<input type="file" id="question_rubric_file_${index}" name="question_rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<label class="block text-sm font-medium text-gray-700 mt-2" for="answer_file_${index}">Upload Answer File:</label>
<input type="file" id="answer_file_${index}" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
} else if (uploadType === 'question_answer') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700" for="question_answer_file_${index}">Upload Question and Answer File:</label>
<input type="file" id="question_answer_file_${index}" name="question_answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">`;
}
}

function uploadFiles(button) {
const uploadRow = button.closest('.upload-row');
const formData = new FormData();

// Append the file inputs to the FormData object
const fileInputs = uploadRow.querySelectorAll('input[type="file"]');
fileInputs.forEach((input) => {
if (input.files[0]) {
formData.append(input.name, input.files[0]);
}
});

// Append the select inputs to the FormData object
const selectInputs = uploadRow.querySelectorAll('select');
selectInputs.forEach((input) => {
formData.append(input.name, input.value);
});

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/', true);

const progressBarContainer = uploadRow.querySelector('[id^="progress-bar-container"]');
const progressBar = uploadRow.querySelector('[id^="progress-bar"]');
const progressBarPercentage = uploadRow.querySelector('[id^="progress-bar-percentage"]');

xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
progressBar.style.width = percentComplete + '%';
progressBarPercentage.innerText = Math.round(percentComplete) + '%';
}
};

xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
document.getElementById('upload-success-message').innerText = response.message;
document.getElementById('upload-success-modal').classList.remove('hidden');
} else {
console.error('Upload failed.');
}
};

xhr.send(formData);

progressBarContainer.classList.remove('hidden');
}

document.addEventListener('DOMContentLoaded', function() {
document.getElementById('class_id').addEventListener('change', function() {
const classId = this.value;
const studentSelects = document.querySelectorAll('select[id^="student_ids_"]');
if (classId) {
fetch(`/get-students-for-class/${classId}/`)
.then(response => response.json())
.then(data => {
studentSelects.forEach(select => {
select.innerHTML = ''; // Clear existing options
data.students.forEach(student => {
const option = new Option(student.name, student.id);
select.add(option);
});
});
})
.catch(error => console.error('Error fetching students:', error));
} else {
studentSelects.forEach(select => select.innerHTML = ''); // Clear if no class is selected
}
});

// Ensure toggleFileInputs works for the initial row
document.getElementById('upload_type_0').addEventListener('change', function() {
toggleFileInputs(this, 0);
});
});
</script>
</body>
</html>
</code></pre>
<p>I've created the single function that dynamically add the rows but i cant integrate it to the main code:</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment Upload</title>
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-8">
<h1 class="text-2xl font-bold mb-4">Assignment Upload</h1>
<div id="upload-rows" class="space-y-4">
<!-- Dynamic upload rows will be added here -->
</div>
<button type="button" id="addUploadRow" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Add Upload
</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// Function to add a new upload row
document.getElementById('addUploadRow').addEventListener('click', function() {
const uploadRows = document.getElementById('upload-rows');
const index = uploadRows.children.length;
const newRow = document.createElement('div');
newRow.className = 'upload-row grid grid-cols-1 gap-4 md:grid-cols-2 p-4 bg-white shadow rounded';
newRow.innerHTML = `
<div>
<label for="upload_type_${index}" class="block text-sm font-medium text-gray-700">Upload Type:</label>
<select name="upload_type[]" id="upload_type_${index}" class="upload_type mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="">Select Upload Type</option>
<option value="all_in_one">All in One</option>
<option value="separate_files">Separate Files</option>
<option value="qr_combined_a_separate">Combined Question Rubric, Separate Answer</option>
<option value="question_answer">Question and Answer</option>
</select>
<div class="file-input-section mt-4" id="file-input-section-${index}"></div>
</div>
`;
uploadRows.appendChild(newRow);

// Add change listener to new select element
document.getElementById(`upload_type_${index}`).addEventListener('change', function() {
toggleFileInputs(this, index);
});
});

// Function to toggle file inputs based on selected upload type
function toggleFileInputs(selectElement, index) {
const uploadType = selectElement.value;
const fileInputSection = document.getElementById(`file-input-section-${index}`);
fileInputSection.innerHTML = ''; // Clear existing inputs

if (uploadType === 'all_in_one') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700">Upload All in One File:</label>
<input type="file" name="files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
`;
} else if (uploadType === 'separate_files') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700">Upload Question File:</label>
<input type="file" name="question_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<label class="block text-sm font-medium text-gray-700 mt-2">Upload Answer File:</label>
<input type="file" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<label class="block text-sm font-medium text-gray-700 mt-2">Upload Rubric File:</label>
<input type="file" name="rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
`;
} else if (uploadType === 'qr_combined_a_separate') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700">Upload Combined Question and Rubric File:</label>
<input type="file" name="question_rubric_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<label class="block text-sm font-medium text-gray-700 mt-2">Upload Answer File:</label>
<input type="file" name="answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
`;
} else if (uploadType === 'question_answer') {
fileInputSection.innerHTML = `
<label class="block text-sm font-medium text-gray-700">Upload Question and Answer File:</label>
<input type="file" name="question_answer_files[]" accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
`;
}
}

// Trigger the first row addition on load
document.getElementById('addUploadRow').click();
});
</script>
</body>
</html>


</code></pre>
 

Latest posts

A
Replies
0
Views
1
AgencyAnalytics
A
S
Replies
0
Views
1
Stacker Media
S
C
Replies
0
Views
1
CC.Talent
C
Top