<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.');
}
});
This Pen doesn't use any external JavaScript resources.