Upload 17 files

dashboardlogic.js

@@ -1,4 +1,4 @@
-// import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
 
 // Read/write tokens from sessionStorage
 function getReadToken() {
@@ -8,7 +8,7 @@ function getWriteToken() {
     return sessionStorage.getItem('hf_write_token') || '';
 }
 
-// Helper to add tokens to every API call (kept for compatibility, but not used for server tokens)
+// Helper to add tokens to every API call
 function withTokens(obj = {}) {
     return {
         ...obj,
@@ -17,17 +17,6 @@ function withTokens(obj = {}) {
     };
 }
 
-// Helper to call secure server-side proxy
-async function callSecureApi(fn, args) {
-    const resp = await fetch('/api/proxy', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ fn, args })
-    });
-    if (!resp.ok) throw new Error('Proxy error: ' + resp.status);
-    return await resp.json();
-}
-
 let client;
 let currentUser = null;
 let currentPassword = null;
@@ -63,13 +52,18 @@ async function initDashboard() {
     }
     
     try {
+        client = await Client.connect("pockit-cloud/main");
+        console.log('✓ Connected to API');
+        
         // Update account info
         const initials = currentUser.substring(0, 2).toUpperCase();
         document.querySelector('.avatar').textContent = initials;
         document.querySelector('.account-name').textContent = currentUser;
+        
         // Load data
         await loadUserData();
         await loadFiles();
+        
     } catch (err) {
         console.error('Init error:', err);
         showToast('Connection failed');
@@ -81,29 +75,38 @@ async function initDashboard() {
 async function loadUserData() {
     try {
         console.log('Loading user data...');
-        const result = await callSecureApi("/search_user", withTokens({ user_id: currentUser }));
+        const result = await client.predict("/search_user", withTokens({ user_id: currentUser }));
         const [log, isDev, isPro, isTester, capacityUsed, usedTotal] = result.data;
-        // ...existing code...
+        
+        // Determine role
         let role = 'free';
         if (isDev) role = 'dev';
         else if (isPro) role = 'pro';
         else if (isTester) role = 'tester';
+        
         const tag = document.getElementById('role-tag');
         tag.className = 'role-tag ' + role;
         tag.textContent = role.charAt(0).toUpperCase() + role.slice(1);
         document.getElementById('tier-val').textContent = tag.textContent;
+        
+        // Parse capacity
         const capacityPercent = Math.round(capacityUsed);
         let usedDisplay = usedTotal || '0 / 5 GB';
         let usedParts = usedDisplay.split('/');
         let usedAmount = usedParts[0].trim();
         let maxAmount = usedParts[1] ? usedParts[1].trim() : '5 GB';
+        
+        // Update storage displays
         document.querySelector('.card-bar-fill').style.width = capacityPercent + '%';
         document.querySelector('.stor-label span:last-child').textContent = usedDisplay;
         document.querySelector('.sbar-fill').style.width = capacityPercent + '%';
+        
         const storageCard = document.querySelectorAll('.card')[0];
-        storageCard.querySelector('.card-val').innerHTML = usedAmount + ' <span style="font-size:.38em;font-weight:400;color:rgba(0,0,0,.38)">( ' + capacityPercent + '%)</span>';
+        storageCard.querySelector('.card-val').innerHTML = usedAmount + ' <span style="font-size:.38em;font-weight:400;color:rgba(0,0,0,.38)">(' + capacityPercent + '%)</span>';
         storageCard.querySelector('.card-sub').textContent = usedDisplay + ' used';
+        
         document.querySelectorAll('.card')[3].querySelector('.card-sub').textContent = maxAmount + ' max capacity';
+        
         console.log('✓ User data loaded');
     } catch (err) {
         console.error('User data error:', err);
@@ -119,21 +122,26 @@ async function loadFiles() {
     try {
         console.log('Loading files...');
         loading(true);
-        const result = await callSecureApi("/get_files_secure", withTokens({
+        const result = await client.predict("/get_files_secure", withTokens({
             user_id: currentUser,
             password: currentPassword,
         }));
         // API returns [dropdown, status]
         const dropdownData = result.data[0];
+        console.log('Raw dropdownData:', dropdownData);
         let fileNames = [];
         if (dropdownData && typeof dropdownData === 'object' && dropdownData.choices) {
+            // Flatten all sub-arrays in choices
             fileNames = dropdownData.choices.flat ? dropdownData.choices.flat() : [].concat(...dropdownData.choices);
         } else if (Array.isArray(dropdownData)) {
             fileNames = dropdownData;
         } else if (typeof dropdownData === 'string') {
             fileNames = [dropdownData];
         }
+        // Convert all to string, trim, and filter empty
         fileNames = fileNames.map(f => String(f).trim()).filter(Boolean);
+        console.log('Extracted fileNames from dropdown:', fileNames);
+        // Deduplicate file names (case-insensitive, trim)
         const seen = new Set();
         const deduped = [];
         for (const name of fileNames) {
@@ -151,13 +159,15 @@ async function loadFiles() {
                 size: '—',
                 date: 'Recently',
                 type: ext ? ext.toUpperCase() : '',
-                preview: null
+                preview: null // for preview content
             };
         });
+        console.log('Final files array before render:', files);
         selected.clear();
         updateStatsCards();
         render(files);
         loading(false);
+        console.log('✓ Files loaded and rendered');
     } catch (err) {
         console.error('Files load error:', err);
         loading(false);
@@ -331,9 +341,9 @@ async function loadPreviewContent(file) {
 function escapeHtml(str) {
     return String(str)
         .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
+        .replace(/</g, '<')
+        .replace(/>/g, '>')
+        .replace(/"/g, '"')
         .replace(/'/g, '&#39;');
 }
 
@@ -344,18 +354,25 @@ async function deleteFile(id) {
     
     try {
         loading(true);
-        const result = await callSecureApi("/delete_file_secure", withTokens({
+        const result = await client.predict("/delete_file_secure", withTokens({
             user_id: currentUser,
             password: currentPassword,
             filename: file.name,
         }));
+        
+        console.log('Deleted:', file.name);
+        
+        // Update storage
         const [status, capacityUsed, usedTotal] = result.data;
         const percent = Math.round(capacityUsed);
         document.querySelector('.card-bar-fill').style.width = percent + '%';
         document.querySelector('.sbar-fill').style.width = percent + '%';
         document.querySelector('.stor-label span:last-child').textContent = usedTotal;
+        
+        // Remove from array
         files.splice(id, 1);
         selected.delete(id);
+        
         updateStatsCards();
         render(files);
         loading(false);
@@ -395,17 +412,43 @@ async function downloadFile(id) {
     const file = files[id];
     try {
         loading(true);
-        // Use /api/download endpoint to stream file securely
-        const url = `/api/download?file=${encodeURIComponent(file.name)}`;
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = file.name;
-        document.body.appendChild(a);
-        a.click();
-        setTimeout(() => {
-            document.body.removeChild(a);
-        }, 100);
-        showToast('Download started: ' + file.name);
+        // Use /get_download_link_action to get the raw download link
+        const result = await client.predict("/get_download_link_action", withTokens({
+            user_id: currentUser,
+            password: currentPassword,
+            filename: file.name,
+        }));
+        const fileUrl = result.data[0];
+        if (typeof fileUrl === 'string' && (fileUrl.startsWith('http') || fileUrl.startsWith('https'))) {
+            // Fetch as blob to force download, with optional Hugging Face token
+            const hfToken = sessionStorage.getItem('hf_read_token');
+            const fetchOptions = hfToken ? {
+                headers: { 'Authorization': 'Bearer ' + hfToken }
+            } : {};
+            const response = await fetch(fileUrl, fetchOptions);
+            if (!response.ok) {
+                console.error('Download fetch error:', {
+                    url: fileUrl,
+                    status: response.status,
+                    statusText: response.statusText
+                });
+                throw new Error('Network response was not ok (status ' + response.status + '): ' + response.statusText);
+            }
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = file.name;
+            document.body.appendChild(a);
+            a.click();
+            setTimeout(() => {
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            }, 100);
+            showToast('Download started: ' + file.name);
+        } else {
+            showToast('Download link error');
+        }
         loading(false);
     } catch (err) {
         console.error('Download error:', err);
@@ -426,33 +469,31 @@ async function downloadPreviewFile() {
 async function handleUpload(input) {
     if (!input.files || !input.files[0]) return;
     const file = input.files[0];
-    loading(true);
-    const formData = new FormData();
-    formData.append('file', file);
-    formData.append('user_id', currentUser);
-    formData.append('password', currentPassword);
-    // custom_name optional - use file.name
-    formData.append('custom_name', file.name);
     try {
-        const resp = await fetch('/api/upload', {
-            method: 'POST',
-            body: formData
-        });
-        if (!resp.ok) {
-            const err = await resp.json();
-            throw new Error(err.error || 'Upload failed');
-        }
-        const result = await resp.json();
-        showToast(`Uploaded: ${file.name}`);
-        input.value = '';
-        // Refresh files
+        loading(true);
+        // Use File object and pass custom_name for filename preservation
+        console.log('Uploading file:', file, 'type:', file.constructor.name);
+        const result = await client.predict("/upload_file_secure", withTokens({
+            user_id: currentUser,
+            password: currentPassword,
+            filepath: file,
+            custom_name: file.name,
+        }));
+        console.log('Uploaded:', file.name);
+        // Update storage
+        const [status, capacityUsed, usedTotal] = result.data;
+        const percent = Math.round(capacityUsed);
+        document.querySelector('.card-bar-fill').style.width = percent + '%';
+        document.querySelector('.sbar-fill').style.width = percent + '%';
+        document.querySelector('.stor-label span:last-child').textContent = usedTotal;
+        // Reload files
         await loadFiles();
-        await loadUserData();
+        showToast(file.name + ' uploaded');
+        input.value = '';
     } catch (err) {
-        showToast('Upload failed: ' + err.message);
-        console.error(err);
-    } finally {
+        console.error('Upload error:', err);
         loading(false);
+        showToast('Upload failed');
     }
 }
 
@@ -587,4 +628,4 @@ window.logoutUser = logoutUser;
 window.openModal = openModal;
 window.closeModal = closeModal;
 window.loading = loading;
-window.showToast = showToast;
+window.showToast = showToast;