Why image upload is not displaying the image preview text?

Question

I have customized my form upload button and hide the input field via css display:none but when I select an image the input is not showing the preview text!

I want to display the selected image preview text so that user know he has selected an image!

HTML:

<div class="form-group">
    <label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
    <input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image">                        
    <span>No file chosen</span>
</div>

CSS:

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
input[type=file] {
    display: none;
}

 input[type=file]{
    display:none;
}
 .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<div class="form-group">
 <label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
 <input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image">                        <span>No file chosen</span>
</div>

UPDATE: I tried all these solutions (How to display file name for custom styled input file using jquery?) but none worked for me. In my scenario I have two upload buttons one is before image upload and second is after image upload as shown in video.

Still I can't display the preview text in front of the upload buttons.

Possible duplicate of [How to display file name for custom styled input file using jquery?](https://stackoverflow.com/questions/41542845/how-to-display-file-name-for-custom-styled-input-file-using-jquery) — Lalji Tadhani, May 30 '19 at 10:33

Thomas Gak-Deluen · Answer 1 · 2019-05-30T10:54:33.693

1

It does not work because your <span>No file chosen</span> is static.

Try:

<div class="form-group">
    <label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
    <input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image">                        
    <span id="images"></span>
</div>

<script type="text/javascript">
var field = document.getElementById('before_image');
var span = document.getElementById('images');

field.addEventListener('change', function() {
    var img = document.createElement('img');
    img.src = field.files[0].getAsDataURL();
    span.appendChild(img);
});
</script>

edited May 30 '19 at 10:54

answered May 30 '19 at 10:33

Thomas Gak-Deluen

2,759
2
28
38

Console error: Uncaught TypeError: field.files.item(...).getAsDataURL is not a function – Iftikhar uddin May 30 '19 at 10:41
Try again, I fixed it. `field.files[0].getAsDataURL();` – Thomas Gak-Deluen May 30 '19 at 10:54
Thanks for replying but still it says : `Uncaught TypeError: field.files[0].getAsDataURL is not a function` – Iftikhar uddin May 30 '19 at 10:58

score 1 · Accepted Answer · answered May 30 '19 at 11:37

Just add a new function in input type file on onchange event. Please find the attached code.

 input[type=file]{
    display:none;
}
 .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<div class="form-group">
 <label for="before_image" class="custom-file-upload"><i class="fa fa-cloud-upload"></i> Before Image*</label>
  <input type="file" id="before_image" name="before_image" class="form-group" placeholder="Before Image" data-bind="value: before_image" onChange="((e)=>{
file = e.target.files.item(0);
var fr = new FileReader;
fr.onloadend =(imgsrc)=>{
  imgsrc = imgsrc.target.result; // file reader
var img = document.createElement('img');
    img.src =imgsrc;
this.nextSibling.nextSibling.innerHTML='';
this.nextSibling.nextSibling.appendChild(img);
};
fr.readAsDataURL(file);
})(event)">
<span>No file chosen</span>
</div>

Why image upload is not displaying the image preview text?

2 Answers2