Web Share API: Permission Denied on certain file type

Question

I would like to share a JSON object as a file via the Web Share API.

However, when specifying the type as application/json, I got the DOMException: Permission denied Error:

navigator.share({
    files: [new File(["{}"], "test.json", {type: "application/json"})]
})

// Uncaught (in promise) DOMException: Permission denied

However, if I change the type to text/plain and the file name extension to .txt, it works as expected:

navigator.share({
    files: [new File(["{}"],"test.txt", {type: "text/plain"})]
})

// File share success

I would like to have it as a `JSON file to be shared instead.

Browser: Microsoft Edge (Chromium) 96.0.1054.43

---

Any helps would be appreciated.

---

Snippet Example:

const textbtn = () => {
  navigator.share({
      files: [new File(["{}"],"test.txt", {type: "text/plain"})]
  }).catch(e => alert(e.message))
}

const jsonbtn = () => {
  navigator.share({
      files: [new File(["{}"],"test.json", {type: "application/json"})]
  }).catch(e => alert(e.message))
}

<h1>WebShare Test<h1>

<button onclick="jsonbtn()">test.json | application/json</button>
<br />
<button onclick="textbtn()">text.text | text/pain</button>

Answer 1

This is working as intended. You can see the list of supported file types in this document.

Answer 2

Per this MDN documentation about shareable file types, the supported kinds of file type are only quite a few.

• PDF
• some audio files
• some image files
• some text files
• some video files

The text files in particular are:

.css - text/css
.csv - text/csv
.ehtml - text/html
.htm - text/html
.html - text/html
.shtm - text/html
.shtml - text/html
.text - text/plain
.txt - text/plain

Unfortunately, JSON (application/json) is not among them, but txt (text/plain) is.

Depending on your scenario, you might want to consider sharing an URL to the file in question, via the URL parameter.