I have a function in angularJS where I need to get the path of the File while uploading. Here is the code
$scope.uploadFile = function (element) {
$scope.filetemplate = false;
$scope.spinround2 = true;
var filename = event.target.files[0].name;
var filepath = event.target.value;
}
The problem is that I get the filepath as c:/fakepath even I try to retrieve the file from any drive. Can someone give a solution for this.
The local file path is not exposed by browsers for obvious security reasons.
From the HTML5 Docs:
For historical reasons, the
valueIDL attribute prefixes the file name with the string"C:\fakepath\". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the file name from thevalueIDL attribute in a backwards-compatible way is non-trivial. The following function extracts the file name in a suitably compatible manner:function extractFilename(path) { if (path.substr(0, 12) == "C:\\fakepath\\") return path.substr(12); // modern browser var x; x = path.lastIndexOf('/'); if (x >= 0) // Unix-based path return path.substr(x+1); x = path.lastIndexOf('\\'); if (x >= 0) // Windows-based path return path.substr(x+1); return path; // just the file name }This can be used as follows:
<p><input type=file name=image onchange="updateFilename(this.value)"></p> <p>The name of the file you picked is: <span id="filename">(none)</span></p> <script> function updateFilename(path) { var name = extractFilename(path); document.getElementById('filename').textContent = name; } </script>— HTML Living Standard - The definition of
<input type="file">
