How to upload image to an existing image src in angularjs, css

Question

I have a table and have a upload picture. I also have a picture that is already displayed. What I want to do is when I upload a new picture it will overwrite the already displayed picture. In my fiddle I have a duck pic and when I upload new pic it display as another image. How can I hide the duck pic when the user upload new pic?

Link in my fiddle: http://jsfiddle.net/DharkRoses/m2qagzzk/6/

sample code:

angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout) {

$scope.thumbnail = {
    dataUrl: []
};

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
    if (files != null) {
        var file = files[0];
        var index = this.$index;
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.thumbnail[index] = {dataUrl: e.target.result};
                    });
                }

http://stackoverflow.com/a/33342251/3030495 It will help you. — hurricane, Nov 13 '15 at 07:30

score 2 · Answer 1 · answered Nov 13 '15 at 07:38

2

Use this code:: demo

<img ng-if="!thumbnail[$index].dataUrl"ng-src="http://s13.postimg.org/w0v662g93/pink_04.png" height="50px" />

answered Nov 13 '15 at 07:38

Upalr

2,140
2
23
33

Yes it works. I like to upvote ur answer but my reputation is not enough. Thank u very much – qazzu Nov 13 '15 at 07:43

score 0 · Accepted Answer · answered Nov 13 '15 at 07:35

AngularJS views support binary operators

condition && true || false

You can use ng-src with conditions:

<img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />

HTML:

<tr ng-repeat="i in [1, 2, 3, 4]">
            <td>{{i}}</td>
            <td>
                <input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />                           </td>
            <td>
                <img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />
            </td>
   </tr>

fiddle

Both answers are work. So I will accept the answer of the one who made the first post. Thank u very much — qazzu, Nov 13 '15 at 07:42

How to upload image to an existing image src in angularjs, css

2 Answers2