Firebase Image uploader

Firebase Image uploader

by Salmin Skenderovic

HTML

<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" />
    <hr><br>
    <div class="box" ng-repeat="image in images">        
        <button ng-click="deleteImg($index)">Delete</button>
        <button ng-click="makePrimary($index)">Make primary</button><br>
        <img class="thumb" ng-src="{{image}}" />
    </div>

</div>

CSS

.box {
  float: left;
  width: 100%;
}
  
}
button {
  float: left;
}
.thumb{
    width:100px;
    height:100px;
    margin:5px;

}

.uploader{
    clear:both;
}

JavaScript

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {


	var ref = new Firebase('https://salmintest.firebaseio.com/');

    $scope.images = [];

    $scope.imageUpload = function(element){
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;
        reader.readAsDataURL(element.files[0]);
    }

    $scope.imageIsLoaded = function(e){
        $scope.$apply(function() {
            $scope.images.push(e.target.result);
            
            ref.child("testarbara").set({
              Primary: 0,
              Images: $scope.images
            });
        });
    }
    
    $scope.delete = function(image) {
    
    }
    
    $scope.makePrimary = function(image) {
    
    }
}