JSFiddle - React, Tailwind, and code Playground

by ericwilligers

HTML

<div id="error"></div>
<form method="POST" action="/">
  <section id="content">
    <div><input id="message0" value=""></div>
    <div><input id="message1" value=""></div>
    <div><input id="message2" value=""></div>
    <div><input id="message3" value=""></div>
    <div><input id="message4" value=""></div>
    <div><input id="message5" value=""></div>
    <div><input id="message6" value=""></div>
    <div><input id="message7" value=""></div>
    <div><input id="message8" value=""></div>
    <div><input id="message9" value=""></div>
  </section>
  <div><input id="proceed" type="button" value="Share"></div>
</form>

CSS

#error { color: red; }

JavaScript

'use strict';

document.querySelector('#proceed').onclick = () => {
  const error = document.getElementById('error');
  let data = { files: [] };
  
  for (const input of document.querySelectorAll('#content input')) {
  	if (input.value === '')
    	continue;

		const fileBits = [input.value];
    const fileName = input.id + '.txt';
    const options = {type: "text/plain"};
		data.files.push(new File(fileBits, fileName, options));
	}
  if (data.files.length === 0) {
	  error.textContent = 'Share not attempted - no content supplied';
	  return false;
  }

  if (!navigator.canShare || !navigator.canShare(data)) {
	  error.textContent = 'File sharing is not supported';
	  return false;
  }

  error.textContent = '';
  navigator.share(data)
  .then(() => {
  })
  .catch((err) => {
    console.log('Unsuccessful share');
    error.textContent = 'Share failed: ' + err.message;
  });

  return false;
};