Click on an image to share

cfi.floralyz · 2024-07-21T15:57:54.429Z

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

boston85719 · 2024-07-22T06:08:44.268Z

cfi.floralyz:

the “share” menu

Have you built a share menu?

cfi.floralyz · 2024-07-22T09:08:49.654Z

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.

shorinoluphilips17 · 2024-07-22T09:43:12.881Z

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…

cfi.floralyz · 2024-07-22T09:50:19.245Z

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

shorinoluphilips17 · 2024-07-22T11:41:10.272Z

I have sent you a mail

cfi.floralyz · 2024-07-22T14:16:59.900Z

I didn’t receive your email

animisha45 · 2024-07-24T06:08:13.767Z

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

animisha45 · 2024-07-24T14:04:37.434Z

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.

cfi.floralyz · 2024-07-24T18:29:29.272Z

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.

animisha45 · 2024-07-25T02:28:42.465Z

I have edited the above response to full script

cfi.floralyz · 2024-07-25T06:45:32.414Z

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

cfi.floralyz · 2024-07-26T08:45:00.651Z

Hi,
do you thing there is a solution ?

animisha45 · 2024-07-26T10:14:21.428Z

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

cfi.floralyz · 2024-07-26T12:55:39.899Z

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

animisha45 · 2024-07-26T14:07:30.698Z

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

cfi.floralyz · 2024-07-27T09:34:25.567Z

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

system · 2024-09-29T15:58:26.050Z

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