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>
How to create a custom file upload button

Source Code

Post a Comment

0 Comments

Footer Menu Widget

Contact form
