Untitled


<!DOCTYPE html>
<html ng-app="myNgApp">
	<head>
		<meta charset="utf-8">
		<title>ngDropzone simple example</title>
		
		<!-- AngularJS -->
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
		
		<!-- Dropzone -->
		<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
		<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
		
		<!-- ngDropzone -->
		<script src="https://rawgit.com/thatisuday/ng-dropzone/master/dist/ng-dropzone.js"></script>
		
		<!-- Misc -->
		<link rel="stylesheet" href="https://rawgit.com/thatisuday/ng-dropzone/master/dist/ng-dropzone.css">
		<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
		
		<style>
			body{
				font-family:'Roboto', sans-serif !important;
			}
			#buttonDropzone{
				position:relative;
			}
			#buttonDropzone .dropzone{
				opacity: 0;
				margin: 0;
				padding: 0;
				min-width: 0;
				min-height: 0;
				width: auto;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!-- Dropzone 3 -->
		<h4 style="text-align:center;">Dropzone for button as a trigger</h4>
		<div ng-controller="drop3Controller" style="text-align:center;">
			<button id="buttonDropzone" style="position:relative;">
				<div id="dropzone3" class="dropzone" options="dzOptions" callbacks="dzCallbacks" ng-dropzone></div>
				Upload Profile Pic
			</button>
		</div>
		
		
		<!-------------------------------------------------------------------------
			Dropzone JavaScript Code
		---------------------------------------------------------------------------->
		<script>
  		Dropzone.autoDiscover = false;
  		var myNgApp = angular.module('myNgApp', ['thatisuday.dropzone']);
  		
  		myNgApp.config(function(dropzoneOpsProvider){
  			dropzoneOpsProvider.setOptions({
  				url : '/upload_1.php',
  				acceptedFiles : 'image/jpeg, images/jpg, image/png',
  				addRemoveLinks : true,
  				dictDefaultMessage : 'Click to add or drop photos',
  				dictRemoveFile : 'Remove photo',
  				dictResponseError : 'Could not upload this photo'
  			});
  		});
  		
    	// Dropzone 2
  		myNgApp.controller('drop3Controller', function($scope, $timeout){
  			$scope.dzOptions = {
  				hiddenInputContainer : '#buttonDropzone'
  			};
  			
  			$scope.dzCallbacks = {
  				'addedfile' : function(file){
  					console.info('File added from dropzone 1.', file);
  				}
  			};
  		});
  		
		</script>
	</body>
</html>

document.onready = function(){
	Dropzone.autoDiscover = false;
var myNgApp = angular.module('myNgApp', ['thatisuday.dropzone']);

myNgApp.config(function(dropzoneOpsProvider){
  dropzoneOpsProvider.setOptions({
    url : '/upload_1.php',
    acceptedFiles : 'image/jpeg, images/jpg, image/png',
    addRemoveLinks : true,
    dictDefaultMessage : 'Click to add or drop photos',
    dictRemoveFile : 'Remove photo',
    dictResponseError : 'Could not upload this photo'
  });
});

// Dropzone 1
myNgApp.controller('drop1Controller', function($scope, $timeout){
  $scope.dzOptions = {
    paramName : 'photo',
    maxFilesize : '10'
  };

  $scope.dzCallbacks = {
    'addedfile' : function(file){
      console.info('File added from dropzone 1.', file);
    }
  };
});

}// Code goes here

/* Styles go here */