MMS - Add File/Image Attachment

This is the beginning of being able to add a file or image attachment to a sms message when sending.

Issue #9

Author: jpwalters

sms-conversations/css/style.css

@@ -146,3 +146,12 @@
   clear: both;
   height: 0;
 }
+
+#media-url {
+	padding-left:5px;
+	cursor: pointer;
+}
+
+.fa-paperclip:hover {
+	cursor: hand;
+}

sms-conversations/js/index.js

@@ -211,8 +211,7 @@ $(document).ready(function(){
 
 		$('#sendSMS').click(function(e) {
 			e.preventDefault();
-
-			$.post(OpenVBX.home + "/messages/sms/" + $('#sms-messageid').val(),{to:$('#sms-to-phone').val(),from:$('#sms-from-phone').val(),content:$('#message-to-send').val()}, function( data ) {
+			$.post(OpenVBX.home + "/messages/sms/" + $('#sms-messageid').val(),{to:$('#sms-to-phone').val(),from:$('#sms-from-phone').val(),content:$('#message-to-send').val(),media_urls:$('#sms-media-url').val()}, function( data ) {
 
 				if(!data.error) {
 					$('#message-to-send').val('');
@@ -225,6 +224,35 @@ $(document).ready(function(){
 			setTimeout(function() { getSmsHistory($('#sms-to-phone').val()); }, 1500);
 		});
 
+		$("#media-url").click(function() {
+
+			document.getElementById("sms-media-url").click();
+
+			return false; // avoiding navigation
+		});
+
+		$('#sms-media-url').change(function(evt) {
+			var formData = new FormData(document.getElementById("sms-media-url"));
+			formData.append('action','mms-file-upload');
+
+			$.ajax({
+				url: 'sms-conversation',
+				type: 'POST',
+				async: true,
+				enctype: 'multipart/form-data',
+				processData: false,  // tell jQuery not to process the data
+				contentType: false,   // tell jQuery not to set contentType
+				data: formData,
+				error: function(){
+					console.log("error");
+				},
+				success: function(data){
+					 console.log("PHP Output:");
+					 console.log( data );
+				}
+			});
+		});
+		
 		$('.quick-call-button').click(function(e) {
 			e.preventDefault();
 

sms-conversations/mms-files/logo.jpg

@@ -31,6 +31,12 @@
 		$mediaObj = $ci->twilio->request($media_url, "GET");
 		echo $mediaObj->ResponseText;
 
+		exit;
+	}	
+	else if($_SERVER['REQUEST_METHOD'] === 'POST' && $_POST['action'] === 'mms-file-upload') {
+		//var_dump($_FILES, $_POST);
+		echo '{"url":"http://test.com"}';
+
 		exit;
 	}
 
@@ -86,7 +92,9 @@
 
 				  <div class="chat-message clearfix">
 					<textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>
+					<i id="media-url" class="fa fa-paperclip fa-2x"></i>
 					<button id="sendSMS">Send</button>
+					<input type="file" id="sms-media-url" value="" style="display: none;">
 					<input type="hidden" id="sms-messageid" value="">
 					<input type="hidden" id="sms-to-phone" value="">
 					<input type="hidden" id="sms-from-phone" value="">