1

Hello,
how to make it so that when a user clicks on an image contained in a repeatinggroup (the image is in the form of a link to google cloud), the “share” menu appears and the user can share the clicked image (only the image without the link or text) with any application installed on their smartphone.
Thank you
Eric

2

Have you built a share menu?

3

with the help of chatGPT, yes. By adding an HTML page with a javascript + workflow on the image contained in the retpeatinggroup (I can send you all the codes if you want with the explanations). In HTML (preview Bubble), the menu is triggered but the screen is black and nothing is shared. I tried the apk version on my smartphone and when I click, I get the message “sharing is not supported on this browser”. So it depends on the smartphone version, says chatGPT. Nevertheless, with my same smartphone, I know it can work perfectly. chatGPT suggests an alternative: upload a link to the photo and have the user share the link manually. But I don’t want that. I want the sharing window to open automatically and the image to be shared. I hope I’ve made myself clear enough.

4

Hi sir ! Hope you are doing good .
I am an experienced bubble.io developer with 3 years of experience in SaaS , MVP and API integration
I can provide you a paid consultation if you need…

5

ok. Here is my email : eric.koninckx@gmail.com

6

I have sent you a mail

7

I didn’t receive your email

8

When the user clicks on image → run javascript

The script is:

async function shared(){

var sharedata = {
    title: "Title",
    text: "text",
    url: "URL"
  }

if(!navigator.share){
navigator.clipboard.writeText("URL");
alert("Copied to clipboard");
}

if(navigator.share){

    try {
      await navigator.share(sharedata)
      console.log("Blog shared successfully")
    } catch(err) {
console.log("error")
    }

}}

shared();

This uses the Navigator.share for mobile. If it does not find any options (eg on laptop) it will copy to the clipboard. Hope this helps

1 Like
9

Hi @cfi.floralyz
For a single File update the script to this:

async function shared(){

var image = await fetch("ImageURL");
var blob = await image.blob();
var file = new File([blob], "ImageFileName", {type: blob.type})

var sharedata = {
    title: "Title",
    files:[file]
  }

if(!navigator.share){
navigator.clipboard.writeText("URL");
alert("Copied to clipboard");
}

if(navigator.share){
try{
      await navigator.share(sharedata)
      console.log("Blog shared successfully")
    } 
catch(err) {
console.log("error")
    }

}}

shared();

The rest remains same.

10

Hi,
Hi, can you give me the complete new script because I think I’m not placing the part to be added in the right place because nothing is working.

11

I have edited the above response to full script

12

thank you very much, but it still doesn’t work.

13

Hi,
do you thing there is a solution ?

14

Hi @cfi.floralyz
I have made it format as code. Sometimes the quotes cause an issue when copy-paste. Hope it works now :sweat_smile:.

15

Hi, I made the change but now, a popup comes and it is writed that it is copied to clipboard. And then nothing.

16

This will copy to clipboard when it is not able to find navigator.share compatible on a device.

17

I have chrome and Android 12. it’s quite surprising. what browser does it take to work?

18

This topic was automatically closed after 70 days. New replies are no longer allowed.