Custom File Upload

by Kumaresan S

HTML

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload
  </label>
  <input id="upload" name='upload_cont_img' type="file" style="display:none;">
</form>

CSS

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

JavaScript

$('#upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#file-upload')[0].files[0].name;
  $(this).prev('label').text(file);
});