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

Question

I am using ng-file-upload to upload images using Angular.js. My problem is while user is selecting the file for second time on same file field the previously chosen image name is not showing.

Here is my code:

<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 ie-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.

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;
    }
  }