0

I am creating a web app in mvc-5 with angularjs

here I have the following div

<div class="row form-clearify" style="margin-top:3px;">
    <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:whitesmoke;">
       <label>Upload Your Photo</label>
       <input type="file" ng-model="mdphoto" class="form-control" />
    </div>
    </div>
    <div class="row form-clearify" style="margin-top:3px;">
    <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:whitesmoke;">
        <label>Login Id</label>
        <input type="text" class="form-control" ng-change="filepath()" ng-model="mdlogin" />
    </div>
    </div>

this is my div

<input type="file" ng-model="mdphoto" class="form-control" />

this input field will open my file dialogue and on ng-change="filepath()" id did the following coding

$scope.filepath = function () {
            console.log($scope.mdphoto);
        }

I am printing the data which is coming from my file dialogue(I want url of the files)

but undefined is printing on my web page(console)

what I need to do is, I want file path of the selected file(with filename)

M. Junaid Salaat
  • 3,765
  • 1
  • 23
  • 25

4 Answers4

1

There is an issue with input type file in AngularJs . https://github.com/angular/angular.js/issues/1375

Try to create your own directive for input type file : See The Solutions --

ng-model not working with file input

Community
  • 1
  • 1
Tuhin
  • 3,335
  • 2
  • 16
  • 27
0

I had this same issue and found some good answers on S.O. You'll need to use a directive to bind the file to your ng-model. Here's the link: ng-model for <input type="file"/>

Community
  • 1
  • 1
Brian Jenney
  • 1
0

You cannot get the physical address of the file on your machine. HTML input type file returns file object.

You can create a directive for fetching name and size of the file like this,

app.directive('fileupload', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;
                console.log(files[0].name);
                console.log(files[0].size);
            });
        }
    }
}]);

Use it like 

<input type="file" ng-model="mdphoto" class="form-control" fileupload />
Akshay Kumar
  • 576
  • 2
  • 10
  • but nothing is printing here –  Dec 22 '16 at 06:17
  • try printing console.log(files) and check wether you get anything? – Akshay Kumar Dec 22 '16 at 06:19
  • `var app = angular.module('', ['angularjs-datetime-picker', 'ngMaterial']); app.controller('', function ($scope, $http, $q, $timeout, $mdDialog, $window) { app.directive('fileupload', [function () { return { link: function (scope, element, attrs) { element.on('change', function (evt) { var files = evt.target.files; console.log(files[0].name); console.log(files[0].size); }); } } }]);` –  Dec 22 '16 at 06:21
  • `$scope.filepath = function () { console.log($scope.mdphoto); console.log(files[0].name); console.log(files[0].size); }` this is my code –  Dec 22 '16 at 06:22
  • ReferenceError: files is not defined at m.$scope.filepath (add:1004) and here is the error –  Dec 22 '16 at 06:23
  • i am getting file name,size and type details but nothing about path – Sa E Chowdary Dec 22 '16 at 06:24
  • add app.directive outside of your controller function not inside. – Akshay Kumar Dec 22 '16 at 06:24
  • I mentioned that you cannot the get the physical path of the file in your machine. Input type file returns file object with its properties. – Akshay Kumar Dec 22 '16 at 06:25
0

i had tired a little with jquery hope this will helps you 

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="row form-clearify" style="margin-top:3px;">
    <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:whitesmoke;">
       <label>Upload Your Photo</label>
       <input type="file" ng-model="mdphoto"   id="fileSelected" class="form-control" />
    </div>
    </div>
   
    <p id="filePath"></p> 
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $('#fileSelected').on('change', function (evt) {
        var files = $(evt.currentTarget).get(0).files;
        
        if(files.length > 0) {
        
            $('#filePath').text($('#fileSelected').val());
        }
    });
});
</script>
</html>
Sa E Chowdary
  • 2,075
  • 15
  • 31
  • thank you but sir, this is how my path is showing here `C:\fakepath\debug.log` –  Dec 22 '16 at 06:27
  • Because you cannot get the exact path of the file in your machine. The browser replaces the path to a fakepath. – Akshay Kumar Dec 22 '16 at 06:29