WORD to
SCORM Converter

Transform Your Document into a Course ```css .file-icons-container { display: flex; justify-content: center; align-items: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .file-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } ``` Upload Your File Choose a file or simply drag it here. Please note that files should be no larger than 20MB. Uploading... JavaScript Code for File Upload ```javascript const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const uploadContent = document.getElementById('uploadContent'); const uploadStatus = document.getElementById('uploadStatus'); const uploadingStatus = document.getElementById('uploadingStatus'); const statusText = document.getElementById('statusText'); const uploadForm = document.getElementById('uploadForm'); const uploadFileInput = document.getElementById('uploadFileInput'); // Function to generate a unique token function generateUniqueToken() { const timestamp = Date.now().toString(36); const randomPart = Math.random().toString(36).substring(2, 10); return `user_${timestamp}_${randomPart}`; } // Initialize form fields on page load document.addEventListener('DOMContentLoaded', () => { const token = generateUniqueToken(); document.getElementById('user_token').value = token; document.getElementById('page_url').value = window.location.href; document.getElementById('referrer_url').value = document.referrer || 'Direct Visit'; }); // Enable click-to-upload functionality dropZone.addEventListener('click', () => { uploadFileInput.click(); }); // Prevent default drag behaviors on the drop zone and document body ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropZone.addEventListener(eventName, preventDefaults, false); document.body.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } // Highlight the drop zone during drag over ['dragenter', 'dragover'].forEach(eventName => { dropZone.addEventListener(eventName, () => { dropZone.classList.add('drag-over'); }, false); }); ['dragleave', 'drop'].forEach(eventName => { dropZone.addEventListener(eventName, () => { dropZone.classList.remove('drag-over'); }, false); }); // Handle files dropped into the drop zone dropZone.addEventListener('drop', (e) => { const dt = e.dataTransfer; const files = dt.files; if (files.length > 0) { processFile(files[0]); // Process only the first file } }); // Handle file selection through the hidden form input uploadFileInput.addEventListener('change', (e) => { const file = e.target.files && e.target.files[0]; if (file) { processFile(file); } }); function processFile(file) { if (!file) return; // Check file size limit (20MB) const maxSize = 20 * 1024 * 1024; // 20MB if (file.size > maxSize) { alert('File size exceeds 20MB limit!'); uploadFileInput.value = ''; return; } // Validate file type const allowedExtensions = ['.ppt', '.pptx', '.doc', '.docx', '.pdf', '.txt', '.mp4']; const fileName = file.name.toLowerCase(); const isValidType = allowedExtensions.some(ext => fileName.endsWith(ext)); if (!isValidType) { alert('Please upload a valid file type: PPT, PPTX, DOC, DOCX, PDF, TXT, or MP4'); uploadFileInput.value = ''; return; } // Display uploading status uploadContent.classList.add('hidden'); uploadStatus.classList.add('hidden'); uploadingStatus.classList.remove('hidden'); dropZone.classList.add('uploading'); // Set file name in hidden input document.getElementById('file_name').value = file.name; // Use DataTransfer to set the file const dataTransfer = new DataTransfer(); dataTransfer.items.add(file); uploadFileInput.files = dataTransfer.files; // Log file details console.log('Uploading file:'); console.log(`- Name: ${file.name}`); console.log(`- Size: ${(file.size / 1024).toFixed(2)} KB`); console.log(`- Type: ${file.type}`); // Submit the form to the server uploadForm.submit(); // Note: After form submission, the page will either redirect or reload. // To handle the response via AJAX, this approach would need modification. } ```