Image name vanishes while click on input type file field using Angular.js

Question

I have one issue. I am using ng-file-upload to upload images using Angular.js. Here my problem is while user is selecting the file for second time on same file field the previous choosed image name is not showing. I am explaining my code below.

<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">

Here suppose user selected one image lets say abc.png for first time. Again user clicked on that same input field and when the file dialog box is opening the first image i.e-abc.png is disappearing even user has not selected next image yet. similarly if user is clicked on cancel option in that file dialog box the previous choose image name is not showing in file field which should not happen.

Here I need until unless user has not selected the second image for the same file field the previous image name should display on that file field.Please help me.

Answer 1

You can Try this.

This will solve your problem.

HTML

<div>
<label>profile picture</label>
<div class="upload" flex ng-show="!avatar" ngf-change="fileSelected(avatar, $files)" ngf-keep="false" ngf-select="true" ngf-drop="true" ng-model="avatar" ngf-capture="'camera'" ngf-drag-over-class="'highlight'" ngf-allow-dir="false"  ngf-min-size="10 " ngf-max-size="30000">
<span class="md-caption"><i class="fa fa-paperclip"></i> Drag-and-drop or click to attach a file</span>
</div>
<p ng-show="avatar && avatar.name" class="md-caption">Selected avatar: {{avatar.name|filename|truncate:false:35}} <i class="fa fa-times text-danger" ng-click="avatar = null"></i></p>
<p ng-show="avatar && !avatar.name" class="md-caption">Current avatar: {{avatar|filename|truncate:false:35}} <i class="fa fa-times text-danger" ng-click="avatar = null"></i></p>
</div>

CSS

.upload {
    width: 100%;
    min-height: 40px;
    padding: 20px 10px;
    text-align: center;
    transition: all 0.3s linear;
    border: 2px solid $color-lilac;

    &.highlight {
      border: 4px double $color-true-blue;
    }
  }