File input custom text in jQuery and CSS3

Question

I was successful in customizing the file input using jQuery and CSS3.

However, there is one thing I was not able to do. I want to show the text of the file selected after the user selected the image or file at the very bottom of the text like this:

So far here's my codes. Here's the HTML:

 <div class="container-avatar">
                    <div class="avatar-upload">
                      <div class="avatar-edit">
                        <input accept=".png, .jpg, .jpeg" id="imageUpload" type='file'> <label for="imageUpload"></label>
                      </div>
                      <div class="avatar-preview">
                        <div id="imagePreview" style="background-image: url('http://softorius.ro/images/about1.jpg');"></div>
                      </div>
                    </div>

Here's the CSS:

.container-avatar {
  max-width: 115px;
  margin: 0px auto;
}

.avatar-upload {
  position: relative;
  max-width: 200px;
  margin: 10px auto;
}

.avatar-upload .avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}

.avatar-upload .avatar-edit input {
  display: none;
}

.avatar-upload .avatar-edit input+label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
  background: #fff;
  border-color: #d6d6d6;
}

.avatar-upload .avatar-edit input+label:after {
  content: "\f040";
  font-family: 'FontAwesome';
  color: #007BFF;
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}

.avatar-upload .avatar-preview {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview>div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

And here's my jQuery:

 function readURL(input) {
     if (input.files && input.files[0]) {
         var reader = new FileReader();
         reader.onload = function(e) {
             $('#imagePreview').css('background-image', 'url('+e.target.result +')');
             $('#imagePreview').hide();
             $('#imagePreview').fadeIn(650);
         }
         reader.readAsDataURL(input.files[0]);
     }
  }
  $("#imageUpload").change(function() {
     readURL(this);
  });

All of my codes are hosted on JSFIDDLE: https://jsfiddle.net/wtvrzj91/1/

Frankusky · Accepted Answer · 2020-01-11 04:02:27Z

2

Its pretty easy and actually you already are reading the file data here:

To get the name you need to access to the name property: input.files[0].name and to populate it just create a div, and with javascript insert the string to that div, example:

HTML:

<div class="imageFilename"></div>

Javascript(inside readURL function):

document.querySelector(".imageFilename").innerHTML = input.files[0].name;

answered Jan 11, 2020 at 4:02

Frankusky

1,0939 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raeesh Alam · Accepted Answer · 2020-01-11 07:14:48Z

From this below snippet to set file name text on bottom side of selected image area.

I have little bit changes into your css code because you can not set display:none (input[type="file"]) due to Safari browser instructions so we can use opacity:0 and I set edit icon middle+center in circle div and set input[type="file"] inside label element so now you can drag and drop image file on edit icon area.

Also tested drag-n-drop its working.

function readURL(input) {
 	if (input.files && input.files[0]) {
   	var reader = new FileReader();
   	reader.onload = function(e) {
			$('#imagePreview').css('background-image', 'url('+e.target.result +')');
			$('#imagePreview').hide().fadeIn(650);
   	}
   	reader.readAsDataURL(input.files[0]);
   	$('.imageFilename').html(input.files[0].name).attr('title', input.files[0].name);
 	}
}
$("#imageUpload").change(function() {
 	readURL(this);
});

.container-avatar {
  max-width: 115px;
  margin: 0px auto;
}
.avatar-upload {
  position: relative;
  max-width: 200px;
  margin: 10px auto;
}
.avatar-upload .avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}
.avatar-upload .avatar-edit label{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input{
	position: absolute;
  opacity: 0;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.avatar-upload .avatar-edit label:hover {
  background: #fff;
  border-color: #d6d6d6;
}
.avatar-upload .avatar-edit label:after{
  content: "\f040";
  font-family: 'FontAwesome';
  color: #007BFF;
}
.avatar-upload .avatar-preview {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview>div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.imageFilename{
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br><br>

<div class="container-avatar">
  <div class="avatar-upload">
    <div class="avatar-edit">
      <label title="Upload Image"><input accept=".png, .jpg, .jpeg" id="imageUpload" type='file'></label>
    </div>
    <div class="avatar-preview">
      <div id="imagePreview" style="background-image: url('http://softorius.ro/images/about1.jpg');"></div>
    </div>
  </div>
  <div class="imageFilename"></div>
</div>

Collectives™ on Stack Overflow

File input custom text in jQuery and CSS3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related