Change System Logo

Question

I am creating in a system that I am developing for our client, a function where it allows the same to upload the logo and cut the same, then when it saves I am trying to load the image that was uploaded, but it turns out I always need to be the same name and in the same destination and the browser can’t update the same one, for example:

Current image name = logo.png;

after uploading the image name continues logo.png but with another image saved, because if you reload the page the logo is applied as it should, I wonder if you have any way to do this without reloading the page, follow the code that I use to set the image:

$scope.carregarLogo = function(name){
    if($scope.img_name=== '' && angular.isUndefined(name) || name === ''){
       $scope.img_name = url_sistema + 'web_files/img/logo.png';
       $('#img').attr('src',$scope.img_name);
       console.log('deu');
    }else{
       $scope.img_name = name;
       $('#img').attr('src',$scope.img_name);
       console.log($('#img').attr('src'));
       console.log('deu2');
    }
};

Answer 1

Mixing Angularjs with jQuery within your controller is never a good idea, because the two are frameworks with different purposes. jQuery is for DOM manipulation and Angularjs is for DOM-influenced data manipulation.

Basically, to solve your problem, you need to "think in the Angularjs way" and forget what you know of jQuery, at least at first.

A possible solution to your problem:

$scope.carregarLogo = function(name){
    if($scope.img_name=== '' && angular.isUndefined(name) || name === ''){
       $scope.img_name = url_sistema + 'web_files/img/logo.png';
    }else{
       $scope.img_name = name;
    }
};

<div ng-controller="SeuController">
  <img ng-src="{{img_name}}">
</div>

Assuming that your Function carregarLogo is inside a controller. Note that in html I am using a native angular Directive, the ngSrc.

Now returning to the subject "use jQuery within the angular". Whenever you need to do this, create a Directive to put your DOM manipulations inside. And whenever changing $Scope values through jQuery functions use the $scope.apply() then to update the scope values (inside Directive).

Answer 2

Guys, I found a solution here, so I do not need to give the page the Reload, masss has a single problem, can not be added an image with the name that will always be the same (eg:logo.png) the folder from which will be selected this image to set in some , because otherwise will not work, the only way to work is when I create the file by PHP, because then you will not need to replace the file that exists there works, follow the code if you want to test, feel free:

$scope.carregarLogo = function (name) {
    if ($scope.img_name === '' && angular.isUndefined(name) || name === '') {
        $scope.img_name = url_sistema + 'web_files/img/logo.png';
        $('#img').attr('src', $scope.img_name);
        console.log('deu');
    } else {
        var random = (new Date()).toString();
        $scope.img_name = name + "?date=" + random;
        console.log($scope.img_name);
        $('#img').attr('src', $scope.img_name);
        console.log($('#img').attr('src'));
        console.log('deu2');
    }
};

THANK YOU FOR YOUR HELP, A VERY, GREAT DAY TO ALL FLW