CODEWITHSUNDEEP
jqueryhtmlangularjsfile
user6882159
user6882159

Reputation:

get the url of the selected file from input file html/angularjs

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)

Upvotes: 0

Views: 4253

Answers (4)

Sa E Chowdary
Sa E Chowdary

Reputation: 2075

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="[email protected]" 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>

Upvotes: 0

Tuhin
Tuhin

Reputation: 3373

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

Upvotes: 1

Akshay Kumar
Akshay Kumar

Reputation: 576

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 />

Upvotes: 0

Brian Jenney
Brian Jenney

Reputation: 1

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"/>

Upvotes: 0

Related Questions