JSFiddle - React, Tailwind, and code Playground

HTML

<button data-action="browse">
  Browse
</button>

JavaScript

document.querySelector('[data-action="browse"]').addEventListener('click', (e) => {
  const fileInputEl = document.createElement('input');
  fileInputEl.type = 'file';
  fileInputEl.accept = 'image/*';

  fileInputEl.addEventListener('input', (e) => {
    alert('Input fired!');
    if (!e.target.files.length) {
      return;
    }

    // Handle files here...
    
  });  

  fileInputEl.dispatchEvent(new MouseEvent('click'));
});