hussain hussain - 1 month ago 6
AngularJS Question

How to use angular file upload in glyphicon?

I want to open local file using bootstrap glyphicon so i am trying to use this example https://jsfiddle.net/JeJenny/ZG9re/ but its not working, Any idea how can i use this approach with images like glyphicon ?

main.html

<li><a href="#"><span class="glyphicon glyphicon-folder-open"><input type="file" file-model="myFile"/></span></a></li>


mainCtrl.js

$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};

Answer

Here is the solution.You need to use label since using span is outdated

Fiddle

<a href="#" class="btn btn-info btn-lg">
<label class="glyphicon glyphicon-folder-open">  Browse
<input type="file" file-model="myFile" style="display: none;"/> </label></a>

Similarly you can add for the upload button also

Comments