Added upload feature using XMLHttpRequest

js/app.js

@@ -111,19 +111,46 @@ function createDownloadLink(blob) {
 	var li = document.createElement('li');
 	var link = document.createElement('a');
 
+	//name of .wav file to use during upload and download (without extendion)
+	var filename = new Date().toISOString();
+
 	//add controls to the <audio> element
 	au.controls = true;
 	au.src = url;
 
-	//link the a element to the blob
+	//save to disk link
 	link.href = url;
-	link.download = new Date().toISOString() + '.wav';
-	link.innerHTML = link.download;
+	link.download = filename+".wav"; //download forces the browser to donwload the file using the  filename
+	link.innerHTML = "Save to disk";
 
-	//add the new audio and a elements to the li element
+	//add the new audio element to li
 	li.appendChild(au);
-	li.appendChild(link);
+
+	//add the filename to the li
+	li.appendChild(document.createTextNode(filename+".wav "))
 
-	//add the li element to the ordered list
+	//add the save to disk link to li
+	li.appendChild(link);
+
+	//upload link
+	var upload = document.createElement('a');
+	upload.href="#";
+	upload.innerHTML = "Upload";
+	upload.addEventListener("click", function(event){
+		  var xhr=new XMLHttpRequest();
+		  xhr.onload=function(e) {
+		      if(this.readyState === 4) {
+		          console.log("Server returned: ",e.target.responseText);
+		      }
+		  };
+		  var fd=new FormData();
+		  fd.append("audio_data",blob, filename);
+		  xhr.open("POST","upload.php",true);
+		  xhr.send(fd);
+	})
+	li.appendChild(document.createTextNode (" "))//add a space in between
+	li.appendChild(upload)//add the upload link to li
+
+	//add the li element to the ol
 	recordingsList.appendChild(li);
 }

upload.php

@@ -0,0 +1,11 @@
+<?php
+print_r($_FILES); //this will print out the received name, temp name, type, size, etc.
+
+
+$size = $_FILES['audio_data']['size']; //the size in bytes
+$input = $_FILES['audio_data']['tmp_name']; //temporary name that PHP gave to the uploaded file
+$output = $_FILES['audio_data']['name'].".wav"; //letting the client control the filename is a rather bad idea
+
+//move the file from temp name to local folder using $output name
+move_uploaded_file($input, $output)
+?>