The function navigator.canShare() encountered a permissions denial while running in Typescript

Question

The function navigator.canShare() encountered a permissions denial while running in Typescript

Currently, I am in the process of developing an Angular8 PWA and have successfully implemented webshare to share text content. To my excitement, Chrome has now extended its support for file sharing starting from May 2019.

However, while attempting to integrate file sharing in Typescript, I encountered a challenging error:

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 (Central European //Summer Time) {}
//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 where I encounter the Permissions denied error
          });
      }
    });

I'm uncertain whether the issue lies with how I retrieve the file (which seems correct) or with the canShare method call. I'm using Chrome on my mobile device. The provided fiddle functions properly on my phone, although it requires selecting a file. https://jsfiddle.net/ericwilligers/8cpuskqd/

The share functionality is connected to a button containing the link of the file to be shared.

Edit

Upon converting data.files from an array to an object, a new error message surfaces:

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

Edit2

To replicate the problem, I have created a codepen:

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

typescript google-chrome progressive-web-apps navigator

Answer 1

Answer №1

Success! It's working like a charm.


function shareContent(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);
            });
        }
      });
  }

Answer 2

Success! It's working like a charm.


function shareContent(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);
            });
        }
      });
  }

Answer 3

Answer №2

To utilize the fetch method for asynchronous operations, follow the example below:

const shareNow = async () => {
  let imageResponse = await window.fetch('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  let imageBuffer = await imageResponse.arrayBuffer();
  let fileArray = [new File([imageBuffer], "File Name", {
    type: "image/png",
    lastModified: Date.now()
  })];
  if(window.navigator && window.navigator.canShare && window.navigator.canShare({files: fileArray})){
    navigator.share({
      files: fileArray,
      title: 'Title',
      text: 'Text to show'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
  }
}

Answer 4

To utilize the fetch method for asynchronous operations, follow the example below:

const shareNow = async () => {
  let imageResponse = await window.fetch('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  let imageBuffer = await imageResponse.arrayBuffer();
  let fileArray = [new File([imageBuffer], "File Name", {
    type: "image/png",
    lastModified: Date.now()
  })];
  if(window.navigator && window.navigator.canShare && window.navigator.canShare({files: fileArray})){
    navigator.share({
      files: fileArray,
      title: 'Title',
      text: 'Text to show'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
  }
}

Answer 5

Answer №3

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
const navigator = window.navigator as any;

@Component({
  selector: 'app-image-post',
  templateUrl: './image-post.component.html',
  styleUrls: ['./image-post.component.css']
})
export class ImagePostComponent {

  constructor(private http: HttpClient) {}

  // Function to share image as a post
  shareNow = async () => {
    console.log("Inside shareNow method....");
    if ('canShare' in navigator) {
      console.log("Inside if condition....");
      let img = 'assets/img/image-post-1.jpg';
      const share = async function () {
        try {
          const response = await fetch(img);
          const blob = await response.blob();
          const file = new File([blob], 'rick.jpg', { type: blob.type });
          await navigator.share({
            url: img,
            title: 'Image',
            text: 'Image',
            files: [file],
          });
          console.log("Shared successfully....");
        } catch (err) {
          console.log(err.name, err.message);
        }
      };
      share();
    }
  };

<html>
<head>
 <meta name="description" content="Web Share API demo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<title>
    Web Share API
</title>

<body>
    <div>
        <div>
            <img src="assets/img/image-post-1.jpg" alt="" style="height: 26rem; width: 26rem;">
        </div>
        <div>
            <button (click)="shareNow()" id="shareFilesButton" style="background-color: blueviolet; color: white;">Share File</button>
        </div>
    </div>
</body>

</html>

Integrate this code to enable image sharing option. Note that navigation.share works only with HTTPS, not with HTTP servers. This is an Angular example for sharing images. The image is stored in the assets/img folder; ensure you use the correct image URL for sharing.

}

Answer 6

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
const navigator = window.navigator as any;

@Component({
  selector: 'app-image-post',
  templateUrl: './image-post.component.html',
  styleUrls: ['./image-post.component.css']
})
export class ImagePostComponent {

  constructor(private http: HttpClient) {}

  // Function to share image as a post
  shareNow = async () => {
    console.log("Inside shareNow method....");
    if ('canShare' in navigator) {
      console.log("Inside if condition....");
      let img = 'assets/img/image-post-1.jpg';
      const share = async function () {
        try {
          const response = await fetch(img);
          const blob = await response.blob();
          const file = new File([blob], 'rick.jpg', { type: blob.type });
          await navigator.share({
            url: img,
            title: 'Image',
            text: 'Image',
            files: [file],
          });
          console.log("Shared successfully....");
        } catch (err) {
          console.log(err.name, err.message);
        }
      };
      share();
    }
  };

<html>
<head>
 <meta name="description" content="Web Share API demo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<title>
    Web Share API
</title>

<body>
    <div>
        <div>
            <img src="assets/img/image-post-1.jpg" alt="" style="height: 26rem; width: 26rem;">
        </div>
        <div>
            <button (click)="shareNow()" id="shareFilesButton" style="background-color: blueviolet; color: white;">Share File</button>
        </div>
    </div>
</body>

</html>

Integrate this code to enable image sharing option. Note that navigation.share works only with HTTPS, not with HTTP servers. This is an Angular example for sharing images. The image is stored in the assets/img folder; ensure you use the correct image URL for sharing.

}

The function navigator.canShare() encountered a permissions denial while running in Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Python Selenium does not output console.log messages

How can I prevent buttons from being created using ngFor in Angular?

Encountering a Typescript issue while trying to access two distinct values dynamically from within a single object

Assigning string properties to different types

A secure way to perform a deep update on any type, even if it is completely different from the original

Ensure that Serenity BDD preserves Browser Memory

What is the best way to have text wrap around an icon in my React application?

Tips for efficiently saving data using await in Mongoose

Tips for configuring the Index column within an Angular Mat-table (when the dataIndex displays 'NaN')

Version 4.0 of d3 introduces an import statement that provides a __moduleExports wrapper

typescript api overlooking the async await functionality

Is there a way to send map data using props in React?

Creating a redux store with an object using typescript: A step-by-step guide

Utilize Typescript/Javascript to utilize the Gmail API for sending emails via email

Triggering multiple subscription functions in Ionic 3 NGRX when a single state change occurs

What is the recommended way to include @types/module in a TypeScript project?

Ways to observe redux action flow within a component

Tips for retrieving information from a Vuetify modal window

What is causing the geolocation heading to remain "null" on Android devices when using Chrome?

The type 'ReadableStream<any>' cannot be assigned to the parameter type 'ReadableStream'