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

I know whats happening there but need a plunker of your issue to catch the culprit ! I assume your ng-model is making noise here.It's getting cleared on blur event — ngCoder
– ngCoder, Commented Sep 22, 2016 at 6:38

Rajath M S · Accepted Answer · 2016-10-05 15:55:43Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

You can Try this.

HTML

CSS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You can Try this.

HTML

CSS

Comments

Your Answer

Sign up or log in

Post as a guest

Related