JSFiddle - React, Tailwind, and code Playground

HTML

<div class="upload-box">Click here to upload =)</div>

<form class="form-upload" enctype="multipart/form-data">
  <input class="file-input" id="file_input" type="file">
</form>

<div class="debug"></div>

CSS

.upload-box {
    border: 3px solid #999;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    font-size: 35pt;
    font-family: Arial;
    color: #555;
}
.form-upload {
    display: none;
}

JavaScript

$(document).ready(function(){
    
    $(document).on('click touchstart', '.upload-box', function(e){
        e.stopPropagation();
        $('.form-upload input.file-input').trigger('click');
        
        $('.debug').append('<p>Clicked!</p>');
        console.log('Clicked!');
        return false;
    });
    
});