Skip to content

Instantly share code, notes, and snippets.

@nightspirit nightspirit/ngUpload.htm
Last active Aug 29, 2015

Embed
What would you like to do?
Angular directive for blueimp/jQuery-File-Upload
<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>
(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
You can’t perform that action at this time.