<input type="file" name="files" multiple="true">

<button class="btn btn-primary" id="share-button">Share me</button>
body {
  margin: 1rem;
}
const fileInput = document.querySelector('[name="files"]');
let files;

fileInput.addEventListener('change', (event) => {
  files = event.target.files;
});

const button = document.getElementById('share-button');

button.addEventListener('click', () => {
  if (navigator.canShare && navigator.canShare({ files: files })) {
    navigator.share({
      title: 'Look ma: Native web sharing =D',
      text: 'This article on the native Web Share API is amazing!',
      url: 'https://medium.com/@WesleySmits/use-the-native-javascript-share-api-6ec67399a9d3',
      files: files
    })
      .then(() => {
      console.log('Callback after sharing');
    })
      .catch(console.error);
  } else {
    // Implement fallback sharing option
    alert('The Web Share API is not supported in this browser.');
  }
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.