How to create a custom file upload button

Source Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> i#icon_p { position: relative; left: 17px; color: green; } .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } </style> <div class="upload-btn-wrapper"> <button class="btn"><span class="fname">Upload a file</span> <i class="fa-solid fa-circle-plus" id="icon_p"></i></button> <input type="file" name="myfile" id='myfile' /> </div> <br/> <img src="" max-height="500px" width="100%" id="pre_view" alt='Image Preview'> <script> const file_input_id ="#myfile"; const preview_id ="#pre_view"; $(file_input_id).change(function(e){ $(".fname").html(e.target.files[0].name); const file = this.files[0]; console.log(file); if (file){ let reader = new FileReader(); reader.onload = function(event){ $(preview_id).attr('src', event.target.result); } reader.readAsDataURL(file); } }); </script>