Create app/static/script.js

app/static/script.js

@@ -0,0 +1,183 @@
+// app/static/script.js
+document.addEventListener('DOMContentLoaded', () => {
+    // --- Constants and State ---
+    const CHUNK_SIZE = 4 * 1024 * 1024; // 4MB chunks
+    let currentFile = null;
+    let session = {}; // To hold session_id and token
+    let websocket = null;
+
+    // --- DOM Elements ---
+    const uploaderCard = document.getElementById('uploader-card');
+    const states = {
+        initial: document.getElementById('state-initial'),
+        uploading: document.getElementById('state-uploading'),
+        assembling: document.getElementById('state-assembling'),
+        complete: document.getElementById('state-complete'),
+        error: document.getElementById('state-error'),
+    };
+    const dropZone = document.getElementById('drop-zone');
+    const browseBtn = document.getElementById('browse-btn');
+    const fileInput = document.getElementById('file-input');
+    const fileNameEl = document.getElementById('file-name');
+    const fileSizeEl = document.getElementById('file-size');
+    const progressBar = document.getElementById('progress-bar');
+    const statusText = document.getElementById('status-text');
+    const downloadLink = document.getElementById('download-link');
+    const uploadAnotherBtn = document.getElementById('upload-another-btn');
+    const errorMessage = document.getElementById('error-message');
+    const retryBtn = document.getElementById('retry-btn');
+
+    // --- UI State Management ---
+    function switchState(state) {
+        Object.values(states).forEach(el => el.classList.remove('active'));
+        if (states[state]) {
+            states[state].classList.add('active');
+        }
+    }
+
+    // --- Event Listeners ---
+    browseBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', handleFileSelect);
+    
+    // Drag and Drop
+    dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('drag-over');
+    });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            handleFileSelect({ target: { files: files } });
+        }
+    });
+
+    uploadAnotherBtn.addEventListener('click', resetUploader);
+    retryBtn.addEventListener('click', resetUploader);
+
+
+    // --- Core Functions ---
+    function handleFileSelect(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+        
+        currentFile = file;
+        fileNameEl.textContent = file.name;
+        fileSizeEl.textContent = formatBytes(file.size);
+        
+        startUploadProcess(file);
+    }
+
+    async function startUploadProcess(file) {
+        switchState('uploading');
+        statusText.textContent = 'Creating secure session...';
+        progressBar.style.width = '0%';
+
+        try {
+            // 1. Create a new session
+            const response = await fetch('/sessions', { method: 'POST' });
+            if (!response.ok) throw new Error('Failed to create session.');
+            session = await response.json();
+
+            // 2. Setup WebSocket for progress
+            setupWebSocket();
+
+            // 3. Start uploading chunks
+            await uploadFileInChunks(file);
+            
+            // 4. Finalize the upload
+            statusText.textContent = 'Finalizing upload...';
+            const completeResponse = await fetch(`/complete/${session.session_id}`, { method: 'POST' });
+            if (!completeResponse.ok) throw new Error('Failed to finalize upload.');
+            
+            const result = await completeResponse.json();
+            downloadLink.href = result.download_url;
+
+        } catch (error) {
+            console.error('Upload process failed:', error);
+            showError(error.message);
+        }
+    }
+    
+    function setupWebSocket() {
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${wsProtocol}//${window.location.host}/ws/${session.session_id}`;
+        websocket = new WebSocket(wsUrl);
+
+        websocket.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            if (data.type === 'progress') {
+                updateProgress(data.uploaded_bytes, data.total_bytes);
+                if(data.status === 'assembling') {
+                    switchState('assembling');
+                } else if(data.status === 'completed') {
+                    switchState('complete');
+                }
+            }
+        };
+        websocket.onerror = (error) => console.error('WebSocket Error:', error);
+        websocket.onclose = () => console.log('WebSocket closed.');
+    }
+
+    async function uploadFileInChunks(file) {
+        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+        for (let i = 0; i < totalChunks; i++) {
+            const start = i * CHUNK_SIZE;
+            const end = Math.min(start + CHUNK_SIZE, file.size);
+            const chunk = file.slice(start, end);
+            
+            const formData = new FormData();
+            formData.append('file', chunk, file.name);
+
+            const url = `/upload/${session.session_id}?chunk_index=${i}&total_size=${file.size}`;
+            
+            statusText.textContent = `Uploading chunk ${i + 1} of ${totalChunks}...`;
+            
+            const response = await fetch(url, {
+                method: 'PUT',
+                body: formData,
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.detail || 'Chunk upload failed.');
+            }
+        }
+    }
+    
+    function updateProgress(uploaded, total) {
+        if (total > 0) {
+            const percentage = (uploaded / total) * 100;
+            progressBar.style.width = `${percentage}%`;
+            statusText.textContent = `${formatBytes(uploaded)} / ${formatBytes(total)}`;
+        }
+    }
+
+    function showError(message) {
+        errorMessage.textContent = message;
+        switchState('error');
+    }
+
+    function resetUploader() {
+        currentFile = null;
+        session = {};
+        fileInput.value = ''; // Reset file input
+        if (websocket) websocket.close();
+        switchState('initial');
+    }
+
+    // --- Helper ---
+    function formatBytes(bytes, decimals = 2) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    }
+
+    // --- Initial State ---
+    switchState('initial');
+});