evejweinberg · November 10, 2016 19:34
diff --git a/forSam.js b/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>