Web Share API sharing files Permission Denied

Question

I'm not sure what I'm doing wrong here, I think there should be more documentation or better error descriptions for this Web Share API.

I'm trying to share the following file

{
  lastModified: 1622843015507
  lastModifiedDate: Fri Jun 04 2021 16:43:35 GMT-0500 (Eastern Standard Time) {}
  name: "60b1d17b7f2cd71c8307fae2"
  size: 37835
  type: "image/png"
  webkitRelativePath: ""
}

using

await navigator.share({
    text: 'TEST',
    files: [file],
  });

I've made sure that the type is a permitted type, but I keep getting DOMException: Permission denied. I really don’t understand what should I be looking for.

François Beaufort · Answer 1 · 2021-07-12T05:22:36.313

5

I think the issue you're facing is the fact that your file name doesn't have an extension. Try adding .png to the file name, it should automagically work.

const file = new File(['hello'], 'hello.png', { type: 'image/png' });
await navigator.share({ files: [file] });

edited Jul 12 '21 at 05:22

answered Jul 09 '21 at 09:43

François Beaufort

4,843
3
29
38

score 0 · Answer 2 · answered Jun 07 '21 at 07:47

I see you have gotten some feedback on the issue that you raised already. Here is a concrete example that hopefully helps you get started:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

One way of getting a files array (the filesArray above) is through an <input type=files> element. See the official example for this.

Web Share API sharing files Permission Denied

2 Answers2