Skip to content

Commit 1b4bb0b

Browse files
carlosb1carlosb1
committed
First try to upload files with angular
1 parent 4a7391f commit 1b4bb0b

File tree

4 files changed

+109
-91
lines changed

4 files changed

+109
-91
lines changed

‎app/static/js/app.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
'use strict';
22

3+
4+
5+
/*
6+
n app module
7+
* @name app
8+
* * @type {angular.Module}
9+
* */
10+
var app = angular.module('app', ['flow'])
11+
.config(['flowFactoryProvider', function (flowFactoryProvider) {
12+
flowFactoryProvider.defaults = {
13+
target: 'test.php',
14+
permanentErrors: [404, 500, 501],
15+
maxChunkRetries: 1,
16+
chunkRetryInterval: 5000,
17+
simultaneousUploads: 4,
18+
singleFile: true
19+
};
20+
flowFactoryProvider.on('catchAll', function (event) {
21+
console.log('catchAll', arguments);
22+
});
23+
// Can be used with different implementations of Flow.js
24+
// // flowFactoryProvider.factory = fustyFlowFactory;
25+
}]);
26+
/*
327
angular.module('AngularFlask', ['angularFlaskServices'])
428
.config(['$routeProvider', '$locationProvider',
529
function($routeProvider, $locationProvider) {
@@ -20,7 +44,6 @@ angular.module('AngularFlask', ['angularFlaskServices'])
2044
templateUrl: '/static/partials/post-detail.html',
2145
controller: PostDetailController
2246
})
23-
/* Create a "/blog" route that takes the user to the same place as "/post" */
2447
.when('/blog', {
2548
templateUrl: 'static/partials/post-list.html',
2649
controller: PostListController
@@ -32,4 +55,5 @@ angular.module('AngularFlask', ['angularFlaskServices'])
3255
3356
$locationProvider.html5Mode(true);
3457
}])
35-
;
58+
;
59+
*/

‎app/static/js/controllers.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
'use strict';
22

3-
/* Controllers */
3+
var app = angular.module('fileUpload', ['ngFileUpload']);
44

5-
function IndexController($scope) {
6-
7-
}
5+
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout','$log' ,'$http' , function ($scope, Upload, $timeout, $log, $http) {
6+
$scope.uploadPic = function(file) {
7+
file.upload = Upload.upload({
8+
url: '/photos/v1.0/photos',
9+
data: {file: file},
10+
});
811

9-
function AboutController($scope) {
10-
11-
}
12-
13-
function PostListController($scope, Post) {
14-
var postsQuery = Post.get({}, function(posts) {
15-
$scope.posts = posts.objects;
16-
});
17-
}
18-
19-
function PostDetailController($scope, $routeParams, Post) {
20-
var postQuery = Post.get({ postId: $routeParams.postId }, function(post) {
21-
$scope.post = post;
22-
});
23-
}
12+
file.upload.then(function (response) {
13+
$timeout(function () {
14+
file.result = response.data;
15+
});
16+
}, function (response) {
17+
if (response.status > 0)
18+
$scope.errorMsg = response.status + ': ' + response.data;
19+
}, function (evt) {
20+
// Math.min is to fix IE which reports 200% sometimes
21+
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
22+
});
23+
}
24+
}]);

‎app/static/partials/landing.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@ <h1 class="heading">Give me an avatar</h1>
1010
</div>
1111

1212
<div>
13+
14+
<!--
1315
<div ng-app="myApp">
14-
<form name="saveTemplateData" action="#" ng-controller="FormCtrl">
15-
First name: <br/><input type="text" name="form.firstname"> <br/><br/>
16-
Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>
17-
<textarea rows="3" cols="25">Describe your reason for submitting this form ... </textarea> <br/><br/>
18-
<input type="radio" ng-model="form.gender" value="female" />Female ...
19-
<input type="radio" ng-model="form.gender" value="male" />Male <br/>
20-
<br/><br/>
21-
</div>
16+
17+
<div ng-controller="UploadCtrl">
18+
<img ng-if="image" src="{{image}}" alt="">
19+
<form action="">
20+
<input my-upload type="file" name="upload">
21+
</form>
22+
</div> -->
2223
<!--<h3><a href="/blog"></a></h3> -->
2324
</div>

‎app/templates/index.html‎

Lines changed: 54 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,30 @@
11
<!doctype html>
2-
<html lang="en" ng-app="AngularFlask">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Give me an avatar</title>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Give me an avatar</title>
65

7-
<link rel="stylesheet" href="/static/css/bootstrap.css">
8-
<link rel="stylesheet" href="/static/css/main.css">
6+
<link rel="stylesheet" href="/static/css/bootstrap.css">
7+
<link rel="stylesheet" href="/static/css/main.css">
98

10-
<script src="/static/lib/angular/angular.js"></script>
11-
<script src="/static/lib/angular/angular-resource.js"></script>
9+
<script src="/static/lib/angular/angular.js"></script>
10+
<script src="/static/lib/angular/angular-resource.js"></script>
1211

13-
<script src="/static/js/app.js"></script>
14-
<script src="/static/js/controllers.js"></script>
15-
<script src="/static/js/services.js"></script>
12+
<script src="/static/js/flow.js"></script>
13+
<script src="/static/js/app.js"></script>
14+
<script src="/static/js/controllers.js"></script>
15+
<script src="/static/js/services.js"></script>
1616

17-
<script src="/static/lib/jquery/jquery.min.js"></script>
18-
<script src="/static/lib/bootstrap/bootstrap.min.js"></script>
17+
<script src="/static/lib/jquery/jquery.min.js"></script>
18+
<script src="/static/lib/bootstrap/bootstrap.min.js"></script>
1919

20-
<!-- <script type="text/javascript" src="angular.min.js"></script>-->
21-
22-
<script type="text/javascript">
23-
angular.module('myApp', []).
24-
25-
controller('UploadCtrl', ['$scope', function (scope) {
26-
scope.image = "";
27-
}]).
28-
29-
directive('myUpload', [function () {
30-
return {
31-
restrict: 'A',
32-
link: function (scope, elem, attrs) {
33-
var reader = new FileReader();
34-
reader.onload = function (e) {
35-
scope.image = e.target.result;
36-
scope.$apply();
37-
}
38-
39-
elem.on('change', function() {
40-
reader.readAsDataURL(elem[0].files[0]);
41-
});
42-
}
43-
};
44-
}]);
45-
</script>
20+
<!-- <script type="text/javascript" src="angular.min.js"></script>-->
4621

4722
</head>
48-
<body>
49-
<div id="header" class="header navbar navbar-static-top">
50-
<div class="navbar-inner">
51-
<div class="container">
52-
<!--
23+
<body ng-app="fileUpload" ng-controller="MyCtrl">
24+
<div id="header" class="header navbar navbar-static-top">
25+
<div class="navbar-inner">
26+
<div class="container">
27+
<!--
5328
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
5429
</button>
5530
<a class="brand" href="/">AngularFlask</a>
@@ -61,35 +36,52 @@
6136
</ul>
6237
</div>
6338
-->
64-
</div>
6539
</div>
6640
</div>
41+
</div>
6742

6843

69-
<div class="container page" ng-app="myApp">
70-
<div id="content" class="container main" ng-view>
71-
<div ng-controller="UploadCtrl">
72-
<img ng-if="image" src="{{image}}" alt="">
73-
<form action="">
74-
<input my-upload type="file" name="upload">
75-
</form>
76-
</div>
44+
<div class="container page">
45+
<div id="content" class="container main" ng-view>
7746

47+
<form name="myForm">
48+
<fieldset>
49+
<legend>Upload on form submit</legend>
50+
Username:
51+
<input type="text" name="userName" ng-model="username" size="31" required>
52+
<i ng-show="myForm.userName.$error.required">*required</i>
53+
<br>Photo:
54+
<input type="file" ngf-select ng-model="picFile" name="file"
55+
accept="image/*" ngf-max-size="2MB" required
56+
ngf-model-invalid="errorFile">
57+
<i ng-show="myForm.file.$error.required">*required</i><br>
58+
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
59+
<br>
60+
<button ng-disabled="!myForm.$valid"
61+
ng-click="uploadPic(picFile)">Submit</button>
62+
<span class="progress" ng-show="picFile.progress >= 0">
63+
</span>
64+
<span ng-show="picFile.result">Upload Successful</span>
65+
</fieldset>
66+
<br>
67+
</form>
7868

79-
</div>
8069

81-
<hr>
82-
<footer id="footer" class="footer">
83-
<!--
70+
71+
</div>
72+
73+
<hr>
74+
<footer id="footer" class="footer">
75+
<!--
8476
<div class="footer-left">
8577
<a href="/about">About</a> |
8678
<a href="/">Home</a>
8779
</div>
8880
-->
89-
<div class="footer-right">
90-
<span>&copy; 2016 BaezCorp</span>
91-
</div>
92-
</footer>
93-
</div>
81+
<div class="footer-right">
82+
<span>&copy; 2016 BaezCorp</span>
83+
</div>
84+
</footer>
85+
</div>
9486
</body>
9587
</html/>

0 commit comments

Comments
 (0)