How to Make Web Share Work with Files

TLDR: If you want to share files with the web share API, you need to use the files property ONLY. If you add any other property, it will share the text only(and no files!).

        const img = await fetch('/img.png')
const imgBlob = await img.blob()
const file = new File([imgBlob], 'img.png', { type: 'image/png' })
const data = {
  files: [file],
};
if(navigator.canShare(data)) {
  navigator.share(data) // share img or video to any app e.g whatsapp, instagram, etc.
}

      

Background

It was time to implement file sharing for my new app Audio Lab and I was excited to use the new Web Share API to make it easy to send the videos the users create to any app they want.

The Problem

I went over the official API in MDN about 10 times, but I just couldn't get it to work. Their demo wasn't working at all on my iPhone 14 Max, and said "Your device does not support sharing files." - Even though it showed iOS as supported in the Browser compatibility chart and I also knew it's supposed to work. I couldn't find any other example online that worked either. All of them were showing the way to do it was to use the text property, and then add the files property with the files you want to share.

        const data = {
  text: 'Check out this awesome video I made!',
  files: [file],
};

      

The Solution

After coming back from a wild adventure with a friend that cleared my head, I sat at 4 a.m. and decided to try something different. I removed the text property and only used the files property. And it worked! I was able to share the video to any app I wanted.

        const data = {
  files: [file], // Now the video can be shared to whatsapp and even edited before sending!
};

      

Shout out to Nuxt for making it so easy to test things during development, letting me easily run a dev server and access it from my phone using HTTPS as well(as web share is only supported in secure contexts) using the simple command

        nuxt dev --host --https

      

Addressing the Issue

To help others avoid this pitfall, I took the initiative to report this issue to MDN. I submitted a detailed issue report on their GitHub repository, highlighting the problem with their iOS example. GitHub Issue Report

Now I gotta go back to working on Audio Lab, and I hope this article helps you avoid the same issue I had 😄😎