I am fetching an img, turning it into a file, and then trying to share that file. I tested the code on latest Chrome on Android (the only browser to currently support this API).

  if (shareimg && navigator.canShare) {
    share = async function() {
      const response = await fetch(shareimg);
      const blob = await response.blob();
      const file = await new File([blob], "image.jpeg");

      navigator.share({
        url: shareurl,
        title: sharetitle,
        text: sharetext,
        files: [file]
      });
    };
  }

I am running the function in response to a user clicking a button (the share() method must be called from a user gesture, otherwise it won't work).

(I am testing this code using Browserstack, which provides a console for javascript errors, as I couldn't successfully link my Android device to my mac for debugging and this API only works on mobile phones - not on Chrome for desktop.)

I am fetching an img, turning it into a file, and then trying to share that file. I tested the code on latest Chrome on Android (the only browser to currently support this API).

  if (shareimg && navigator.canShare) {
    share = async function() {
      const response = await fetch(shareimg);
      const blob = await response.blob();
      const file = await new File([blob], "image.jpeg");

      navigator.share({
        url: shareurl,
        title: sharetitle,
        text: sharetext,
        files: [file]
      });
    };
  }

I am running the function in response to a user clicking a button (the share() method must be called from a user gesture, otherwise it won't work).

(I am testing this code using Browserstack, which provides a console for javascript errors, as I couldn't successfully link my Android device to my mac for debugging and this API only works on mobile phones - not on Chrome for desktop.)

• javascript
• domexception

1 Answer 1

Your code can be optimized a bit. It is currently necessary to specify the MIME type of the blob. You can check the code below out in practice here: https://statuesque-backpack.glitch.me/.

if ('canShare' in navigator) {
  const share = async function(shareimg, shareurl, sharetitle, sharetext) {
    try {
      const response = await fetch(shareimg);
      const blob = await response.blob();
      const file = new File([blob], 'rick.jpg', {type: blob.type});

      await navigator.share({
        url: shareurl,
        title: sharetitle,
        text: sharetext,
        files: [file]
      });
    } catch (err) {
      console.log(err.name, err.message);
    }
  };

  document.querySelector('button').addEventListener('click', () => {
    share(
      'https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Rick_Astley_Dallas.jpg/267px-Rick_Astley_Dallas.jpg',
      'https://en.wikipedia.org/wiki/Rick_Astley',
      'Rick Astley',
      'Never gonna give you up!'
    );
  });  
}