danialfarid / ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
MIT License
7.87k stars 1.6k forks source link

Img Tag defalutly loading #2113

Open dileepbalineni opened 5 years ago

dileepbalineni commented 5 years ago

Issue: while uploading the image defaultly loading img tag and where ever we are trying to upload multiple times image not clearing Step1 image Step2: image Step3 image Here is HTML Code :

<div class="col-sm-3">
    <input type="file"  ng-click="clear()" 
      onchange="angular.element(this).scope().upload(event)" accept="image/png, image/jpeg,image/jpg" style="display: block;"  />
  </div>
  <div class="col-sm-3">
    <button class="btn btn-primary btn-md" ng-click="click()">Upload</button>
  </div>

Here is java script code :

$scope.setImage = function (image) {
        $scope.display = $scope.images[image];
    }

    $scope.upload = function (obj) {
        var elem = obj.target || obj.srcElement;
            $scope.file = elem.files[0];
            var reader = new FileReader();

            $scope.fileName =   $scope.file.name;             
            reader.onload = function (e) {
                $scope.display = e.target.result;
                $scope.$apply();
            }
            reader.readAsDataURL($scope.file);
    }   
                                $scope.afterClick = false;
                                $scope.loadingImages = true;
                                $scope.errors = true;

                                $scope.click = function() {
                                $scope.loadingImages = false;
                                Upload.upload(
                                                {
                                                    method : 'POST',
                                                    url : 'http://localhost:8080/image/getDeepLearningPredections',
                                                    file : $scope.file,
                                                    data : {
                                                        fileName : $scope.fileName,
                                                    }
                                                })
                                        .then(
                                                function(response) {
                                                    try {
                                                        if (response.data["Status"] != "Okay") {
                                                            $scope.errors = false;
                                                            $scope.errorMessasge = response.data["Status"];
                                                            Notification
                                                                    .error(response.data["Status"]);
                                                            $scope.loadingImages = true;
                                                        } else {
                                                            $scope.loadingImages = true;
                                                            var outputData = JSON
                                                                    .stringify(response.data);
                                                            $scope.attributes = JSON
                                                                    .parse(outputData).Attributes;

                                                                $scope.displayImage = $scope.display;
                                                                $scope.afterClick = true;

                                                                $scope.loadingImages = true;
// }
                                                        }

                                                    } catch (e) {
                                                        console.log(e);// you
                                                    }

                                                })
                                    }

Please Replay the issue