manchan/index.html

## index.html
<script src="https://gist.github.com/manchan/0d8597b1ac131d1b1f16.js"></script>
<noscript><pre><code>

File: index.html
-------------------------


<!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>

</code></pre></noscript>
	<script src="https://gist.github.com/manchan/0d8597b1ac131d1b1f16.js"></script>
	<noscript><pre><code>

	File: index.html
	-------------------------



	<!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>

	</code></pre></noscript>