feat: Add POST method file sharing support to Share Target API (#101)

CHANGELOG.md

@@ -14,6 +14,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Share Target POST Method & File Sharing** (#101)
+  - Extended Share Target API to support POST method with file uploads
+  - Created `ShareTarget` page component with file preview and validation
+  - Extended `useShareTarget` hook to handle files from sessionStorage
+  - Implemented custom Service Worker (`sw.ts`) with `injectManifest` strategy
+  - Service Worker processes FormData, converts images to Base64 for preview
+  - File validation: type (images, PDFs, docs) and size (max 10MB)
+  - Support for combined text + file sharing in single share action
+  - Image preview with thumbnails for shared photos
+  - File metadata display (name, size, type badge)
+  - Clear button to remove all shared data
+  - Updated `PWA_PHASE3_TESTING.md` with comprehensive file sharing test scenarios
+  - Part of PWA Phase 3 (Epic #64)
+
 - **Code Coverage Integration** (#137)
   - Integrated Codecov for automated coverage tracking
   - Vitest now generates LCOV and Clover coverage reports

PWA_PHASE3_TESTING.md

@@ -92,49 +92,110 @@ This document describes how to test the new PWA Phase 3 features locally.
 
 ### Share Target Components
 
-- PWA Manifest Share Target Config
-- URL Parameter Parsing
+- PWA Manifest Share Target Config (GET + POST methods)
+- URL Parameter Parsing (GET method - text only)
+- FormData Parsing (POST method - files + text)
+- Service Worker File Processing
 - Shared Data Hook (`useShareTarget`)
+- File Preview and Validation
 
 ### How to Test Share Target
 
+#### Method 1: Text Sharing (GET - Simple)
+
 1. **Install PWA**
 
    ```bash
    # Chrome: Address bar → "Install" icon
    # Or: DevTools → Application → Manifest → "Install"
    ```
 
-2. **Share from another app**
-   - **Option A (Desktop):** Right-click on image → "Share" → Select SecPal
+2. **Share text from another app**
+   - **Option A (Desktop):** Right-click on text/link → "Share" → Select SecPal
    - **Option B (Mobile):** Browser share button → Select SecPal
    - **Option C (Test URL):** Manually open:
 
      ```text
      http://localhost:5173/share?title=Test&text=Hello&url=https://example.com
      ```
 
-3. **Test hook integration**
+3. **Verify text display**
+   - App opens at `/share` route
+   - Title, text, and URL are displayed
+   - URL parameters are cleaned from address bar
+
+#### Method 2: File Sharing (POST - Advanced)
+
+1. **Install PWA** (same as above)
+
+2. **Share files from another app**
+   - **Option A (Desktop):** Right-click on image/PDF → "Share" → Select SecPal
+   - **Option B (Mobile):** Gallery/Files app → Share button → Select SecPal
+   - **Option C (Test with multiple files):** Select multiple files → Share → SecPal
+
+3. **Verify file handling**
+   - App opens at `/share` route
+   - Files are listed with name, size, type badge
+   - Image files show preview thumbnails
+   - PDF/DOC files show file icon
+   - File size is displayed (e.g., "1.2 MB")
+
+4. **Test file validation**
+   - Try sharing `.exe` or unsupported file → Error message shown
+   - Try sharing file >10MB → Error "File too large. Maximum 10MB"
+   - Only valid files (images, PDFs, .doc, .docx) are accepted
+
+5. **Check Service Worker processing**
+
+   ```bash
+   # Chrome DevTools → Application → Service Workers
+   # Status should be "activated and is running"
+   # Console → Check for Service Worker messages:
+   # "Processing shared files: 2 files"
+   ```
+
+6. **Check sessionStorage**
+
+   ```bash
+   # DevTools → Application → Storage → Session Storage
+   # Key: share-target-files
+   # Value: JSON array with file metadata + Base64 previews
+   ```
+
+7. **Test combined sharing**
+   - Share files + text together
+   - Example: Share image with caption
+   - Both text and files should appear
+
+8. **Test hook integration**
 
    ```tsx
    // In a component:
-   const { sharedData, isSharing, clearSharedData } = useShareTarget();
+   const { sharedData, clearSharedData } = useShareTarget();
 
    useEffect(() => {
      if (sharedData) {
        console.log("Shared data:", sharedData);
-       // Handle: sharedData.title, sharedData.text, sharedData.url
+       // Handle text: sharedData.title, sharedData.text, sharedData.url
+       // Handle files: sharedData.files (array of SharedFile objects)
        clearSharedData();
      }
    }, [sharedData]);
    ```
 
 ### Share Target - Success Criteria
 
-- ✅ SecPal appears in OS share menu
+- ✅ SecPal appears in OS share menu (both text and file options)
+- ✅ **GET method:** Text sharing works (title, text, url)
+- ✅ **POST method:** File sharing works (images, PDFs, docs)
+- ✅ Files are validated (type + size limits)
+- ✅ Image previews are generated (Base64 thumbnails)
+- ✅ Service Worker processes FormData correctly
 - ✅ App opens with `/share` route
-- ✅ `useShareTarget` detects shared data
+- ✅ `useShareTarget` detects shared data (text + files)
 - ✅ URL is cleaned to `/` after processing
+- ✅ sessionStorage stores file metadata
+- ✅ Clear button removes all shared data
 
 ---
 

eslint.config.js

@@ -8,7 +8,14 @@ import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ["dist", "src/locales/**/*.js", "src/locales/**/*.mjs"] },
+  {
+    ignores: [
+      "dist",
+      "coverage",
+      "src/locales/**/*.js",
+      "src/locales/**/*.mjs",
+    ],
+  },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ["**/*.{ts,tsx}"],

package.json

@@ -34,7 +34,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --cache",
     "typecheck": "tsc --noEmit",
     "test": "vitest",
-    "test:run": "vitest run --bail=1 --reporter=verbose",
+    "test:run": "vitest run --bail=1",
     "test:run:all": "vitest run --reporter=verbose",
     "test:related": "vitest related --run --bail=1",
     "test:ui": "vitest --ui",

scripts/preflight.sh

@@ -158,10 +158,27 @@ elif [ -f package-lock.json ] && command -v npm >/dev/null 2>&1; then
   npm run --if-present typecheck
 
   # Run only tests related to changed files for faster feedback
+  # Use timeout to prevent hanging tests (max 5 minutes)
   if [ -n "$CHANGED_FILES" ] && echo "$CHANGED_FILES" | grep -qE '\.(ts|tsx|js|jsx)$'; then
-    npm run --if-present test:related
+    timeout 300 npm run --if-present test:related || {
+      EXIT_CODE=$?
+      if [ $EXIT_CODE -eq 124 ]; then
+        echo "❌ Tests timed out after 5 minutes" >&2
+        exit 1
+      else
+        exit $EXIT_CODE
+      fi
+    }
   elif [ -z "$CHANGED_FILES" ]; then
-    npm run --if-present test:run
+    timeout 300 npm run --if-present test:run || {
+      EXIT_CODE=$?
+      if [ $EXIT_CODE -eq 124 ]; then
+        echo "❌ Tests timed out after 5 minutes" >&2
+        exit 1
+      else
+        exit $EXIT_CODE
+      fi
+    }
   else
     echo "No source files changed, skipping tests"
   fi

src/App.tsx

@@ -7,6 +7,7 @@ import { Link } from "./components/link";
 import { OfflineIndicator } from "./components/OfflineIndicator";
 import { LanguageSwitcher } from "./components/LanguageSwitcher";
 import { SyncStatusIndicator } from "./components/SyncStatusIndicator";
+import { ShareTarget } from "./pages/ShareTarget";
 import { getApiBaseUrl } from "./config";
 
 function Home() {
@@ -60,6 +61,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
+          <Route path="/share" element={<ShareTarget />} />
         </Routes>
       </div>
       <OfflineIndicator />