forgot password?
need an account?

Notifications close x

Web Intersect 2 Add On _ Add Image Upload To Status Posts

loading social widgets...
LewisAndersonWritten By: LewisAnderson   flag
Publish Date: March 04, 2015
Create these 2 folders in your root folder and set write permissions to 755 tempUploads permUploads In user.php we are adding these CSS rules
.hiddenStuff{ display: none; } .triggerBtn{ float:right; cursor:pointer; margin-right: 500px; } img.statusImage{ max-width: 200px; }
We also edited this one existing CSS rule, we changed the height from 80px to 20 px.
textarea#statustext{width:982px; height:20px; padding:8px; border:#999 1px solid; font-size:16px;}
template_status.php This is our new code to create our textarea with the new divs and buttons.
if($isOwner == "yes"){ $status_ui = '<textarea id="statustext" onkeyup="statusMax(this,250)" onfocus="showBtnDiv()" placeholder="What&#39;s new with you '.$u.'?"></textarea>'; $status_ui .= '<div id="uploadDisplay_SP"></div>'; $status_ui .= '<div id="btns_SP" class="hiddenStuff">'; $status_ui .= '<button id="statusBtn" onclick="postToStatus('status_post','a',''.$u.'','statustext')">Post</button>'; $status_ui .= '<img src="images/camera.JPG" id="triggerBtn_SP" class="triggerBtn" onclick="triggerUpload(event, 'fu_SP')" width="137" height="22" title="Upload A Photo" />'; $status_ui .= '</div>'; $status_ui .= '<div id="standardUpload" class="hiddenStuff">'; $status_ui .= '<form id="image_SP" enctype="multipart/form-data" method="post">'; $status_ui .= '<input type="file" name="FileUpload" id="fu_SP" onchange="doUpload('fu_SP')"/>'; $status_ui .= '</form>'; $status_ui .= '</div>'; } else if($isFriend == true && $log_username != $u){ $status_ui = '<textarea id="statustext" onkeyup="statusMax(this,250)" onfocus="showBtnDiv()" placeholder="Hi '.$log_username.', say something to '.$u.'"></textarea>'; $status_ui .= '<div id="uploadDisplay_SP"></div>'; $status_ui .= '<div id="btns_SP" class="hiddenStuff">'; $status_ui .= '<button id="statusBtn" onclick="postToStatus('status_post','c',''.$u.'','statustext')">Post</button>'; $status_ui .= '<img src="images/camera.JPG" id="triggerBtn_SP" class="triggerBtn" onclick="triggerUpload(event, 'fu_SP')" width="137" height="22" title="Upload A Photo" />'; $status_ui .= '</div>'; $status_ui .= '<div id="standardUpload" class="hiddenStuff">'; $status_ui .= '<form id="image_SP" enctype="multipart/form-data" method="post">'; $status_ui .= '<input type="file" name="FileUpload" id="fu_SP" onchange="doUpload('fu_SP')"/>'; $status_ui .= '</form>'; $status_ui .= '</div>'; }
This is the newly added/newly changed javascript that we added to template_status.php
var hasImage = ""; window.onbeforeunload = function(){ if(hasImage != ""){ return "You have not posted your image"; } } function showBtnDiv(){ _("statustext").style.height = "80px"; _("btns_SP").style.display = "block"; } function doUpload(id){ // www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP var file = _(id).files[0]; if(file.name == ""){ return false; } if(file.type != "image/jpeg" && file.type != "image/gif"){ alert("That file type is not supported."); return false; } _("triggerBtn_SP").style.display = "none"; _("uploadDisplay_SP").innerHTML = "Image uploading......"; var formdata = new FormData(); formdata.append("stPic", file); var ajax = new XMLHttpRequest(); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "php_parsers/photo_system.php"); ajax.send(formdata); } function completeHandler(event){ var data = event.target.responseText; var datArray = data.split("|"); if(datArray[0] == "upload_complete"){ hasImage = datArray[1]; _("uploadDisplay_SP").innerHTML = '<img src="tempUploads/'+datArray[1]+'" class="statusImage" />'; } else { _("uploadDisplay_SP").innerHTML = datArray[0]; _("triggerBtn_SP").style.display = "block"; } } function errorHandler(event){ _("uploadDisplay_SP").innerHTML = "Upload Failed"; _("triggerBtn_SP").style.display = "block"; } function abortHandler(event){ _("uploadDisplay_SP").innerHTML = "Upload Aborted"; _("triggerBtn_SP").style.display = "block"; } function triggerUpload(e,elem){ e.preventDefault(); _(elem).click(); } function postToStatus(action,type,user,ta){ var data = _(ta).value; if(data == "" && hasImage == ""){ alert("Type something first weenis"); return false; } var data2 = ""; if(data != ""){ data2 = data.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/n/g,"<br />").replace(/r/g,"<br />"); } if (data2 == "" && hasImage != ""){ data = "||na||"; data2 = '<img src="permUploads/'+hasImage+'" />'; } else if (data2 != "" && hasImage != ""){ data2 += '<br /><img src="permUploads/'+hasImage+'" />'; } else { hasImage = "na"; } _("statusBtn").disabled = true; var ajax = ajaxObj("POST", "php_parsers/status_system.php"); ajax.onreadystatechange = function() { if(ajaxReturn(ajax) == true) { var datArray = ajax.responseText.split("|"); if(datArray[0] == "post_ok"){ var sid = datArray[1]; var currentHTML = _("statusarea").innerHTML; _("statusarea").innerHTML = '<div id="status_'+sid+'" class="status_boxes"><div><b>Posted by you just now:</b> <span id="sdb_'+sid+'"><a href="#" onclick="return false;" onmousedown="deleteStatus(''+sid+'','status_'+sid+'');" title="DELETE THIS STATUS AND ITS REPLIES">delete status</a></span><br />'+data2+'</div></div><textarea id="replytext_'+sid+'" class="replytext" onkeyup="statusMax(this,250)" placeholder="write a comment here"></textarea><button id="replyBtn_'+sid+'" onclick="replyToStatus('+sid+','<?php echo $u; ?>','replytext_'+sid+'',this)">Reply</button>'+currentHTML; _("statusBtn").disabled = false; _(ta).value = ""; _("triggerBtn_SP").style.display = "block"; _("btns_SP").style.display = "none"; _("uploadDisplay_SP").innerHTML = ""; _("statustext").style.height = "20px"; _("fu_SP").value = ""; hasImage = ""; } else { alert(ajax.responseText); } } } ajax.send("action="+action+"&type="+type+"&user="+user+"&data="+data+"&image="+hasImage); }
New code we added to php_parsers/photo_sytem.php
<?php if (isset($_FILES["stPic"]["name"]) && $_FILES["stPic"]["tmp_name"] != ""){ $fileName = $_FILES["stPic"]["name"]; $fileTmpLoc = $_FILES["stPic"]["tmp_name"]; $fileType = $_FILES["stPic"]["type"]; $fileSize = $_FILES["stPic"]["size"]; $fileErrorMsg = $_FILES["stPic"]["error"]; $kaboom = explode(".", $fileName); $fileExt = end($kaboom); list($width, $height) = getimagesize($fileTmpLoc); if($width < 10 || $height < 10){ echo"Image is too small|fail"; exit(); } $time = time(); $db_file_name = $log_username.time().".".$fileExt; if($fileSize > 1048576) { echo "Your image file was larger than 1mb|fail"; exit(); } else if (!preg_match("/.(gif|jpg|png)$/i", $fileName) ) { echo "Your image file was not jpg, gif or png type|fail"; exit(); } else if ($fileErrorMsg == 1) { echo "An unknown error occurred|fail"; exit(); } if(move_uploaded_file($fileTmpLoc, "../tempUploads/$db_file_name")){ echo "upload_complete|$db_file_name"; } else { echo "move_uploaded_file function failed"; } } ?>
These are the snippets that we edited/added to php_parsers/status_system.php
// Changed this line //if(strlen($_POST['data']) < 1){ if(strlen($_POST['data']) < 1 && $_POST['image'] == "na"){ mysqli_close($db_conx); echo "data_empty"; exit(); } ....................... // Added this // Clean image name post $image = preg_replace('#[^a-z0-9.]#i', '', $_POST['image']); ......................... // added this if($data == "||na||" && $image != "na"){ $data = '<img src="permUploads/'.$image.'" />'; //$data = '<img src="permUploads/'.$image.'" class="biggerStatusImage" />'; } else if ($data != "||na||" && $image != "na"){ $data = $data.'<br /><img src="permUploads/'.$image.'" />'; //$data = $data.'<br /><img src="permUploads/'.$image.'" class="biggerStatusImage" />'; }
This is a new file we created in our root folder. This is to be run through a cron job. uploadGarbageCollector.php
<?php $dir = "tempUploads/"; foreach (glob($dir."*") as $file){ if (filemtime($file) < time() - 86400){ unlink($file); } } ?>
Below is the code for deleting image if a user deletes a status post that has an image on it... open php_parsers/status_system.php and change that delete status code that I showed to this
<?php if (isset($_POST['action']) && $_POST['action'] == "delete_status"){ if(!isset($_POST['statusid']) || $_POST['statusid'] == ""){ mysqli_close($db_conx); echo "status id is missing"; exit(); } $statusid = preg_replace('#[^0-9]#', '', $_POST['statusid']); // Check to make sure this logged in user actually owns that comment $query = mysqli_query($db_conx, "SELECT account_name, author, data FROM status WHERE id='$statusid' LIMIT 1"); while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) { $account_name = $row["account_name"]; $author = $row["author"]; $data = $row["data"]; } if ($author == $log_username || $account_name == $log_username) { if(preg_match('/<img.+src=['"](?P<src>.+)['"].*>/i', $data, $has_image)){ $source = '../'.$has_image['src']; if (file_exists($source)) { unlink($source); } } mysqli_query($db_conx, "DELETE FROM status WHERE osid='$statusid'"); mysqli_close($db_conx); echo "delete_ok"; exit(); } } ?>
You can read more articles by LewisAnderson by clicking this link:
Articles written by LewisAnderson

User Notes And Comments ↓

Friday March 06, 2015 08:53:52 PM
whalesmith said:Thanks so much for great tutorials. You and Adams are the best.
Friday August 28, 2015 06:19:22 AM
debbycikos said:hello mr lewis can you help me to find out what is the problem when I try to upload my avatar . am getting this error :ERROR: File upload failed I really need your help . I follow exactly codes from your tutorial on social network dev
Wednesday October 07, 2015 03:34:15 PM
Foxmike said:I watched the videos and added and adjusted the code while watching. nothing works. The image upload box opens but will not display the selected image. No action posting with text or photos. Help?
Thursday November 26, 2015 07:59:46 AM
grifkisiagmail said:thanx
Wednesday May 11, 2016 10:29:19 PM
Paul said:Why did you delete your all your videos on YouTube?
© 2015 webintersect.com
There is a top-shelf free educational course of videos associated with this domain, all about how to build custom communities and social network websites. There are over 45 videos in the course totaling just over 10 hours. We also archived the deprecated course material here for you to reference on the source files page.