JSFiddle - React, Tailwind, and code Playground

by mohsen

HTML

<input type="file" />
<label>Select file to upload: <input type="button" value="Choose File" /></label>

CSS

input[type="file"]{visibility:hidden; width:0;}

JavaScript

var fileInput = document.querySelectorAll('input[type="file"]')[0],
    fakeFileInput = document.querySelectorAll('label')[0],
    clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent( 
           'click', 
           true,     // Click events bubble 
           true,     // and they can be cancelled 
           document.defaultView,  // Use the default view 
           1,        // Just a single click 
           0,        // Don't bother with co-ordinates 
           0, 
           0, 
           0, 
           false,    // Don't apply any key modifiers 
           false, 
           false, 
           false, 
           0,        // 0 - left, 1 - middle, 2 - right 
           null);

fakeFileInput.addEventListener('click', function(event){
   fileInput.dispatchEvent(clickEvent);
}, false);