evejweinberg/forSam.js

## forSam.js
////server side /////
/////////////////////


////this is the route in the ajax callback /////////

router.post('/submitProfile', upload.single('file'), function(req,res){

    var buf = new Buffer(req.body.data, 'base64');


    AWS.config.update({

      accessKeyId:process.env.AWS_ACCESS_KEY,
      secretAccessKey:process.env.AWS_SECRET_KEY
    });
    AWS.config.update({region: 'us-east-1'})

    var s3bucket = new AWS.S3({params: {Bucket: process.env.AWS_BUCKET_NAME}});

    //take out special charachters first, look at what Sam did with slug
    var tempName = req.body.name.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-') + '.jpg';


    var params = {
      Key: tempName,
      ACL: 'public-read',
      Body: buf,
      ContentType: "image/jpeg"
    };


    s3bucket.putObject(params, function(err,data){
      if(err) console.log(err);
      else console.log('success@');
    });


    var publicUrl = process.env.AWS_S3_PATH + tempName;
    console.log('public url: ' + publicUrl);


    var personObj = {
      //grab your mongood schema and double it here
      name: req.body.name,
      imageUrl: publicUrl,
      slug : req.body.name.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-')
    }

    //save to the database, send through the attributes as a json.
    var person = new Person(personObj);
    //mongood database operation, save to database, and have database hit this callback
    person.save(function(err,data){
      if(err){

        console.log('error')
        var error = {
          status: "ERROR",
          message: err
        }
        return res.json(err)
      }

      console.log('succesfully pushed', data)

      var jsonData = {
        status: "OK",
        person: data
      }
      //respond back to the frint end. Here's the data
      return res.json(jsonData)


    })


});


//////this is the second path that I'd like to manipulate ////
//////////////////////////////////////////////////////////////


router.get('/third', function(req,res){
  // if (start of program)
  res.render('blank.html')
  // else{
  // res.render('/candidate-solo.html')
// }
})


////front end //////////
////////////////////////


<!doctype html>
<html>
	<head>
		<title>Eternal Cloud Login Screen</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<script
		  src="https://code.jquery.com/jquery-3.1.1.min.js"
		  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
		  crossorigin="anonymous"></script>
		<script src="js/three.js/Three.js"></script>
		<script src="js/three.js/Detector.js"></script>
		<script src="js/three.js/Stats.js"></script>

		<script src="js/threex/THREEx.screenshot.js"></script>
		<!-- <script src="js/threex/THREEx.FullScreen.js"></script> -->
		<script src="js/threex/THREEx.WindowResize.js"></script>
		<script src="js/three.js/TrackballControls.js"></script>
		<script src="js/webcam.js"></script>

		<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link  href="css/make-profile.css" rel="stylesheet"/>
	</head>
<body>
	<!-- <h1>LOGIN</h1> -->

	<!-- <img src="" alt="" /> -->
	<!-- <button type="button" class="btn btn-lg btn-pill btn-primary">Primary</button> -->


	<div id="my_camera"></div>
	<div id="container"></div>


		////2D webcam stuff

		Webcam.set({
			width: 240,
			height: 240,
			image_format: 'jpeg',
			jpeg_quality: 90
		});
		//attach to any DOM element
		Webcam.attach( '#my_camera' );


		function take_snapshot() {
			// take snapshot and get image data
			Webcam.snap( function(data_uri) {

				// setting the global blob
				globalBlob = data_uri;
				newImage = data_uri;
				var newImageB = new Image()
				newImageB.src = data_uri;
				// we need to send this to AWS

				//push image to 3D cube
				video_mesh.material.map.image =newImageB

				uploadBlob();

			} );
		}


		////////////////////////////////
		////////UPLOAD BLOB //////////
		////////////////////////////////
		////////////////////////////////

		function uploadBlob()
		{
			// console.log('uploading Blob with ajax request');

			//make a new javascript native blob
		 var blob = new Blob();
		 //make a file reader
		 var reader = new FileReader();

		 // this function is triggered once a call to readAsDataURL returns ???
		 reader.onload = function(event){

		     // create the formData object and add our data to it
		     var fd = new FormData();
		     fd.append('name', $('#name').val());
		     fd.append('data', globalBlob.split(',')[1]); // splitting the URL removes the 'base64' prefix and sends just the necessary data

				//  console.log('fd is: ' , fd)
		     $.ajax({
		         type: 'POST',
						 //hit this route
		         url: './submitProfile',
		         data: fd,
		         processData: false,
		         contentType: false
		     }).done(function(data) {
						//if the status from the backend is 'OK' then do this
						//change it on both sides if you change the string 'ok'
		         if (data.status == 'OK') {
							 //replace this with a new route
							  window.location = '/candidate';
						 } else {
							 console.log('data was not OK')
						 }


		     });

		 };

		   // trigger the read from the reader...
		   reader.readAsDataURL(blob); // this creates a base64 encoded URL
		}


	</script>


	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<h1>Become a Member</h1>
				<!-- validate this form!, look at bottom of this html -->
				<form method="post" action="/api/create" id="myForm" enctype="multipart/form-data">

					<div class="form-group">
						<label for="name">Name</label>
						<input type="text" class="form-control" id="name" placeholder="Name" name="name">
						<!-- <p class="help-block">Your name is an identifying string given to you at birth</p> -->
					</div>

            <!-- A button for taking snaps of the webcam // pushing resuly to the console log -->
						<input type=button class="btn" value="Take Snapshot" onClick="take_snapshot()">


				</form>
			</div>
		</div>
	</div>

	<br>


</body>
</html>
	////server side /////
	/////////////////////


	////this is the route in the ajax callback /////////

	router.post('/submitProfile', upload.single('file'), function(req,res){

	var buf = new Buffer(req.body.data, 'base64');


	AWS.config.update({

	accessKeyId:process.env.AWS_ACCESS_KEY,
	secretAccessKey:process.env.AWS_SECRET_KEY
	});
	AWS.config.update({region: 'us-east-1'})

	var s3bucket = new AWS.S3({params: {Bucket: process.env.AWS_BUCKET_NAME}});

	//take out special charachters first, look at what Sam did with slug
	var tempName = req.body.name.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-') + '.jpg';


	var params = {
	Key: tempName,
	ACL: 'public-read',
	Body: buf,
	ContentType: "image/jpeg"
	};


	s3bucket.putObject(params, function(err,data){
	if(err) console.log(err);
	else console.log('success@');
	});


	var publicUrl = process.env.AWS_S3_PATH + tempName;
	console.log('public url: ' + publicUrl);



	var personObj = {
	//grab your mongood schema and double it here
	name: req.body.name,
	imageUrl: publicUrl,
	slug : req.body.name.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-')
	}

	//save to the database, send through the attributes as a json.
	var person = new Person(personObj);
	//mongood database operation, save to database, and have database hit this callback
	person.save(function(err,data){
	if(err){

	console.log('error')
	var error = {
	status: "ERROR",
	message: err
	}
	return res.json(err)
	}

	console.log('succesfully pushed', data)

	var jsonData = {
	status: "OK",
	person: data
	}
	//respond back to the frint end. Here's the data
	return res.json(jsonData)



	})


	});


	//////this is the second path that I'd like to manipulate ////
	//////////////////////////////////////////////////////////////


	router.get('/third', function(req,res){
	// if (start of program)
	res.render('blank.html')
	// else{
	// res.render('/candidate-solo.html')
	// }
	})





	////front end //////////
	////////////////////////


	<!doctype html>
	<html>
	<head>
	<title>Eternal Cloud Login Screen</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous"></script>
	<script src="js/three.js/Three.js"></script>
	<script src="js/three.js/Detector.js"></script>
	<script src="js/three.js/Stats.js"></script>

	<script src="js/threex/THREEx.screenshot.js"></script>
	<!-- <script src="js/threex/THREEx.FullScreen.js"></script> -->
	<script src="js/threex/THREEx.WindowResize.js"></script>
	<script src="js/three.js/TrackballControls.js"></script>
	<script src="js/webcam.js"></script>

	<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link href="css/make-profile.css" rel="stylesheet"/>
	</head>
	<body>
	<!-- <h1>LOGIN</h1> -->

	<!-- <img src="" alt="" /> -->
	<!-- <button type="button" class="btn btn-lg btn-pill btn-primary">Primary</button> -->


	<div id="my_camera"></div>
	<div id="container"></div>



	////2D webcam stuff

	Webcam.set({
	width: 240,
	height: 240,
	image_format: 'jpeg',
	jpeg_quality: 90
	});
	//attach to any DOM element
	Webcam.attach( '#my_camera' );



	function take_snapshot() {
	// take snapshot and get image data
	Webcam.snap( function(data_uri) {

	// setting the global blob
	globalBlob = data_uri;
	newImage = data_uri;
	var newImageB = new Image()
	newImageB.src = data_uri;
	// we need to send this to AWS

	//push image to 3D cube
	video_mesh.material.map.image =newImageB

	uploadBlob();

	} );
	}






	////////////////////////////////
	////////UPLOAD BLOB //////////
	////////////////////////////////
	////////////////////////////////

	function uploadBlob()
	{
	// console.log('uploading Blob with ajax request');

	//make a new javascript native blob
	var blob = new Blob();
	//make a file reader
	var reader = new FileReader();

	// this function is triggered once a call to readAsDataURL returns ???
	reader.onload = function(event){

	// create the formData object and add our data to it
	var fd = new FormData();
	fd.append('name', $('#name').val());
	fd.append('data', globalBlob.split(',')[1]); // splitting the URL removes the 'base64' prefix and sends just the necessary data

	// console.log('fd is: ' , fd)
	$.ajax({
	type: 'POST',
	//hit this route
	url: './submitProfile',
	data: fd,
	processData: false,
	contentType: false
	}).done(function(data) {
	//if the status from the backend is 'OK' then do this
	//change it on both sides if you change the string 'ok'
	if (data.status == 'OK') {
	//replace this with a new route
	window.location = '/candidate';
	} else {
	console.log('data was not OK')
	}


	});

	};

	// trigger the read from the reader...
	reader.readAsDataURL(blob); // this creates a base64 encoded URL
	}


	</script>







	<div class="container">
	<div class="row">
	<div class="col-md-3">
	<h1>Become a Member</h1>
	<!-- validate this form!, look at bottom of this html -->
	<form method="post" action="/api/create" id="myForm" enctype="multipart/form-data">

	<div class="form-group">
	<label for="name">Name</label>
	<input type="text" class="form-control" id="name" placeholder="Name" name="name">
	<!-- <p class="help-block">Your name is an identifying string given to you at birth</p> -->
	</div>

	<!-- A button for taking snaps of the webcam // pushing resuly to the console log -->
	<input type=button class="btn" value="Take Snapshot" onClick="take_snapshot()">


	</form>
	</div>
	</div>
	</div>

	<br>




	</body>
	</html>