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.



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 😄😎

Melodic Mind is building a platform for musicians

If you ever felt like you wanna learn how to play an instrument or sing, this is a call from the universe! Music is one of the most amazing things humans can experience, and it's even more amazing when we are actively making it.
We have been building apps that can help your journey in music, and we invite you to check them out. It's a space for you to explore, learn, and grow in your music-making. Whether you're looking to discover new techniques or refine your skills, we're here to support your passion.
More importantly though, we urge you to take a few minutes everyday and do something that you feel you can enjoy that is related to music.
Just remember, the most important thing is to have fun and enjoy the process.

Get Updates

Join thousands of others who are already subscribed

Join our community

Follow us on social media