navigator.canShare() in typescript permissions denied
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); }); } }); }
If anyone wants to use fetch to leverage async, you can do it like 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); }}
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) {} // This method shares the image as apost shareNow = async () => { console.log("insdie shareNow method...."); if ('canShare' in navigator) { console.log("insdie 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>Use this code to get share option for image sharing.Please make note that navigation.share works only with HTTPS not with HTTP server.This is example for the angular code to share image.I have stored the image in assest/img folder, make sure you select correct image url to share it.
}