0

I just can't see how to get the value of a file name returned from an <input type="file" /> element.

This fiddle looks extremely simple. It pops up a file select dialog, it even displays the selected file name. BUT, I just can't see how to get that file name as a $scope variable.

Can someone please add that to the fiddle, OR post or direct me to an extremely simple code example?

omalyutin
  • 445
  • 7
  • 24
Mawg says reinstate Monica
  • 38,334
  • 103
  • 306
  • 551

1 Answers1

3

in your actual code: $scope.myFile.name will contain the file name. this variable is binded to the input with file-model by the directive fileModel that you define 

<div ng-controller = "myCtrl">
    file name : {{myFile.name}}<br>
    <input type="file" file-model="myFile"/>
    <button ng-click="uploadFile()">upload me</button>
</div>

$scope.uploadFile = function(){
    var file = $scope.myFile; // $scope.myFile is set buy the directive
    console.log('file is ' + $scope.myFile.name ); 
    var uploadUrl = "/fileUpload";
    fileUpload.uploadFileToUrl(file, uploadUrl);
};
georgeawg
  • 48,608
  • 13
  • 72
  • 95
AlainIb
  • 4,544
  • 4
  • 38
  • 64
  • Can you please tell me how you know that? – Mawg says reinstate Monica Jan 08 '17 at 18:31
  • 1
    your initial code already contain the answer `console.dir(file)` ligne 39. the console log clearly show that `file.name` contain the filename lol. and for `ng-model="filename"` this is how angularjs work. to say this input is bind to this variable you use `ng-model="varname"` , if you don't know that i think you should read the official angular tutorial, you will win a lot of time after and see a lot of nice features: https://docs.angularjs.org/tutorial/step_00 Best regards – AlainIb Jan 08 '17 at 18:45
  • I don't see the connection between `$scope.filename` and `file.name` which is not in `$scope` And it is `file DOT name`, so no relation to `$scope.filename` – Mawg says reinstate Monica Jan 08 '17 at 18:50
  • 1
    there is no connexion between them, i read to fast your code and added another variable binding, this is useless because there is already one variable binded to the input with `file-model="myFile"` create by the directive of same name. i edited the answer – AlainIb Jan 08 '17 at 20:34
  • t still doesn't seem to update `$scope.myFile` (and do I even need that directive? I don't understand why it says `myApp.directive('fileModel'` when it uses `file-model` with hyphen on the `file-model="myFile"` ) – Mawg says reinstate Monica Jan 08 '17 at 20:49
  • 1
    it is a automatic in angular, it change camelCased name (directive name is `fileModel` ) name to `file-model` in html attribute . i always use simple minus letter to avoid this. EDIT : some reading her with clarification http://adndevblog.typepad.com/cloud_and_mobile/2015/08/should-we-use-camelcase-or-dash-delimited-in-angularjs.html – AlainIb Jan 08 '17 at 21:26
  • This has been extremely helpful (I am new to directives). Just the sort of excellent answer and explanation which sets an example for the site. – Mawg says reinstate Monica Jan 08 '17 at 22:05
  • 1
    glad it help. directives is extremly powerfull, a little note on how to pass data to directive (string/object, function ... ) http://pastebin.com/VBkhbt4b – AlainIb Jan 09 '17 at 07:03