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
<!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">×</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:
<!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>