navigator.canShare() in typescript permissions denied

Question

I am building an Angular8 PWA and I was using the webshare to share text which works fine. Since May 2019, Chrome also supports sharing of files

However, trying to build the fileshare in Typescript I run into the following error:

NotAllowedError: Permission denied

let navigator: any;
navigator = window.navigator;
const title = "myTitle";
let data = {
  title: title,
  text: text,
  url: url,
  files: []
};
console.log(data);

if (navigator.share) {
  fetch(url)
    .then(res => res.blob()) 
    .then(file => {
      const fileName = data.text + ".mp3";
      const options = { type: "audio/mp3" };
      const newFile = new File([file], fileName, options);
      data.files.push(newFile);
      console.log(data);
//lastModified: 1564912016680
//lastModifiedDate: Sun Aug 04 2019 11:46:56 GMT+0200 (Mitteleuropäische //Sommerzeit) {}
//name: "myName.mp3"
//size: 40643
//type: "audio/mpeg"
//webkitRelativePath: ""
      if (navigator.canShare(data)) {
        navigator
          .share(data)
          .then(() => {})
          .catch(err => {
            console.error("Unsuccessful share " + err.message); //here is am getting the Permissions denied error
          });
      }
    });

I am not sure if it is the way I am getting the file (which looks fine) or calling the canShare. I am using Chrome on my mobile phone. The following fiddle works fine with my phone, but you need to select a file. https://jsfiddle.net/ericwilligers/8cpuskqd/

My share function is on a button that basically holds the link of the file to share.

edit

If I change data.files from an array into an object, I get the following error message:

TypeError: Failed to execute 'canShare' on 'Navigator': Iterator getter is not callable.

edit2

I created a codepen to reproduce the issue:

https://codepen.io/anon/pen/xvXvPZ

Answer 1

This worked

 webshare(url, text) {
    let navigator: any;
    navigator = window.navigator;
    const title = "yourTitle";
    let data = { files: [], text: text, url: url, title: title };
    const options = { type: "audio/mp3" };

    this.http
      .get(url, {
        responseType: "arraybuffer"
      })
      .subscribe(response => {
        console.log(response);

        let blob = new File([response], `${text}.mp3`, options);
        data.files.push(blob);
        console.log(data);
        if (navigator.canShare(data)) {
          navigator
            .share(data)
            .then(() => {})
            .catch(err => {
              console.error("Unsuccessful share " + err);
            });
        }
      });
  }