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>

CSS

.upload-box {
    border: 3px solid #999;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    font-size: 35pt;
    font-family: Arial;
    color: #555;
    cursor: pointer;
}
.form-upload {
    dispplay: none;
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 0px;
    width: 0px;
}

JavaScript

$(document).ready(function(){
    
    $(document).on('click touchstart', '.upload-box', function(e){
        e.stopPropagation();
        $('.form-upload input.file-input').trigger('click');
    });
    
});