implemented WebShareTarget in manifest and serviceworker for testing

docker/nginx/development.conf

@@ -18,6 +18,9 @@ server {
     location /ca.crt {
         alias /etc/ssl/certs/snapdropCA.crt;
     }
+
+    # To allow POST on static pages
+    error_page  405     =200 $uri;
 }
 
 server {
@@ -42,5 +45,7 @@ server {
     location /ca.crt {
         alias /etc/ssl/certs/snapdropCA.crt;
     }
+    # To allow POST on static pages
+    error_page  405     =200 $uri;
 }
 

docker/nginx/production.conf

@@ -10,6 +10,8 @@ server {
     location /ca.crt {
         alias /etc/ssl/certs/snapdropCA.crt;
     }
+    # To allow POST on static pages
+    error_page  405     =200 $uri;
 }
 
 server {
@@ -34,5 +36,7 @@ server {
     location /ca.crt {
         alias /etc/ssl/certs/snapdropCA.crt;
     }
+    # To allow POST on static pages
+    error_page  405     =200 $uri;
 }
 

public/manifest.json

@@ -2,27 +2,27 @@
     "name": "PairDrop",
     "short_name": "PairDrop",
     "icons": [{
-        "src": "images/android-chrome-192x192.png",
+            "src": "images/android-chrome-192x192.png",
-        "sizes": "192x192",
+            "sizes": "192x192",
-        "type": "image/png"
+            "type": "image/png"
-    },{
+        },{
-        "src": "images/android-chrome-512x512.png",
+            "src": "images/android-chrome-512x512.png",
-        "sizes": "512x512",
+            "sizes": "512x512",
-        "type": "image/png"
+            "type": "image/png"
-    },{
+        },{
-        "src": "images/android-chrome-192x192-maskable.png",
+            "src": "images/android-chrome-192x192-maskable.png",
-        "sizes": "192x192",
+            "sizes": "192x192",
-        "type": "image/png",
+            "type": "image/png",
-        "purpose": "maskable"
+            "purpose": "maskable"
-    },{
+        },{
-        "src": "images/android-chrome-512x512-maskable.png",
+            "src": "images/android-chrome-512x512-maskable.png",
-        "sizes": "512x512",
+            "sizes": "512x512",
-        "type": "image/png",
+            "type": "image/png",
-        "purpose": "maskable"
+            "purpose": "maskable"
-    },{
+        },{
-        "src": "images/favicon-96x96.png",
+            "src": "images/favicon-96x96.png",
-        "sizes": "96x96",
+            "sizes": "96x96",
-        "type": "image/png"
+            "type": "image/png"
     }],
     "background_color": "#efefef",
     "start_url": "/",
@@ -30,12 +30,18 @@
     "display": "minimal-ui",
     "theme_color": "#3367d6",
     "share_target": {
-        "method":"GET",
+        "action": "/",
-        "action": "/?share_target",
+        "method":"POST",
+        "enctype": "multipart/form-data",
         "params": {
             "title": "title",
             "text": "text",
-            "url": "url"
+            "url": "url",
+            "files": [{
+                "name": "allfiles",
+                "accept": ["*/*"]
+            }]
+            }
         }
     },
     "file_handlers": [

public/scripts/ui.js

@@ -931,7 +931,6 @@ class SendTextDialog extends Dialog {
 
     _onRecipient(recipient) {
         this._recipient = recipient;
-        this._handleShareTargetText();
         this.show();
 
         const range = document.createRange();
@@ -943,12 +942,6 @@ class SendTextDialog extends Dialog {
         sel.addRange(range);
     }
 
-    _handleShareTargetText() {
-        if (!window.shareTargetText) return;
-        this.$text.textContent = window.shareTargetText;
-        window.shareTargetText = '';
-    }
-
     _send() {
         Events.fire('send-text', {
             to: this._recipient,
@@ -1135,20 +1128,34 @@ class NetworkStatusUI {
 
 class WebShareTargetUI {
     constructor() {
-        const parsedUrl = new URL(window.location);
+        const urlParams = new URL(window.location).searchParams;
-        const title = parsedUrl.searchParams.get('title');
+        const share_target_type = urlParams.get("share-target")
-        const text = parsedUrl.searchParams.get('text');
+        if (share_target_type) {
-        const url = parsedUrl.searchParams.get('url');
+            if (share_target_type === "text") {
+                const title = urlParams.get('title') || '';
+                const text = urlParams.get('text') || '';
+                const url = urlParams.get('url') || '';
+                let shareTargetText;
 
-        let shareTargetText = title ? title : '';
+                if (url) {
-        shareTargetText += text ? shareTargetText ? ' ' + text : text : '';
+                    shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
+                } else if (title && text) {
+                    shareTargetText = title + '\r\n' + text;
+                } else {
+                    shareTargetText = title + text;
+                }
 
-        if(url) shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
+                console.log('Shared Target Text:', '"' + shareTargetText + '"');
-
+                Events.fire('activate-paste-mode', {files: [], text: shareTargetText})
-        if (!shareTargetText) return;
+            } else if (share_target_type === "files") {
-        window.shareTargetText = shareTargetText;
+                caches.match("share_target_files")
-        history.pushState({}, 'URL Rewrite', '/');
+                    .then(files => {
-        console.log('Shared Target Text:', '"' + shareTargetText + '"');
+                        console.debug(files)
+                        Events.fire('activate-paste-mode', {files: files, text: ""})
+                    })
+            }
+            history.pushState({}, 'URL Rewrite', '/');
+        }
     }
 }
 

public/service-worker.js

@@ -27,17 +27,48 @@ self.addEventListener('install', function(event) {
 
 
 self.addEventListener('fetch', function(event) {
-  event.respondWith(
+    if (event.request.method === "POST") {
-    caches.match(event.request)
+        // Requests related to Web Share Target.
-      .then(function(response) {
+        event.respondWith(
-        // Cache hit - return response
+            (async () => {
-        if (response) {
+                const formData = await event.request.formData();
-          return response;
+                const title = formData.get("title");
-        }
+                const text = formData.get("text");
-        return fetch(event.request);
+                const url = formData.get("url");
-      }
+                const files = formData.get("files");
-    )
+                console.debug(title)
-  );
+                console.debug(text)
+                console.debug(url)
+                console.debug(files)
+                let share_url = "/";
+                if (files.length > 0) {
+                    // Save to Cache?
+                    caches.open("share_target_files")
+                        .then(cache => {
+                            cache.addAll(files)
+                            console.debug("files added to cache")
+                        });
+                    share_url = "/?share-target=files";
+                } else if (title.length > 0 || text.length > 0 || url.length) {
+                    share_url = `/?share-target=text&title=${title}&text=${text}&url=${url}`;
+                }
+                return Response.redirect(encodeURI(share_url), 303);
+            })()
+        );
+    } else {
+        // Regular requests not related to Web Share Target.
+        event.respondWith(
+            caches.match(event.request)
+                .then(function (response) {
+                        // Cache hit - return response
+                        if (response) {
+                            return response;
+                        }
+                        return fetch(event.request);
+                    }
+                )
+        );
+    }
 });