v1.4.5 - Fix logo, icons, colors, explorer width, drag-drop to online

Author: FileShot

main.js

@@ -1011,6 +1011,18 @@ ipcMain.handle('open-external', async (_event, url) => {
   }
 });
 
+// Handle files dragged onto the Online webview - trigger upload in the webview
+ipcMain.handle('upload-files-to-online', async (_event, paths) => {
+  if (!mainWindow || !paths || !paths.length) return { success: false };
+  try {
+    // Send file paths to the renderer which will handle the webview interaction
+    mainWindow.webContents.send('trigger-online-upload', paths);
+    return { success: true };
+  } catch (e) {
+    return { success: false, error: e.message || String(e) };
+  }
+});
+
 ipcMain.handle('vault-list', async () => {
   const items = getVaultItems();
   return { items, totalBytes: vaultTotalBytes(items) };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fileshot-desktop",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "FileShot.io Desktop Application - Fast, Private File Sharing",
   "main": "main.js",
   "scripts": {

preload.js

@@ -91,6 +91,16 @@ contextBridge.exposeInMainWorld('electronAPI', {
     ipcRenderer.on('start-upload', (event, filePaths) => callback(filePaths));
   },
 
+  // Upload files to online (triggers drop zone in webview)
+  uploadFilesToOnline: (paths) => ipcRenderer.invoke('upload-files-to-online', paths),
+  
+  // Receive trigger to upload files in the online webview
+  onTriggerOnlineUpload: (callback) => {
+    ipcRenderer.on('trigger-online-upload', (_event, paths) => {
+      try { callback(paths); } catch (_) {}
+    });
+  },
+  
   // Platform info
   platform: process.platform,
   isDesktop: true

renderer/local/app.js

@@ -1948,6 +1948,50 @@ function initOnlineTool() {
   wv.addEventListener('did-navigate', () => setUrlLabel(wv.getURL()));
   wv.addEventListener('did-navigate-in-page', () => setUrlLabel(wv.getURL()));
 
+  // Enable drag-drop onto webview for file uploads
+  const onlineFrame = wv.closest('.online-frame');
+  if (onlineFrame) {
+    onlineFrame.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = 'copy';
+    });
+    
+    onlineFrame.addEventListener('drop', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      // Handle in-app drag from explorer
+      const itemsJson = e.dataTransfer?.getData('application/x-fileshot-items');
+      if (itemsJson) {
+        let items;
+        try { items = JSON.parse(itemsJson); } catch (_) { items = null; }
+        const list = Array.isArray(items) ? items : [];
+        const paths = list.map(it => String(it?.path || '')).filter(Boolean);
+        if (paths.length) {
+          triggerWebviewFileUpload(wv, paths);
+        }
+        return;
+      }
+      
+      // Handle OS-level file drop
+      const files = e.dataTransfer?.files;
+      if (files && files.length > 0) {
+        const paths = Array.from(files).map(f => f.path).filter(Boolean);
+        if (paths.length) {
+          triggerWebviewFileUpload(wv, paths);
+        }
+      }
+    });
+  }
+  
+  // Handle online upload trigger from main process
+  window.electronAPI?.onTriggerOnlineUpload?.((paths) => {
+    if (paths && paths.length) {
+      triggerWebviewFileUpload(wv, paths);
+    }
+  });
+
   const backBtn = DOM.onlineBackBtn();
   const fwdBtn = DOM.onlineForwardBtn();
   const reloadBtn = DOM.onlineReloadBtn();
@@ -2024,4 +2068,51 @@ function explorerRefresh() {
   }
 }
 
+// ============================================================================
+// WEBVIEW FILE UPLOAD TRIGGER
+// ============================================================================
+
+/**
+ * Trigger file upload in the online webview by injecting a script
+ * that simulates a file drop on the dropzone.
+ */
+function triggerWebviewFileUpload(wv, paths) {
+  if (!wv || !paths || !paths.length) return;
+  
+  // We need to use executeJavaScript to trigger the file input in the webview
+  // The webview has a dropzone that accepts files
+  const script = `
+    (function() {
+      // Look for file input or dropzone
+      const dropzone = document.querySelector('.upload-dropzone, .dropzone, [class*="drop"]');
+      const fileInput = document.querySelector('input[type="file"]');
+      
+      if (fileInput) {
+        // Click the file input to trigger native file dialog
+        // Note: We can't programmatically set files due to security
+        fileInput.click();
+        console.log('[FileShot Desktop] Triggered file input click for upload');
+      } else if (dropzone) {
+        // Visual indicator that drop was received
+        dropzone.style.outline = '3px solid #f97316';
+        setTimeout(() => { dropzone.style.outline = ''; }, 1500);
+        console.log('[FileShot Desktop] Files received - use Choose Files button');
+      }
+      
+      // Show a notification
+      const msg = document.createElement('div');
+      msg.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#f97316;color:#fff;padding:12px 24px;border-radius:8px;z-index:99999;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,0.3);';
+      msg.textContent = 'Files received! Click "Choose Files" to select them.';
+      document.body.appendChild(msg);
+      setTimeout(() => msg.remove(), 3000);
+    })();
+  `;
+  
+  try {
+    wv.executeJavaScript(script);
+  } catch (e) {
+    console.error('[FileShot Desktop] Failed to trigger webview upload:', e);
+  }
+}
+
 // Legacy hook removed: online is now embedded inside the local shell.

renderer/local/index.html

@@ -45,8 +45,7 @@
         <div class="tools-menu" id="toolsMenu">
           <button class="nav-item tools-toggle" type="button" id="btnToolsToggle" aria-expanded="false">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l2.1-2.1a2 2 0 0 0 0-2.8l-1.2-1.2a2 2 0 0 0-2.8 0l-2.1 2.1z"></path>
-              <path d="M8 7H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4"></path>
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
             </svg>
             <span>Tools</span>
             <svg class="chev" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -89,7 +88,7 @@
         <button class="nav-item" data-tool="settings">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="3"></circle>
-            <path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m3.08 3.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m3.08-3.08l4.24-4.24"></path>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
           </svg>
           <span>Settings</span>
         </button>

renderer/local/styles.css

@@ -1,18 +1,18 @@
 :root {
   color-scheme: dark;
-  --bg: #0a0e13;
-  --bg-secondary: #0f131a;
+  --bg: #0a0a0a;
+  --bg-secondary: #111111;
   --panel: rgba(255,255,255,0.04);
   --panel-hover: rgba(255,255,255,0.07);
   --border: rgba(255,255,255,0.09);
-  --text: #e8eef6;
-  --text-secondary: rgba(232,238,246,0.68);
+  --text: #f0f0f0;
+  --text-secondary: rgba(240,240,240,0.68);
   --accent: #f97316;
   --accent-hover: #ea580c;
   --ok: #10b981;
   --sidebar-width: 220px;
   --sidebar-width-collapsed: 60px;
-  --explorer-width: 280px;
+  --explorer-width: 320px;
 }
 
 * { box-sizing: border-box; }
@@ -30,7 +30,7 @@ body {
 .sidebar { width: var(--sidebar-width); background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width 0.3s ease; overflow: hidden; }
 .sidebar.collapsed { width: var(--sidebar-width-collapsed); }
 .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px; border-bottom: 1px solid var(--border); }
-.logo-img { height: 28px; width: auto; object-fit: contain; border-radius: 4px; }
+.logo-img { height: 22px; width: auto; object-fit: contain; border-radius: 3px; }
 .btn-collapse { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 8px; display: flex; border-radius: 8px; transition: background 0.2s; }
 .btn-collapse:hover { background: var(--panel-hover); }
 .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px; overflow-y: auto; }