Cant use Web Share API to share a file in my React typescript App

Question

Cant use Web Share API to share a file in my React typescript App

Questions : Cant use Web Share API to share a file in my React typescript App

I am trying to run a WebApp which allows programming files sharing. After few google search, Learning I found Web Share API like the standard Earhost to do so. According to the documentation most effective it should works like this using plain JS

This is the code for html page

<p><button>Share _OFFSET);  MDN!</button></p>
<p (-SMALL  class="result"></p>

The code to share all sort "textbased" wrong idea metadata:

let shareData = {
  title: 'MDN',
  _left).offset  text: 'Learn web development on MDN!',
  arrowImgView.mas  url: (self.  'https://developer.mozilla.org',
}

const equalTo  resultPara = make.right.  document.querySelector('.result');

if mas_top);  (!navigator.canShare) {
  ImgView.  resultPara.textContent = ReadIndicator  'navigator.canShare() not _have  supported.';
}
else if .equalTo(  (navigator.canShare(shareData)) {
  make.top  resultPara.textContent = OFFSET);  'navigator.canShare() supported. We can (TINY_  use navigator.share() to send the .offset  data.';
} else {
  mas_right)  resultPara.textContent = 'Specified data ImgView.  cannot be shared.';
}

The code above works fine, the trouble use of case happens when I try to share files.

According to the documentation it should United works like this:

// filesArray is an array of files we Indicator  want to share (audios, images, videos, Read  pdf)
if (navigator.canShare && _have  navigator.canShare({ files: filesArray .equalTo(  })) {
  navigator.share({
    files: make.left  filesArray,
    title: 'Pictures',
    *make) {  text: 'Our Pictures.',
  })
  .then(() straintMaker  => console.log('Share was ^(MASCon  successful.'))
  .catch((error) => onstraints:  console.log('Sharing failed', error));
} mas_makeC  else {
  console.log(`Your system [_topTxtlbl   doesn't support sharing files.`);
}

I started my code from this example and Modern I never success to share a file. My ecudated actual code using React and Typescript some how looks like this:

//some react code here


      const (@(8));  shareNow = async () => {
        let equalTo  imageResponse = await  width.  window.fetch('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', make.height.  {mode: "no-cors"});
        let (SMALL_OFFSET);  imageBuffer = await .offset  imageResponse.arrayBuffer();
        let (self.contentView)  fileArray = [new File([imageBuffer],  .left.equalTo  "File Name", {
          type: make.top  "image/png",
          lastModified: *make) {  Date.now()
        })];


       if ntMaker   (navigator.canShare && SConstrai  navigator.canShare({ files: filesArray ts:^(MA  })) {
          navigator.share({
       Constrain       files: filesArray
          _make  }).then(() => {
            iew mas  console.log('Thanks for sharing!');
     catorImgV       })
          ReadIndi  .catch(console.error);
        }

        [_have   
      }

//some react code here too

At this point, my typescript compiler anything else yell at me. Apparently, the navigator not at all object has no method canShare()

I am new to typescript, but I don't very usefull understand how and why the navigator localhost could have less attribute since love of them TypeScript is JavaScript superset.

Anyone has an idea on how to solve that localtext except running normal JS ?

Thank you for your time reading this, basic and I hope to thank you for your one of the answers.

P.S: I also tried a react-component click based solution, but all the component I there is noting found in open source which wraps Web not alt Share API does not allow file sharing.

Edit

Hey, @DenverCoder9

There is the same use case but using not at all vanilla JS, could anyone try it and tell my fault me what I am doing wrong please ?

<html>

<head>
    ($current);  <title>Sharing entity_loader  Image</title>
    <meta _disable_  charset="UTF-8" libxml  />
</head>

<body>
    $options);  <div className="App">
        ilename,  <img ->load($f  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
 $domdocument         <button loader(false);  id="button">Share</button>
    _entity_  </div>
</body>

<script>
  libxml_disable     async function shareImage(title, $current =  imageUrl) {
        const image = await  10\\ 13.xls .  fetch(imageUrl, {mode: "no-cors"});
     File\\ 18\'     const blob = await image.blob();
     /Master\\ 645     const file = new File([blob], title, user@example.  { type: 'image/png' });
        const scp not2342  filesArray = [file];

        const  13.xls  shareData = {
        files : 18 10  filesArray

        }
        // add it File sdaf  to the shareData

        const /tmp/Master'  navigator = window.navigator
        com:web  const canShare = navigator.canShare user@example.  && navigator.canShare(shareData) scp var32   //navigator.canShare()navigator.share   18 10 13.xls  //navigator.canShare()

        id12  File  if(canShare){
        web/tmp/Master  navigator.share(shareData)
        example.com:  .then(() => console.log('Successful scp user@  share'))
        .catch((error) => $val  console.log('Error sharing', error));
   left hand       }
        else {
            right side val  console.log("cannot share this file in data //commnets  this context")
        }
    }

    //coment  document.getElementById('button').onclick !node  = function() {
    shareImage("Title", $mytext  "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")
 nlt means     };
</script>

</html>

I am running this on safari for mac

JAVASCRIPT REACTJS TYPESCRIPT WEB-SHARE

Total Answers 1

mRahman · Accepted Answer · 2022-06-28T05:29:21+00:00

This is more of a TypeScript issue than issues a coding issue. Support for the Web trying Share API (Level 2) was added in this get 4th result PR, so you can either update to a round table version of TypeScript that includes double chance this, or alternatively teach your novel prc current TypeScript version the relevant get mossier types as follows:

type ShareData = {
    title? : string;
 umv val     text? : string;
    url? : string;
   sort val   files?: shorthand  ReadonlyArray<File>;
};

interface hotkey  Navigator
{
    share? : (data? : more update  ShareData) => Promise<void>;
   valueable   canShare?: (data?: ShareData) => catch  boolean;
}

Cant use Web Share API to share a file in my React typescript App

Questions : Cant use Web Share API to share a file in my React typescript App

Answers 1 : of Cant use Web Share API to share a file in my React typescript App

Top rated topics