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> |
Thanks!
Hi there,
This project is exactly what I am looking for.
Unfortunately I can't get it working.
Could you possibly provide a full valid sample project (with lib included)?
Example of issue I am having:
- In forms.html we have ng-show="project.showdocs". I cannot find the project.showdocs property in the controller.
- In form.html there is <div ng-include="'includes/detailupload.html'"></div>. It should be <div ng-include="'includes/upload.html'"> ?
- The on method is empty $scope.$on('fileadded', function(e, parameters) {
//
});
Thank you
sorry for junk comment, the comment prompt is stuck open on this page and leaving a comment seems to be only way to close it.
a
Can't get rid of comment box
lji
ZSDSASD
Stupid comment window
Be gone modal window!
1
nice one
zz
sdsd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
File Upload using AngularJS http://angularjs.org/ and the jQuery-File-Upload plugin http://blueimp.github.com/jQuery-File-Upload/