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