Web Share API .canShare returning false for a png

Question

I'm trying to use the web share API to allow visitors to my website to share images from my site on social media. I fetch the png image and instantiate a File object. But when I check to make sure the file can be shared (using navigator.canShare({files}) ), it returns false. I can't seem to find any info on what type of files it does or doesn't support. Or maybe I'm giving it the image in a way it doesn't like? I'm not sure. Any suggestions are appreciated. Thanks

const fileurl ='/image.png'
const fileName = 'myImage.png'

fetch(fileurl)
  .then(async response => {
    const contentType = response.headers.get('content-type')
    const blob = await response.blob()
    const files = new File([blob], fileName, { contentType })
 
  })
      
  

      if (files) {
        if (!navigator.canShare) {
          logError('Warning: canShare is not supported. File sharing may not be supported at all.');
        } else if (!checkBasicFileShare()) {
          logError('Error: File sharing is not supported in this browser.');
          setShareButtonsEnabled(true);
          return;
        } else if (!navigator.canShare({files})) {
          logError('Error: share() does not support the given files');
          for (const file of files) {
            logError(`File info: name - ${file.name}, size ${file.size}, type ${file.type}`);
          }
          setShareButtonsEnabled(true);
          return;
        }
      }

Answer 1

The value of the files parameter needs to be an array:

const fileurl ='/image.png'
const fileName = 'myImage.png'

fetch(fileurl)
  .then(async response => {
    const contentType = response.headers.get('content-type')
    const blob = await response.blob()
    const files = [new File([blob], fileName, { contentType })]
 
  })
      
  

      if (files) {
        if (!navigator.canShare) {
          logError('Warning: canShare is not supported. File sharing may not be supported at all.');
        } else if (!checkBasicFileShare()) {
          logError('Error: File sharing is not supported in this browser.');
          setShareButtonsEnabled(true);
          return;
        } else if (!navigator.canShare({files})) {
          logError('Error: share() does not support the given files');
          for (const file of files) {
            logError(`File info: name - ${file.name}, size ${file.size}, type ${file.type}`);
          }
          setShareButtonsEnabled(true);
          return;
        }
      }