File Upload Button Customization

Sometimes, there may face some issues with the default ‘Choose file‘ button structure. It may affect our page responsiveness, button functionality.. etc. So, in these situations, we need quick button customization.

Below giving one of the simple and easiest file upload button customization.

HTML
<label for="submit_file"><i class="fas fa-file-upload"></i> Upload File</label>
<label for="submit_file"><i><!--Here the file name displays after successful upload--></i></label>
<input id="submit_file" name='submit_file' type="file" value="Upload">

JavaScript
<script>
 $('#submit_file').bind('change', function() {
     var i = $(this).prev('label').clone();
        var file = $('#submit_file')[0].files[0].name;
        $(this).prev('label').text(file);
  }
</script>

After uploading the file, If you wish to automatically change the button name to the uploaded file name, you can skip the second label line in HTML.

<label for="submit_file"><i class="fas fa-file-upload"></i> Upload File</label>
<input id="submit_file" name='submit_file' type="file" value="Upload">