<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="font-awesome@*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="fileUploadCtrl">
<h2>Image upload</h2>
<div>
<div img-upload method="POST" url="webfreaks.in/dummyService"></div>
</div>
</body>
</html>
var app=angular.module("app",[]);
app.controller("fileUploadCtrl",['$scope',function($scope){
}]);
app.directive("imgUpload",function($http,$compile){
return {
restrict : 'AE',
scope : {
url : "@",
method : "@"
},
template : '<input class="fileUpload" type="file" multiple />'+
'<div class="dropzone">'+
'<p class="msg">Click or Drag and Drop files to upload</p>'+
'</div>'+
'<div class="preview clearfix">'+
'<div class="previewData clearfix" ng-repeat="data in previewData track by $index">'+
'<img src={{data.src}}></img>'+
'<div class="previewDetails">'+
'<div class="detail"><b>Name : </b>{{data.name}}</div>'+
'<div class="detail"><b>Type : </b>{{data.type}}</div>'+
'<div class="detail"><b>Size : </b> {{data.size}}</div>'+
'</div>'+
'<div class="previewControls">'+
'<span ng-click="upload(data)" class="circle upload">'+
'<i class="fa fa-check"></i>'+
'</span>'+
'<span ng-click="remove(data)" class="circle remove">'+
'<i class="fa fa-close"></i>'+
'</span>'+
'</div>'+
'</div>'+
'</div>',
link : function(scope,elem,attrs){
var formData = new FormData();
scope.previewData = [];
function previewFile(file){
var reader = new FileReader();
var obj = new FormData().append('file',file);
reader.onload=function(data){
var src = data.target.result;
var size = ((file.size/(1024*1024)) > 1)? (file.size/(1024*1024)) + ' mB' : (file.size/ 1024)+' kB';
scope.$apply(function(){
scope.previewData.push({'name':file.name,'size':size,'type':file.type,
'src':src,'data':obj});
});
console.log(scope.previewData);
}
reader.readAsDataURL(file);
}
function uploadFile(e,type){
e.preventDefault();
var files = "";
if(type == "formControl"){
files = e.target.files;
} else if(type === "drop"){
files = e.originalEvent.dataTransfer.files;
}
for(var i=0;i<files.length;i++){
var file = files[i];
if(file.type.indexOf("image") !== -1){
previewFile(file);
} else {
alert(file.name + " is not supported");
}
}
}
elem.find('.fileUpload').bind('change',function(e){
uploadFile(e,'formControl');
});
elem.find('.dropzone').bind("click",function(e){
$compile(elem.find('.fileUpload'))(scope).trigger('click');
});
elem.find('.dropzone').bind("dragover",function(e){
e.preventDefault();
});
elem.find('.dropzone').bind("drop",function(e){
uploadFile(e,'drop');
});
scope.upload=function(obj){
$http({method:scope.method,url:scope.url,data: obj.data,
headers: {'Content-Type': undefined},transformRequest: angular.identity
}).success(function(data){
});
}
scope.remove=function(data){
var index= scope.previewData.indexOf(data);
scope.previewData.splice(index,1);
}
}
}
});
.clearfix{
overflow: auto;
}
.dropzone {
position: relative;
height: 200px;
border: 2px dashed #b3b3b3;
border-radius: 4px;
background-color: #f3f3f3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropzone .msg{
font-size: 20px;
font-weight: bold;
color: #c3c3c3;
padding: 0 10px;
}
input.fileUpload{
display: none;
}
.preview{
margin: 10px 0;
padding: 5px;
}
.previewData img{
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.previewDetails{
display: inline-block;
float: left;
margin: 5px;
padding: 8px;
}
.detail{
font-family: arial;
padding: 5px;
overflow: hidden;
max-width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
}
.previewControls{
display: inline-block;
float: left;
margin: 40px 30px;
}
.circle{
border: 2px solid #5B93F5;
border-radius: 20px;
display: inline-block;
height: 25px;
width: 25px;
margin: 5px;
cursor: pointer;
color: #5B93F5;
}
.circle.upload:hover{
border: 2px solid green;
}
.circle.upload:hover i.fa-check{
color: green;
}
.circle.remove:hover{
border: 2px solid red;
}
.circle.remove:hover i.fa-close{
color: red;
}
.circle i{
position: relative;
font-size: 14px;
}
.circle i.fa-check{
top: 3px;
left: 5px;
}
.circle i.fa-close{
top: 2px;
left: 7px;
}