Angular directive for blueimp/jQuery-File-Upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div ng-controller="uploadCtrl as upload"> | |
<!-- input file | |
input name can be changed to fit the server side | |
--> | |
<input type="file" name="myFile" | |
file-read | |
upload-data="upload.data", | |
preview="upload.preview", | |
validate="upload.validate.file"/> | |
<!-- error message --> | |
<div ng-show="!!upload.error.file">{{upload.error.file}}</div> | |
<!-- preview --> | |
<div load-image preview="upload.preview"></div> | |
<!-- submit button--> | |
<button ng-disabled="!upload.validate.upload()" | |
ng-click="upload.submit()">SUBMIT</button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
function uploadCtrl(){ | |
var vm = this; | |
//public | |
vm.data = null; // bind to fileRead directive | |
vm.preview = null; // bind to fileRead and loadImage directive | |
vm.error = { | |
file:'' | |
}; | |
vm.validate = { | |
file : function(file){ | |
if(!/\.(jpg|jpeg|png)$/i.test(file.name)){ | |
// WRONG FILE TYPE | |
vm.error.file = "WRONG FILE TYPE"; | |
return false; | |
}else if(file.size > 2097152){ | |
// FILE SIZE EXCEEDS 2MB | |
vm.error.file = "FILE SIZE EXCEEDS 2MB"; | |
return false; | |
}else{ | |
vm.error.file = ""; | |
return true; | |
} | |
}, | |
upload : function(){ | |
return !!vm.data; | |
} | |
} | |
vm.submit = function(){ | |
if(vm.validate.upload()){ | |
// assign custom formData if needed | |
// vm.data.formData = {}; | |
// do submit | |
vm.data.submit().then(function(res){ | |
if(!!res.error){ | |
// handle server side error | |
}else{ | |
// haddle success | |
// if you need to talk to other controller | |
// use $rootScope.$emit to send event | |
} | |
}); | |
} | |
} | |
} | |
uploadCtrl.$inject=[]; | |
// fileRead directive | |
function fileReadDirective($timeout){ | |
return { | |
scope:{ | |
uploadData:"=", | |
preview:"=", | |
validate:"=" | |
}, | |
link : function(scope,elm,attr){ | |
var $input = $(elm.context); | |
$input.fileupload({ | |
url:" UPLOAD URL GOES HERE ", // can hardcoded or use scope to pass through | |
dataType: 'json', | |
autoUpload: false, | |
add:function(e,data){ | |
var file = data.files[0]; | |
var pass = true; // by default true unless there is any validate fn | |
if(!!scope.validate){ | |
pass = scope.validate(file); | |
} | |
$timeout(function(){ // 3rd party async event so wrap with $timeout | |
if(pass){ | |
scope.preview = file; | |
scope.uploadData = data; | |
}else{ | |
scope.preview = null; | |
scope.uploadData = null; | |
} | |
},0); | |
} | |
}); | |
} | |
} | |
} | |
fileReadDirective.$inject = ['$timeout']; | |
// loadImage directive | |
function loadImageDirective(){ | |
return { | |
scope:{ | |
preview:"=" | |
}, | |
link : function(scope,elm,attr){ | |
var $elm = $(elm.context); | |
scope.$watch('preview',function(file){ | |
if(!!file){ | |
loadImage(file,function(preview){ | |
$elm.html(preview); | |
},{maxWidth:300}); | |
}else{ | |
$elm.html(''); | |
} | |
}); | |
} | |
} | |
} | |
// APP declare | |
angular.module('ngUpload',[]) | |
.controller('uploadCtrl',uploadCtrl) | |
.directive('fileRead',fileReadDirective) | |
.directive('loadImage',loadImageDirective); | |
})(window.jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment