Update app/static/script.js

app/static/script.js

@@ -1,17 +1,13 @@
 // app/static/script.js
 document.addEventListener('DOMContentLoaded', () => {
-    // --- Constants and State ---
-    const CHUNK_SIZE = 4 * 1024 * 1024; // 4MB chunks
+    // --- State ---
     let currentFile = null;
-    let session = {}; // To hold session_id and token
-    let websocket = null;
+    let currentXHR = null; // To hold the request object for cancellation
 
     // --- 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'),
     };
@@ -39,7 +35,6 @@ document.addEventListener('DOMContentLoaded', () => {
     browseBtn.addEventListener('click', () => fileInput.click());
     fileInput.addEventListener('change', handleFileSelect);
     
-    // Drag and Drop
     dropZone.addEventListener('dragover', (e) => {
         e.preventDefault();
         dropZone.classList.add('drag-over');
@@ -48,16 +43,14 @@ document.addEventListener('DOMContentLoaded', () => {
     dropZone.addEventListener('drop', (e) => {
         e.preventDefault();
         dropZone.classList.remove('drag-over');
-        const files = e.dataTransfer.files;
-        if (files.length > 0) {
-            handleFileSelect({ target: { files: files } });
+        if (e.dataTransfer.files.length > 0) {
+            handleFileSelect({ target: { files: e.dataTransfer.files } });
         }
     });
 
     uploadAnotherBtn.addEventListener('click', resetUploader);
     retryBtn.addEventListener('click', resetUploader);
 
-
     // --- Core Functions ---
     function handleFileSelect(event) {
         const file = event.target.files[0];
@@ -67,104 +60,70 @@ document.addEventListener('DOMContentLoaded', () => {
         fileNameEl.textContent = file.name;
         fileSizeEl.textContent = formatBytes(file.size);
         
-        startUploadProcess(file);
+        startUpload(file);
     }
 
-    async function startUploadProcess(file) {
+    function startUpload(file) {
         switchState('uploading');
-        statusText.textContent = 'Creating secure session...';
+        statusText.textContent = 'Uploading...';
         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');
-                }
+        const formData = new FormData();
+        formData.append('file', file);
+
+        // We use XMLHttpRequest instead of fetch because it provides
+        // a native 'onprogress' event for tracking upload progress.
+        const xhr = new XMLHttpRequest();
+        currentXHR = xhr;
+
+        xhr.upload.addEventListener('progress', (event) => {
+            if (event.lengthComputable) {
+                const percentage = (event.loaded / event.total) * 100;
+                progressBar.style.width = `${percentage}%`;
+                statusText.textContent = `${formatBytes(event.loaded)} / ${formatBytes(event.total)}`;
             }
-        };
-        websocket.onerror = (error) => console.error('WebSocket Error:', error);
-        websocket.onclose = () => console.log('WebSocket closed.');
+        });
+
+        xhr.addEventListener('load', () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                const response = JSON.parse(xhr.responseText);
+                downloadLink.href = response.download_url;
+                downloadLink.download = response.filename; // Set the default download filename
+                switchState('complete');
+            } else {
+                handleUploadError(xhr);
+            }
+        });
+
+        xhr.addEventListener('error', () => handleUploadError(xhr));
+        xhr.addEventListener('abort', () => console.log('Upload aborted.'));
+
+        xhr.open('POST', '/upload', true);
+        xhr.send(formData);
     }
 
-    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 handleUploadError(xhr) {
+        let message = 'An unknown network error occurred.';
+        try {
+            const errorData = JSON.parse(xhr.responseText);
+            message = errorData.detail || 'Upload failed.';
+        } catch (e) {
+            // Response was not JSON, use status text
+            if (xhr.statusText) {
+                message = xhr.statusText;
             }
         }
-    }
-    
-    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() {
+        if (currentXHR) {
+            currentXHR.abort(); // Cancel any ongoing upload
+            currentXHR = null;
+        }
         currentFile = null;
-        session = {};
         fileInput.value = ''; // Reset file input
-        if (websocket) websocket.close();
         switchState('initial');
     }