jakubjosef
5/2/2013 - 10:24 AM
controller.js
<div class="control-group" ng-controller="AttachmentCtrl">
<label class="control-label" for="Dokumente">Documents</label>
<div class="controls">
<div class="row-fluid">
<div id="dropbox" class="span3">
<span class="btn fileinput-button">
<i class="icon-plus"></i>
<span>Add</span>
<input type="file" name="files[]" multiple>
</span>
</div>
<div class="span3" ng-show="toUpload">
<button id="startupload" type="button" class="btn btn-primary" ng-click="uploadFile()">
<i class="icon-upload icon-white"></i>
<span>Upload</span>
</button>
</div>
<div class="form-horizontal span6 pull-left" ng-show="progressVisible">
<div class="percent" ng-show="percentVisible">{{progress}}%</div>
<div class="progress progress-striped active">
<div class="bar" ng-style="{'width': progress+'%'}"></div>
<div class="bar bar-danger" ng-show="!percentVisible" style="width: 20%;"></div>
</div>
</div>
</div>
<div ng-show="project.files.length" class="row-fluid">
<table class="table table-striped">
<tbody>
<tr ng-repeat="file in project.files" class="template-upload fade in">
<td class="preview"><span class="fade in"><canvas width="40" height="24"></canvas></span></td>
<td class="name">
<a ng-show="file.loaded" href="{{file.url}}" target="{{file.name}}">{{file.webkitRelativePath || file.name}}</a>
<span ng-show="!file.loaded">{{file.webkitRelativePath || file.name}}</span>
</td>
<td class="size"><span>{{file.size/1024 | number:2}} KB</span></td>
<td class="cancel">
<button ng-show="file.loaded" type="button" class="btn" ng-click="deleteCurrentAttachment(file.id)">
<i class="icon-ban-circle"></i>
</button>
<button ng-show="!file.loaded" type="button" class="btn" ng-click="deleteCurrentAttachment()">
<i class="icon-ban-circle"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>angular.module('myservices', ['ngResource'])
.factory('Docs', function($resource) {
return $resource('docs/:docId', {}, {
query: {method: 'GET',
params: {docId: 'docs.json'},
isArray: true }
});
})
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<link href="css/jquery-ui.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal well-small" id="detail-form-doc" name="documents" ng-submit="submit()">
<fieldset ng-show="project.showdocs">
<legend>Files & Facts</legend>
<div ng-include="'includes/detailupload.html'"></div>
</fieldset>
</form>
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery-ui.js" type="text/javascript"></script>
<script src="../fileupload/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="../fileupload/js/jquery.fileupload.js" type="text/javascript"></script>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/angular/angular-resource.js" type="text/javascript"></script>
</body>function AttachmentCtrl($scope, $location, $timeout, Docs) {
$(function() {
$('#detail-form-doc').fileupload({
dataType: 'json',
url: '/angular-ib/app/fileupload?id=' + $location.search().id,
add: function(e, data) {
$scope.$apply(function(scope) {
// Turn the FileList object into an Array
for (var i = 0; i < data.files.length; i++) {
$scope.project.files.push(data.files[i]);
}
$scope.progressVisible = false;
$scope.$broadcast('fileadded',
{ files: $scope.project.files.length });
$scope.toUpload = true;
$('button#startupload').on('startupload', function(e) {
data.submit();
});
});
},
done: function(e, data) {
//
uploadComplete(e, data);
},
fail: function(e, data) {
},
progress: function(e, data) {
//
},
progressall: function(e, data) {
//
uploadProgressAll(e, data);
}
});
});
$scope.$on('fileadded', function(e, parameters) {
//
});
$scope.deleteCurrentAttachment = function(delid) {
if (delid) {
Docs.delete({ id: this.file.id });
}
$scope.project.files = $scope.project.files.filter(
function(val, i, array) {
return val !== this.file;
},
this);
$scope.toUpload = $scope.project.files.some(function(val, i) {
return !val.loaded;
});
};
$scope.uploadFile = function() {
$scope.progressVisible = true;
$scope.percentVisible = true;
$('button#startupload').trigger('startupload');
};
var waitloop, i;
function nextwait() { // <-> hin und her
waitloop = $timeout(function() {
$scope.progress = i % 100 - 20;
i += 10;
nextwait();
}, 500);
}
function uploadProgressAll(evt, data) {
$scope.$apply(function() {
$scope.progress = Math.round(data.loaded * 100 / data.total);
if (data.loaded === data.total) {
i = 0;
$scope.percentVisible = false;
nextwait(); // kickoff <-> hin und her
}
});
}
function uploadComplete(evt, data) {
/* This event is raised when the server send back a response */
$scope.$apply(function() {
$timeout.cancel(uploadProgressAll.waitloop);
$scope.progressVisible = false;
$scope.toUpload = false;
$scope.project.files =
$scope.project.files.map(function(file, index, array) {
var x = data.result.filter(function(f, i) {
return f.name == file.name;
});
if (x.length > 0) {
file.url = x[0].url;
}
if (!file.loaded) {
file.loaded = true;
}
return file;
});
//alert(evt.target.responseText);
});
}
function uploadFailed(evt) {
alert('There was an error attempting to upload the file.');
}
function uploadCanceled(evt) {
$scope.$apply(function() {
$scope.progressVisible = false;
});
alert('The upload has been canceled by the user or the browser ' +
'dropped the connection.');
}
}
AttachmentCtrl.$inject = ['$scope', '$location', '$timeout', 'Docs'];