Created
November 30, 2015 11:55
-
-
Save manchan/0d8597b1ac131d1b1f16 to your computer and use it in GitHub Desktop.
AngularJs ✕ Firebaseで爆速イメージストア環境の作成。
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> | |
<head> | |
<!-- AngularJS --> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> | |
<!-- Firebase --> | |
<script src="https://cdn.firebase.com/js/client/2.3.0/firebase.js"></script> | |
<!-- AngularFire --> | |
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script> | |
<!-- Angular-file-upload --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/10.1.0/ng-file-upload.js"></script> | |
<style type="text/css"> | |
.thumb {width: 24px;height: 24px;float: none;position: relative;top: 7px;} | |
form .progress {line-height: 15px;} | |
.progress {display: inline-block;width: 100px;border: 3px groove #CCC;} | |
.progress div {font-size: smaller;background: orange;width: 0;} | |
ol, ul{list-style:none;} | |
#content #photo{position: relative;overflow: hidden;} | |
#content #photo ul{position: relative;left: 50%;float: left;} | |
#content #photo li{position: relative;left: -50%;float: left;} | |
#content #photo .r20{margin-left:20px;} | |
#content #photo li img {width: 420px;height: 420px;} | |
</style> | |
</head> | |
<body> | |
<div> | |
<h1>AngularJs practice</h1> | |
<body ng-app="fileUpload" ng-controller="MyCtrl"> | |
<form name="myForm"> | |
<fieldset> | |
<legend>Upload on form submit</legend> | |
Title: | |
<input type="text" name="userName" ng-model="username" size="31" required> | |
<i ng-show="myForm.userName.$error.required">*required</i> | |
<br>Photo: | |
<input type="file" ngf-select ng-model="picFile" name="file" | |
accept="image/*" ngf-max-size="2MB" required> | |
<i ng-show="myForm.file.$error.required">*required</i><br> | |
<i ng-show="myForm.file.$error.maxSize">File too large | |
{{picFile.size / 1000000|number:1}}MB: max {{picFile.$errorParam}}</i> | |
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button> | |
<br> | |
<button ng-disabled="!myForm.$valid" | |
ng-click="uploadPic(picFile)">Submit</button> | |
<span ng-show="picFile.result">Upload Successful</span> | |
<span class="err" ng-show="errorMsg">{{errorMsg}}</span> | |
</fieldset> | |
<br> | |
</form> | |
<div id="content"> | |
<h2>photo</h2> | |
<div id="photo"> | |
<button type="button" class="btn btn-danger" ng-click="image_all_remove()">All Remove</button> | |
<ul> | |
<li ng-repeat="img in images | orderBy:'-submitDate'"> | |
<p>{{img.$key}}:{{img.submitDate}}</p> | |
<img src="{{img.images}}" alt="" width="{{img.width}}" height="{{img.height}}"/> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
// 依存モジュールとしてfirebase、ngFileUploadを登録 | |
var app = angular.module('fileUpload', ['ngFileUpload', 'firebase']); | |
app.controller('MyCtrl', ['$scope','$firebase','$firebaseArray', 'Upload', '$timeout', function ($scope,$firebase, $firebaseArray, Upload, $timeout) { | |
// "https://<your-firebase>.firebaseio.com/" | |
var fb = new Firebase("https://<your-firebase>.firebaseio.com/"); | |
var ref = fb.child("images").orderByChild("submitDate"); | |
var sync = $firebaseArray(ref); | |
var syncArray = $firebaseArray(fb.child("images")); | |
// ストアされたjson objectをmodelにバインド | |
$scope.images = sync | |
$scope.uploadPic = function(file) { | |
var title = $scope.username; | |
var submitDate = new Date().toISOString(); | |
var images = Upload.base64DataUrl(file).then(function(base64Urls){ | |
$timeout(function () { | |
file.result = base64Urls.data; | |
}); | |
// 同期配列にArray.push | |
syncArray.$add({ | |
title: title, | |
images : base64Urls, | |
submitDate: submitDate | |
}) | |
.then(function(error) { | |
if (error) { | |
console.log("Error:",error); | |
} else { | |
console.log("Post set successfully!"); | |
} | |
}); | |
}); | |
}; | |
// 画像全削除 | |
$scope.image_all_remove = function(){ | |
angular.forEach($scope.images, function(img, i){ | |
var row = $scope.images.$getRecord($scope.images[i].$id); | |
$scope.images.$remove(row); | |
}); | |
}; | |
}]); | |
</script> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment