DropTus — High-performance Drag & Drop Uploader for Directus 'Files' and Collection Linker
A lightweight cross-platform desktop application built with Tauri v2, Vue 3, and Tailwind CSS v4 to streamline your headless CMS assets workflow.
DropTus is an independent, open-source desktop utility specifically tailored for Directus "Files" management. It solves the tedious workflow of uploading files and manually associating them with database tables by seamlessly merging "File Uploading" and "Collection Data Linkage & Metadata Maintenance" into one swift step. Drag and drop screenshots, documents, or media to upload them directly to the Directus server, automatically create corresponding records in your target Collection, and dynamically manage custom metadata before dropping. On success, the formatted link (Raw URL, Markdown, HTML, etc.) is copied to your clipboard instantly, providing developers and content creators with an extremely smooth, automated workflow.
Important
🛡️ Privacy & Security Guarantee
DropTus values your privacy 100%. Your Directus credentials (Email, Password, Static Tokens), server URLs, and upload templates are stored strictly on your local machine in the settings.json configuration file. This project does not utilize middleman cloud servers—all API requests are sent directly from your computer to your Directus instance.
- Seamless Switching: Configure and switch between multiple Directus servers, accounts, or tokens (e.g., Development, Staging, Production).
- Token Management: Safely encrypts and stores credentials, handling automatic token refresh in the background.
- Fault-Tolerant Keep-Alive: If a token refresh fails due to network hiccups or server restarts, the profile is simply flagged as expired. It will never delete your saved configuration.
- Folder Syncing: Integrates with Directus folder APIs to dynamically sync and target designated storage folders.
- Smart Renaming: Supports naming variables (like
{y}-{m}-{d}-{filename}-{rand:4}or{uuid:8}) to eliminate filename collisions. - MD5 Deduplication: Automatically computes MD5 hashes locally before uploading. If the file already exists on the server, it directly reuses the existing asset to save bandwidth and storage.
- S3/CDN Rewrite: If your Directus backend is set up with AWS S3 + CDN, you can specify a CDN URL prefix to rewrite asset links, bypassing backend proxy bandwidth bottlenecks.
- Automatic Binding: Create a database record in another Collection simultaneously upon file upload, linking the file ID to fields like
cover_image. - Dynamic Form Inputs: Input metadata fields (e.g., status, title, tags) in the UI before dragging. These fields are written directly into the Collection database upon upload.
- Multiple Output Formats: Supports
Raw URL,Markdown,HTML, andCustom Templates(e.g.,{url}?width=800). - Detailed Logs: A dedicated History Panel displays thumbnails, metadata, and handles single-copy or bulk-copy actions.
- Quick-Upload Tray Panel: Hide the panel automatically on blur, pin it always-on-top, and upload assets in seconds.
- Mac Traffic-Light Alignment: Sidebar layout reserves a
pt-12margin to align cleanly with native macOS traffic-light window controls. - Auto-Color Tray Icon: Leverages macOS Template Image mode to automatically toggle the menu bar icon color between black and white depending on light/dark mode.
- System-wide Text Selection Lock: Configured with
user-select: noneexcept for input elements, offering a native macOS desktop application feel. - Help Guide: An onboarding modal with no-emoji Lucide icons guiding users through profiles, templates, and advanced setups in their local language.
- Silent Background Auto-Check: Quietly compares local version with the latest GitHub releases in the background upon application startup.
- Manual Verification & Download: Trigger a manual update check within the Help modal. Once a new version is detected, a custom Update Modal pops up showing the latest release Changelog and provides a link to download.
flowchart TD
A[Drag & drop file] --> B{Local MD5 Check}
B -- Enabled --> C[Query Directus for matching MD5]
B -- Disabled --> F[Run Upload Flow]
C -- Exists --> D[Retrieve Existing File ID & URL]
C -- Not Found --> F[Run Upload Flow]
F --> G[Apply Renaming Pattern]
F --> H[Upload to Directus Storage]
H --> I[Retrieve New File ID & URL]
D --> J{Is Collection Linkage Active?}
I --> J
J -- Yes --> K[Create new record in target Collection\nWrite File ID & Dynamic Input Values]
J -- No --> L[Format Link]
K --> L
L --> M[Apply CDN Prefix Rewrite]
M --> N[Copy to Clipboard]
N --> O[Write to Local History]
O --> P[Trigger Upload Success Toast]
Ensure your machine has the following tools installed:
- Node.js (v18+ recommended)
- pnpm (Preferred package manager)
- Rust & Cargo (Required for Tauri v2 compilation)
Run the following command in the project root:
pnpm installLaunches front-end Vite HMR and opens the native Tauri window:
pnpm tauri devCompiles and packages the application for your local OS (.dmg/.app on macOS, .msi on Windows):
pnpm tauri build├── src/ # Front-end Vue 3 source code
│ ├── assets/ # CSS styles & static assets
│ ├── components/ # UI Components
│ │ ├── AuthManager.vue # Profile management (login, check-connections, token refresh)
│ │ ├── HistoryList.vue # Upload history (thumbnails, single/bulk copies, deletions)
│ │ ├── SettingsPanel.vue # Configuration templates (folders, rename, CDN, linkages)
│ │ ├── TrayPanel.vue # System tray mini uploader (alignment, auto-hide, quick drop)
│ │ └── UploadPanel.vue # Main uploader workspace (drop area, dynamic inputs)
│ ├── services/ # Backend connectors
│ │ ├── directus.ts # Directus APIs, login, check MD5, Collection associations
│ │ ├── store.ts # Tauri store syncing configurations locally
│ │ └── uploader.ts # Formatting links & clipboard handlers
│ ├── App.vue # Main layout, RWD sidebar, theme toggle, Help Modal
│ ├── main.ts # App entrypoint
│ └── style.css # Global Tailwind stylesheets & system selections lock
│
├── src-tauri/ # Tauri Rust desktop backend
│ ├── src/
│ │ ├── tray.rs # System tray menu and positioner panel configuration
│ │ └── lib.rs # Tauri setup, window initialization
│ ├── tauri.conf.json # Tauri window and capability settings
│ └── Cargo.toml # Rust dependency definitions
│
├── public/ # Public assets
│ └── logo.png # App Logo
│
└── package.json # Project packages & script definitions
DropTus 是一款專為 **Directus 「Files (檔案庫)」**設計的極速上傳輔助工具。它旨在解決傳統檔案上傳後需手動關聯資料表的繁瑣痛點，將「檔案上傳」與「Collection 資料連動建檔、Metadata 維護」兩大步驟融為一體。透過簡單的拖放，您不僅能將截圖、文件等檔案上傳至 Directus 伺服器，還能同步在目標 Collection 中自動新增關聯紀錄，並在拖放前動態填寫自訂的詮釋資料（Metadata）。上傳成功後，系統會自動在剪貼簿中寫入您所選定格式（Raw URL、Markdown、HTML 等）的超連結，為開發者、內容創作者提供極致絲滑的自動化工作流。
Important
🛡️ 隱私與安全聲明
DropTus 100% 尊重您的資料隱私。您的 Directus 連線憑證（Email、Password、Static Tokens）、伺服器網址以及所有上傳模板，皆僅儲存在您本機的 settings.json 設定檔中。本專案沒有任何中轉雲端伺服器，所有的 API 請求皆由您的本機直接發送到您的 Directus 伺服器，安全、私密且快速。
- 靈活切換：支援配置多組不同的 Directus 伺服器、帳號或 Token，滿足開發、測試與生產環境的流暢切換。
- 憑證自動整理：安全儲存憑證，並內建背景自動刷新憑證（Refresh Token）機制。
- 斷線容錯防刪：若因伺服器重啟或網路瞬斷導致刷新失敗，僅會將連線標記為過期並提示重新登入，絕對不會擅自刪除您已儲存的 Profile 設定資訊。
- 目錄同步：與 Directus 目錄 API 自動同步，可指定檔案上傳的目標資料夾。
- 彈性重命名：支援強大的檔名模板變數（如
{y}-{m}-{d}-{filename}-{rand:4}或{uuid:8}），從根本防範檔名衝突。 - MD5 防重複上傳：上傳前自動在本地計算檔案的 MD5 雜湊值並進行伺服器比對。若檔案已存在，則直接複用既有檔案，節省傳輸流量與伺服器空間。
- S3 CDN 網址改寫：若您的 Directus 後端配置了 S3 與 CDN 加速，可直接改寫生成的網址前綴，繞過 Directus 後端下載限制以加速載入。
- 自動建立關聯：上傳檔案後，自動在指定的 Collection 資料表中新增一筆數據（例如：文章封面、相簿紀錄），並將上傳的檔案 ID 寫入指定欄位（例如：
cover_image）。 - 動態欄位輸入：拖放檔案前，您可以直接在介面上輸入額外的欄位資料（如標題、分類或備註），系統會在上傳時一併寫入 Directus Collection。
- 多格式支援：提供
Raw URL、Markdown、HTML以及自訂樣板（例如{url}?width=800等參數擴充）。 - 一鍵背景傳送：檔案拖放完成後即刻完成上傳，並在系統通知的同時將格式化連結寫入剪貼簿。
- 詳細歷史紀錄：主視窗設有上傳歷史面板，支援縮圖預覽、一鍵複製單一連結，或批次一鍵複製（Copy All）所有選取連結。
- 極簡快速面板：支援系統托盤常駐，滑鼠點擊托盤圖示即可彈出快速上傳面板，點擊其他地方失焦會自動收合。
- 釘選功能 (Always on Top)：快速面板支援一鍵釘選，方便您在跨視窗拖放檔案時保持最上層顯示。
- Mac 交通號誌適配：採用現代 macOS 應用程式常見的「側邊欄高度通天」排版。側邊欄頂部預留適當高度，避讓並與 macOS 左上角的三色控制按鈕完美調和。
- 自適應 RWD 排版：當主視窗縮小至平板或手機尺寸時，側邊欄會自動切換為頂部橫向導覽列，並保留合理的安全邊距與排版寬度。
- 黑白自適應圖標：採用 macOS Template 模式加載托盤圖標，會根據系統 Menu Bar 的淺色/深色外觀自動著色為黑或白，呈現頂級原生視覺。
- 全域禁用文字選取：為非輸入區塊配置全域
user-select: none，操作手感與原生 macOS App 無異，告別網頁般粗糙的滑鼠選取藍底。 - 新手指引手冊 (Help Modal)：內建極簡、精緻的主視窗幫助彈窗，以無 Emoji 的專業 Lucide 圖標及步驟流程圖引導新手快速上手。
- 背景自動靜默檢查：應用程式啟動時，於背景無感比對本機版本與 GitHub 最新 Release 釋出版本。
- 手動一鍵更新檢測：在 Help 使用說明彈窗中，整合一鍵「檢查更新」功能。若有新版本，即會彈出精心設計的更新 Modal，展示詳細 Release Changelog 更新日誌，並提供直接下載頁面連結。
flowchart TD
A[拖放檔案至上傳區] --> B{本地 MD5 檢查}
B -- 啟用 MD5 查重 --> C[向 Directus 查詢相同 MD5 的檔案]
B -- 停用 MD5 查重 --> F[執行上傳流程]
C -- 檔案已存在 --> D[獲取現有檔案 ID & URL]
C -- 檔案不存在 --> F[執行上傳流程]
F --> G[套用命名模板重新命名]
G --> H[上傳檔案至 Directus File Storage]
H --> I[獲取新上傳檔案 ID & URL]
D --> J{檢查是否啟用 Collection 關聯}
I --> J
J -- 是 --> K[在指定 Collection 新增一筆紀錄\n寫入檔案 ID 與自訂動態欄位]
J -- 否 --> L[轉換連結格式]
K --> L
L --> M[套用 CDN 前綴改寫 / 連結格式化]
M --> N[自動寫入系統剪貼簿]
N --> O[寫入本地歷史紀錄]
O --> P[彈出系統上傳成功通知]
確保您的開發環境已安裝以下組件：
- Node.js (建議 v18 以上版本)
- pnpm (專案優先推薦的套件管理工具)
- Rust & Cargo (Tauri v2 編譯與底層 API 呼叫所需環境)
在專案根目錄下，使用 pnpm 進行依賴安裝：
pnpm install這會啟動前端 Vite 熱更新，並同步喚起 Tauri 桌面視窗：
pnpm tauri dev編譯並打包出本地端的正式安裝套件（在 macOS 下會產生安裝引導 .dmg 或 .app；Windows 下會產生 .msi）：
pnpm tauri build├── src/ # 前端 Vue 3 專案原始碼
│ ├── assets/ # 靜態資源 (CSS 樣式與基本圖片)
│ ├── components/ # UI 元件與面板
│ │ ├── AuthManager.vue # 伺服器 Profile 管理面板 (連線、登入、自動刷新 Token)
│ │ ├── HistoryList.vue # 歷史紀錄清單 (預覽、單一複製、批次複製、刪除紀錄)
│ │ ├── SettingsPanel.vue # 系統模板設定表單 (路徑、檔名變數、CDN、關聯資料表)
│ │ ├── TrayPanel.vue # 托盤快速上傳面板 (托盤定位、失焦關閉、極簡拖放)
│ │ └── UploadPanel.vue # 主視窗上傳工作區 (拖放區域、互斥下拉選單、動態欄位)
│ ├── services/ # 邏輯服務與底層 API
│ │ ├── directus.ts # Directus API 請求、登入、查重、Collection 關聯
│ │ ├── store.ts # tauri-plugin-store 本地設定檔讀寫同步
│ │ └── uploader.ts # 超連結格式化與剪貼簿操作
│ ├── App.vue # 主視窗自適應排版、側邊欄、精簡 Header、Help Modal
│ ├── main.ts # 前端進入點
│ └── style.css # 全域樣式、低調 Scrollbar、禁用選取與滾動優化
│
├── src-tauri/ # Tauri Rust 後端原始碼
│ ├── src/
│ │ ├── tray.rs # 系統托盤事件與 positioner 彈窗定位控制
│ │ └── lib.rs # Tauri 插件註冊、視窗初始化與配置
│ ├── tauri.conf.json # Tauri 視窗與打包權限設定
│ └── Cargo.toml # Rust 依賴配置
│
├── public/ # 靜態公共資源
│ └── logo.png # 應用程式 Logo
│
└── package.json # 專案依賴與腳本定義
- 資料隱私：DropTus 的所有配置資訊、連線密鑰與歷史紀錄均儲存於您的本機電腦。本軟體不包含任何第三方數據收集、上傳或追蹤代碼。
- 非官方工具：本專案為第三方獨立開源工具，並非由 Directus 官方團隊提供或維護。
- 免責聲明：使用者需自行承擔使用本軟體時可能產生的伺服器流量、檔案遺失或資料表寫入異常之風險。建議在使用 Collection 關聯寫入前，先於 Directus 測試環境進行測試。
如果您覺得 DropTus 對您的工作與開發有所幫助，歡迎點擊下方連結請作者喝杯咖啡！您的支持是專案持續維護與功能改進的最大動力：
This project is licensed under the MIT License.