Created
November 27, 2012 08:56
-
-
Save elutz/4153228 to your computer and use it in GitHub Desktop.
File Upload with AngularJS & File-Upload jQuery Plugin
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 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']; |
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
| <!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> |
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
| angular.module('myservices', ['ngResource']) | |
| .factory('Docs', function($resource) { | |
| return $resource('docs/:docId', {}, { | |
| query: {method: 'GET', | |
| params: {docId: 'docs.json'}, | |
| isArray: true } | |
| }); | |
| }) |
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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
zz