4

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>
S_i_l_e_n_t C_o_d_e_r
  • 403
  • 2
  • 7
  • 21
Jamie Phan
  • 796
  • 1
  • 7
  • 26
  • For me, I'm testing your snippet here on SO and I'm getting permission denied on both buttons. When I paste this snippet on w3shcools, it does work. I need help implementing it for my website and I can't figure out how to consistently have this work for all users – Meir May 18 '23 at 16:46

2 Answers2

2

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

DenverCoder9
  • 2,024
  • 11
  • 32
  • Thanks for the info! Is this a Chromium specific thing, or a standard? Also are there any official documents (e.g. MDN, Chromium source code) that I can reference to? – Jamie Phan Dec 06 '21 at 16:09
  • 1
    The document is titled "Web Share - Permitted File Extensions in Chromium" and that's what it is. The standard makes no assumptions as to what can be shared or not, the browser vendors do. I have just opened a [PR](https://github.com/mdn/content/pull/11023#issuecomment-987733402) that adds this info to MDN ([preview](https://pr11023.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/Navigator/share#parameters)). – DenverCoder9 Dec 07 '21 at 09:30
  • @DenverCoder9 This seems now to be the official list on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#shareable_file_types – Marcel Feb 18 '22 at 06:53
  • 1
    That's correct. It was my [PR](https://github.com/mdn/content/pull/11023) that landed this… `:-)` – DenverCoder9 Feb 18 '22 at 09:11
  • @DenverCoder9 Would you incorporate the content of the document, like in my answer, into yours? I will then delete my answer to let you get proper credit for your work. Link-only answers are a bit disliked in StackOverflow. – Marcel Feb 18 '22 at 11:23
  • 1
    That's super nice of you `<3`, but no worries, you answered the question, you get the credit. Just upvoted your answer! – DenverCoder9 Feb 19 '22 at 14:45
  • For me, I'm testing your snippet from the question here on SO and I'm getting permission denied on both buttons. When I paste this snippet on w3shcools, it does work. I need help implementing it for my website and I can't figure out how to consistently have this work for all users – Meir May 18 '23 at 16:46
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.

Marcel
  • 15,039
  • 20
  • 92
  • 150