How to share a single Base64 URL Image via the Web share API?

Question

So, I need to share a base64 Image string using the Web Share API on TypeScript.

Would it be ok if I passed the base64 string as the url parameter like this:

  var base64url = "data:image/octet-stream;base64,/9j/4AAQSkZ...."
  navigator.share({
    title: 'Hello',
    text: 'Check out this image!',
    url: base64url ,
  })

Or do I need to have a Files Array and use Web Share API v2 ? If so, how do I implement it, all I have is a base64 string and the examples I could found were too confusing.

I am a noob in this matter so some help would be greatly appreciated!

It will work but most platforms where you will share this URL will not show it like a link it will just appear as a text, and most non tech people don't even know what a base64 url is , chances are very low that they will copy the URL and paste in the browser. — Alien
@blacksheep Ok, so how do I share a proper image file via the web share API, could you help? — Ben

Alex de Boutray Alex de Boutray · Accepted Answer · 2020-09-18T02:42:26

As mentioned in the comments, sharing the url in the url field won't end up in a nice result for your users.

You can use Web Share API v2 with the following code:

const base64url = "data:image/octet-stream;base64,/9j/4AAQSkZ...."
const blob = await (await fetch(base64url)).blob();
const file = new File([blob], 'fileName.png', { type: blob.type });
navigator.share({
  title: 'Hello',
  text: 'Check out this image!',
  files: [file],
})

You might have to tweak the extension and mime type depending on your actual image urls.

Be aware though that v2 is currently only available on Android Chrome (I can't find a good source for that but I just did this on a project). You can check for availability at run time by using navigator.canShare().

How to share a single Base64 URL Image via the Web share API?

1 Answers