<div class="container row mx-auto py-5">
  <div class="col-md-10">
    <input type="file" placeholder="upload image" id="file-input" accept="image/*" class="form-control" />
    <small id="output" class="text-danger mt-1"></small>
  </div>
  <div class="col-md-2 mt-3 mt-md-0">
    <button type="button" id="share-btn" class="share-btn ms-auto">
      share
      <span class="material-symbols-outlined">share</span>
    </button>
  </div>
</div>

.container {
  max-width: 1000px;
}

.share-btn {
  padding: 0.375rem 1.75rem;
  background: white;
  border: 1px solid rgb(200,200,200);
  border-radius: 2rem;
  font-size: 1rem;
  color: rgb(100,100,100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings:
  'FILL' 1,
  'wght' 700,
  'GRAD' 200,
  'opsz' 48;
  margin-left: 5px;
}
const btn = document.querySelector('#share-btn');
const input = document.querySelector('#file-input');
const output = document.querySelector('#output');

btn.addEventListener('click', async () => {
  try {
    const files = input.files;
    
    if (!files.length) {
      output.textContent = 'please select files';
      return;
    }
    
    if (!navigator.canShare) {
      output.textContent = "your browser doesn't support sharing files";
      return;
    }
    
    if (!navigator.canShare({ files })) {
      output.textContent = "your system doesn't support sharing these files";
      return;
    }

    const response = await navigator.share({
      files,
      title: 'Image',
      text: 'Share Content'
    })
    console.log(response);
    output.textContent = response;
  } catch (err) {
    output.textContent = err.message;
  }
});

External CSS

  1. https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
  2. 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.