0

I have a file upload button, and I want to get the path of selected file.
Here's my code:

var pniotApp = angular.module('pniotApp', []);
pniotApp.controller('pniotCtrl', function ($scope, $http, $location) { 
    var temp = [];
    Array.prototype.push.apply(temp, element.files);
    for (i = 0; i < temp.length;i++)
        $scope.fileBuffer.push(temp[i])
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body dir="rtl" ng-app="pniotApp" ng-controller="pniotCtrl">
  <input id="uploadFile" type="file" class="filestyle" data-classButton="btn btn-primary"  multiple        data-input="false"  data-classIcon="icon-plus"    onchange="angular.element(this).scope().fileSelected(this)" data-buttonText="uplaod...">
 
</body>
Note: I'm using 'temp' because element.files doesn't behave like an normal array.

How can I get the relative path of the files?
I tried to do this

document.getElementById("uploadFile").value

But I get just the path of the first file.
What can I do?

Pixelomo
  • 6,373
  • 4
  • 47
  • 57
Tzof
  • 193
  • 12
  • refer this link https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav. For security reasons browsers do not disclose file path – user1608841 Aug 02 '17 at 08:24

1 Answers1

0

You can't access the path for security reasons but since you are satisfied with .value for a single entry, I will assume you mean the file name.

A file input will have a files property that contains a list of the selected files (you can loop over it like an array). The objects inside each have a name property that will give you the file name.

document.querySelector("input").addEventListener("change", list_files);

function list_files() {
  var files = this.files;
  for (var i = 0; i < files.length; i++) {
    console.log(files[i].name);
  }
}
<input type="file" multiple>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I need to get the path and document.getElementById("uploadFile").value give me the loction of the file. – Tzof Aug 02 '17 at 08:39
  • `document.getElementById("uploadFile").value` typically gives you something like `c:\fakepath\the-actual-name`. As the linked question says, you can't get the full path. – Quentin Aug 02 '17 at 08:43
  • yes, I see, can i get something like c:\fakepath\the-actual-name for all the files? – Tzof Aug 02 '17 at 08:49
  • ```c:\fakepath\``` is utter nonsense. It is made up junk designed to look like a full path while leaking no information about how the user organises their files. So you can take the name (as per the code in this answer) and put your own utter nonsense at the front of it. `console.log("C:\\fakepath\\" + files[i].name);` – Quentin Aug 02 '17 at 08:50