<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> <style> body { padding: 0; margin: 0; } svg:not(:root) { display: block; } .playable-code { background-color: #f4f7f8; border: none; border-left: 6px solid #558abb; border-width: medium medium medium 6px; color: #4d4e53; height: 100px; width: 90%; padding: 10px 10px 0; } .playable-canvas { border: 1px solid #4d4e53; border-radius: 2px; } .playable-buttons { text-align: right; width: 90%; padding: 5px 10px 5px 26px; } </style> <title>Navigator: share() method - sharing_files - code sample</title> </head> <body> <div> <label for="files">Select images to share:</label> <input id="files" type="file" accept="image/*" multiple /> </div> <button id="share" type="button">Share your images!</button> <output id="output"></output> <script> const input = document.getElementById("files"); const output = document.getElementById("output"); document.getElementById("share").addEventListener("click", async () => { const files = input.files; if (files.length === 0) { output.textContent = "No files selected."; return; } // feature detecting navigator.canShare() also implies // the same for the navigator.share() if (!navigator.canShare) { output.textContent = `Your browser doesn't support the Web Share API.`; return; } if (navigator.canShare({ files })) { try { await navigator.share({ files, title: "Images", text: "Beautiful images", }); output.textContent = "Shared!"; } catch (error) { output.textContent = `Error: ${error.message}`; } } else { output.textContent = `Your system doesn't support sharing these files.`; } }); </script> </body> </html>