scope variable after select file isn't changed its value

Question

I tried to change scope value to file path after select a file.

This is html file

<input type="file" name="file" onchange="angular.element(this).scope().showFilePath(this)">
<div>{{filename}}</div>

in controller

angular.module('app')
.controller('UploadFile', function($scope){
    $scope.filename = 'please upload a file'
    $scope.showFilePath = function(file){
    console.log(file.value)
    $scope.filename = file.value
    console.log($scope.filename)
  }
})

Where console.log($scope.filename) is showing "C:\fakepath\1m.jpg" but in webpage it still shows "please upload a file"

How can I deal with this?

Thank you

score 2 · Accepted Answer · answered Dec 23 '17 at 10:34

2

I hope you have tried this

    $scope.showFilePath = function(file) {
     console.log(file.value)
     $scope.filename = file.value
     $timeout(function() {
        $scope.$apply();
     }, 1000)
    }

answered Dec 23 '17 at 10:34

Devang Naghera

731
6
13

Ohhh, that works! Thank you :) so we need to wait for a moment for reapply angular scope value, right? – AimeTPGM Dec 23 '17 at 10:39

scope variable after select file isn't changed its value

1 Answers1