I’m back! LOL, lots to cover. First, yes, I was assuming once the Video uploads were complete and working, next we would have to handle the albums. And, finally would have to go back and do some paging or “pagination” code to parse thru long lists. One idea that I thought about was an alpha-list at the top to let people use ‘A-B-C’ to locate videos. Another idea is to list so many at at time as you mentioned. If we do the alpha format, it would be very easy to add, just have to add a query to pull whatever they select as a letter and dynamically change the list below… And, glad you figured out the not-erasing of fields. I can use that myself! Oh, yes, adding the ADD-NEW-VIDEO would need to be at both the top and bottom to save scrolling time. But, if you have 400 videos, divided up by 26 letters, sounds like that would be the way to go…
Now, onto the UPLOAD routines as we left off last week. I found a very nice pop-up CONTACT-FORM that you might be interested in… It does a very nice form that pops up nicely. It calls a simple routine and a lot of validation code behind the scenes. Here is the link:
http://www.html-form-guide.com/contact-form/simple-modal-popup-contact-form.html
I did not use this code, but, you might want to combine that code with my code below. Or, just add some CSS to mine to make it more “pretty”… Anyway, my code was originally for a client who needed to upload thumbnails of pictures. So, it mentions pictures not videos, but, it will upload any file. I store my videos and pictures in my “Images” folder under my root folder. This code also has info on the picture and details and some various code for checking file size (width and height). You may not need this, but, it is handy for thumbnails. Since you need a thumbnail this might be handy.
So, this is broken into three files. The first is just the calling HTML file. It is simple and you will understand it. Note the window’s size is set in the call. This can be set up however you wish. The second file is the actual pop-up which is can be any type of form you want. In this case it is just a simple browse form to submit a file to upload. It in turn, calls the PHP code which does some minor displays of the data. It check the thumbnail for a certain size and if it is okay it uploads it. You will have to delete that code to send a picture of other sizes. As is, it will upload a video since by default videos do not include size in their default properties. Here is the code to test:
Upload_Popup.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload Pix test!</title>
</head>
<body>
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="JavaScript:newPopup('UploadPix.html');">Open a popup window that allows uploading a picture...</a>
</body>
</html>
UploadPix.html (simple form page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>Upload a picture...</head>
<body>
<form action="Upload_Picture.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<h1> </h1>
<h1 align="center">Press "Browse" to locate the picture,<br />then, Submit to update it:<br /></h1>
<div align="center">
<input name="ufile" type="file" id="ufile" size="50" />
</div>
<p> </p>
<div align="center">
<input type="submit" name="UploadPixName" value="UPLOAD Your Picture" />
</div>
<p> </p>
<p> </p>
</form>
</body>
</html>
Upload_Picture.php (Does the actual upload of the video/thumbnail)
[php]
<?php
// Get correct file name to upload
$file_name = $_FILES[“ufile”];
$target_path = “Images/” . $file_name;
$picture = $_FILES[‘ufile’][‘tmp_name’];
list($width, $height, $type, $attr) = getimagesize($picture);
echo “”;
if ($_FILES[“ufile”][“error”] > 0)
{
echo "Return Code: " . $_FILES[“ufile”][“error”] . “
”;
}
else
if ($width == 192 && $height == 121)
{
echo "Upload Filename: " . $_FILES[“ufile”][“name”] . “
”;
echo “This Image is " . $width . " wide by " . $height . " tall.
”;
echo "Type: " . $_FILES[“ufile”][“type”] . “
”;
echo “Size: " . ($_FILES[“ufile”][“size”] / 1024) . " Kb
”;
copy($_FILES["ufile"]["tmp_name"], $target_path);
echo "Stored in: " . $target_path . " AS " . $file_name;
}
else
{
echo "Upload Filename: " . $_FILES["ufile"]["name"] . "<br />";
echo "This Image is " . $width . " wide by " . $height . " tall.<br>";
echo "Type: " . $_FILES["ufile"]["type"] . "<br />";
echo "Size: " . ($_FILES["ufile"]["size"] / 1024) . " Kb<br /><br>";
echo "********************************************<br>";
echo "*** This thumbnail file is not 192x121! ***<br>";
echo "*** THe file was not copied, please set ***<br>";
echo "*** up a new thumbnail from original. ***<br>";
echo "*** Then, update the picture again. ***<br>";
echo "********************************************<br>";
}
echo “
”;
echo “Press here to return to ADMIN…”;
echo “
”;
echo “Press here to return to upload another picture…”;
?>
[/php]
For testing, just create these three files and place on the server. Change the path if you need to wherever you want to store the files. Then, call the first html file and see what it does. (Afterwards, go back to the pop-up contact-us link and see how theirs look.) I think you can figure out the needed changes. Have fun…
