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

Is it possible for a Firestore query using .where() to conduct a search with no results?

What is the best way to ensure that each service call to my controller is completed before proceeding to the next one within a loop in Angular?

Efficient Typescript ambient modules using shorthand notation

Invoke a general function with corresponding generic parameters

What is the best way to generate a type that generates a dot notation of nested class properties as string literals?

Error encountered while installing node modules within an angular workspace

Deactivate the react/jsx-no-bind warning about not using arrow functions in JSX props

Invoking a nested class while declaring types in TypeScript

No matter which port I try to use, I always receive the error message "listen EADDRINUSE: address already in use :::1000"

Tips for displaying backend error messages on the frontend

The recursive component is functional exclusively outside of its own scope

The specified type 'IterableIterator<number>' does not belong to either an array type or a string type

Mastering the art of accessing properties in typescript post implementing Object.defineProperty

Allow TypeScript function parameters to accept multiple elements from an enumeration

How can we initiate an AJAX request in React when a button is clicked?

Angular is showing an error indicating that the property "name" is not found on an empty object

How to retrieve the default type returned by a function using a custom TypeMap

Selenium Grid: Unable to locate the DevToolsActivePort file (error: Chrome did not launch successfully and exited abnormally)

Is it feasible to implement early-return typeguards in Typescript?

Difficulty in monitoring the present machine status through XState in a React application