Is it possible to share multiple files with Web Share Target API?

Question

Is it possible to share multiple files using Web Share Target API?
I can select multiple pictures in Google Photos, hit Share, then select my PWA. But only one of the selected files is sent to the share_target URL given in the manifest.json.
This is odd. Did I missed something?
Thanks! 🎈

Answer 1

It is, yes.

In your Web App Manifest, use something like this:

"share_target": {
  "action": "/_share-target",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "files": [{
      "name": "media",
      "accept": ["image/*"]
    }]
  }
}

In your service worker that handles incoming POST requests for /_share-target/, do something like this:

const formData = await event.request.formData();
const mediaFiles = formData.getAll('media');

for (const mediaFile of mediaFiles) {
  // Do something with each mediaFile
}

There's a deployed example of this code "in action" at https://scrapbook-pwa.web.app/