share image

Author: tung@cloud.phamthanh.me

docs/pwa_share_image.md

@@ -0,0 +1,40 @@
+# Share Image Implementation in Feathernote
+
+## Overview
+Feathernote supports sharing images (e.g., screenshots) from Android devices directly into the app's 'Shared Inbox' note via the PWA Share Target API.
+
+## Manifest Configuration
+The `src/manifest.json` file is configured with a `share_target` block using `multipart/form-data`. The `params` field includes an `image` entry within a `files` array, which tells the browser to accept shared files matching `image/*`.
+
+```json
+"share_target": {
+  "action": "/share",
+  "method": "POST",
+  "enctype": "multipart/form-data",
+  "params": {
+    "title": "title",
+    "text": "text",
+    "url": "url",
+    "files": [
+      {
+        "name": "image",
+        "accept": ["image/*"]
+      }
+    ]
+  }
+}
+```
+
+## Service Worker Handling (`/share`)
+The `/share` handler in `src/serviceworker.js` processes incoming share requests:
+
+1.  **Extraction**: It extracts the `FormData` from the POST request.
+2.  **File Retrieval**: It retrieves the file using `data.get('image')`.
+3.  **Storage**: If a valid `File` object is retrieved:
+    *   A unique ID is generated via `generateUniqueId('img')`.
+    *   The file blob is stored in the `IMAGE_STORE` IndexedDB using `addImageDB`.
+    *   A markdown image reference `![Shared Image](/images/<id>)` is created.
+4.  **Note Integration**:
+    *   The image reference and existing text/link content are combined into a final string using `filter(Boolean).join('\n\n')`.
+    *   This content is prepended to the existing 'Shared Inbox' note or used to create a new one if it doesn't exist.
+5.  **Backward Compatibility**: The code checks `imageFile instanceof File`. If no image is shared, the reference remains empty and the text/link sharing logic proceeds as it did previously.

src/manifest.json

@@ -13,7 +13,13 @@
     "params": {
       "title": "title",
       "text": "text",
-      "url": "url"
+      "url": "url",
+      "files": [
+        {
+          "name": "image",
+          "accept": ["image/*"]
+        }
+      ]
     }
   },
   "icons": [

src/serviceworker.js

@@ -180,9 +180,17 @@ self.addEventListener('fetch', (event) => {
 					let text = data.get('text') || '';
 					let title = data.get('title') || '';
 					let sharedUrl = data.get('url') || '';
+					let imageFile = data.get('image');
 
 					title = title.replace(/\n/g, ' ');
 
+					let imageReference = '';
+					if (imageFile instanceof File) {
+						const imageId = generateUniqueId('img');
+						await addImageDB({ id: imageId, blob: imageFile, synced: false });
+						imageReference = `![Shared Image](/images/${imageId})`;
+					}
+
 					const urlRegex = /(https?:\/\/[^\s]+)/g;
 
 					if (!sharedUrl) {
@@ -287,11 +295,14 @@ self.addEventListener('fetch', (event) => {
 							inboxNote = await getNoteByTitleDB(TITLE_SHARED);
 						}
 
+						// Combine image reference and the new item content
+						const finalContent = [imageReference, newItem].filter(Boolean).join('\n\n');
+
 						if (inboxNote) {
 							if (inboxNote.content) {
-								inboxNote.content = newItem + '\n' + inboxNote.content;
+								inboxNote.content = finalContent + '\n' + inboxNote.content;
 							} else {
-								inboxNote.content = newItem;
+								inboxNote.content = finalContent;
 							}
 							inboxNote.updatedAt = new Date().toISOString();
 							await updateNoteDB(inboxNote);
@@ -304,7 +315,7 @@ self.addEventListener('fetch', (event) => {
 							const newNote = {
 								id: 'shared-inbox-' + generateUniqueId(),
 								title: TITLE_SHARED,
-								content: newItem,
+								content: finalContent,
 								createdAt: new Date().toISOString(),
 								updatedAt: new Date().toISOString(),
 								tags: ['shared', 'inbox'],