Web Share API in ReactJS is not sharing Text with Files & URL

308 views Asked by At

I am using Web Share API in ReactJS. When I set all 4 Props - title, text, url, files, it is sharing url + files only. text is not sending. I am using Tailwind CSS with it. I tried sharing in Whatsapp, Twitter, Telegram and Facebook. In all places it sending url + files except Facebook. In Facebook it is sending only files. I tried in Android Chrome. How to fix this ?

import React from 'react'
import Image from '../assests/Image1.jpg'

const ShareFiles = () => {

    const handleShare = async () => {

        console.log("Share button clicked!")

        // Load the image and convert it to a Blob
        const response = await fetch(Image);
        const blob = await response.blob();

        const files = [
            new File([blob], 'Image1.jpg', { type: 'image/jpeg' }),
        ]

        const shareData = {
            title: "Web Share API",
            text: "Web Share API in ReactJS Example in Github",
            url: "https://github.com/ritwik-satpati/web-share-api-in-reactjs",
            files: files,
        }

        await navigator.share(shareData)

    }
    return (
        <div className='h-[100vh] w-full flex items-center justify-center'>
            <div className='h-[40px] min-w-[50px] flex items-center justify-center space-x-2 border border-blue-600 text-blue-600 hover:text-white hover:bg-blue-600 font-Roboto text-center cursor-pointer py-2 px-5 rounded-sm' onClick={handleShare}>
                Share
            </div>
        </div>
    )
}
export default ShareFiles

This is the code of ShareFiles.jsx, which is used as a components inside App.js Github Repo: https://github.com/ritwik-satpati/web-share-api-in-reactjs/

Want to share text + url +files (one image file) all together in everyplace.

0

There are 0 answers