Log in

View Full Version : making a handy image uploader for family



baconDelta
12-22-2011, 09:44 PM
hey guys, brand new here.

before i go on let me say that,
i searched the forums for my problem but the latest thread with any remotely similar issues was in like 2007.

i'm making an image uploader for my family on my server, so we have a nice place to look through all our pictures on the fly.

i've snooped around a bit and slapped this little thing together. so far it takes an image, renames it with a randomly generated number, and uploads it to the folder of my choosing. i've included my problems and comments as comments in the code:


<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 2000000))
/* so from the above you see it only takes jpeg or gifs,
but i want it to take all image types, and rather than listing them
all i want to use this clever bit i found in another example,

$image_size = getimagesize($_FILES['file']['tmp_name']);

if ($image_size==FALSE)
echo "that's not an image.";
else
{
this would save a lot of lines and make it more dynamic, it would just check
if the file has an image size, if not it would just kick it out.
but i'm having trouble implementing it. i figure i have to define $image
first right? how would i define $image as the image? i would put the
ending brace for the else statement at the bottom just before the php
close tag.(not sure if that's right either, but it doesn't work :/)
anyway it goes,
*/
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
/*btw i set the image size limit at 2mb for now, but if i change this
echo to something like "your image is over 2MB reduce it and try again!"
it doesn't display the message. i have no idea why not...
*/
}
else
{
//here the image name splits from the extension and is renamed, then reconnected.
function findexts ($filename) {
$filename = strtolower($filename) ;
$exts = split("[/\\.]", $filename) ;
$n = count($exts)-1;
$exts = $exts[$n]; return $exts;
}
$ext = findexts ($_FILES['file']['name']) ;
$ran = rand () ;
$ran2 = $ran.".";
$target = "random/";

$target = $target . $ran2.$ext;

echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Type: " . $_FILES["file"]["type"] . "<br />";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

if (file_exists("random/" . $ran2.$ext))
{
echo $ran2.$ext . " already exists. ";
/*also i know this is retarded, but i'm still trying to figure out how to put a
while loop here so it renames the image again in case of a same name.
i figure it's something like:
while(file_exists("random/" . $ran2.$ext))
{
$ran = rand () ;
$ran2 = $ran.".";
$target = "random/";
$target = $target . $ran2.$ext;
}
but i'm not entirely sure if that will work. kind of hard to test it when a
random number is generated everytime lol
*/
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"], $target);
echo "Stored in: " . "mything.com/random/" .$ran2.$ext;
}
}
}
else
{
echo "Invalid file";
/*this echo comes up even on page load, before an image is even chosen
or uploaded. i'm sure it would cause mass confusion but i'm still trying to
figure out how to fix this. maybe i should just change it to 'ready for image
upload' since i have that other error catch in place.
*/
}
?>

another concern is when the page is refreshed, it asks to resend data, how can i eliminate this request? i would just want the uploader to be reset, otherwise a duplicate is sent everytime the page is reloaded or the back button is hit once leaving the page. i read that i can use a javascript redirect, but when i try implementing the couple i've found it doesn't work or the page doesn't even load. i also read that 'session' can be used, but i'm trying to figure that out.

any ideas? i know it's a big mess, but that's why i'm looking for some guidance, my php is lacking x.x

fastsol1
12-24-2011, 08:48 PM
I would take a look at this youtube channel - http://youtube.com/betterphp
This guy is very good at security and his coding skills are top notch. He has a few videos on file upload so search for those and you should be good. The whole thing about resending data with page refresh, one smart way is after all the validation passes and you move the files use the header() to redirect back to the page you want. That will eliminate your issue. If you want to display the file info from the upload, before you do the redirect put the info into some session vars or GET vars in the url and then you can access them in the new page.

baconDelta
12-25-2011, 10:51 PM
mighty fine resource thanks! i'll scour his vids for it. yeah i've had trouble getting the header () to work. i know that you can't output anything to the page if you're going to direct away from it, but it still doesn't redirect for me. i'll experiment a bit and look up your terminology but thanks for the informative post :D in case anyone is interested i've updated the code a bit. i made the pictures name count up from 0 instead of just giving a random number, so the while loop works. i'm still trying to figure out how to use

getimagesize($_FILES['image']['tmp_name']);
to seperate images from non-images instead of listing all the extensions the uploader approves. one thing i've noticed is that it has issues with certain gifs, no idea why. here's the updated code, it's a lot cleaner:


<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2000000))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else
{
function findexts ($filename) {
$filename = strtolower($filename) ;
$exts = split("[/\\.]", $filename) ;
$n = count($exts)-1;
$exts = $exts[$n]; return $exts;
}

$ext = findexts ($_FILES['file']['name']) ;

$ran = 0 ;
$ran2 = $ran.".";
$target = "random/";

$target = $target . $ran2.$ext;

echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Type: " . $_FILES["file"]["type"] . "<br />";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

if (file_exists("random/" . $ran2.$ext))
{
while(file_exists("random/" . $ran2.$ext))
{
$ran++;
$ran2 = $ran.".";
$target = "random/";
$target = $target . $ran2.$ext;
}
move_uploaded_file($_FILES["file"]["tmp_name"], $target);
echo "Stored in: " . "mywebsite.com/random/" .$ran2.$ext;
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"], $target);
echo "Stored in: " . "mywebsite.com/random/" .$ran2.$ext;
}
}
}
else
{
echo "Upload Time";
}
?>

baconDelta
12-28-2011, 09:36 PM
sweet i got it working. now the code takes the uploaded image and makes a new page for it with the same name as the image. the image is shown in a nice template with a title box that i made on the upload page. now all i have to figure out is how to link the latest page to the rest in the folder, so that they can be scrolled through.

edit: after a little looking around it seems like i can scroll to the next page with the readdir() function. it might be tricky getting it to work with placeholders and the template page for freshly uploaded pics.

baconDelta
01-02-2012, 05:18 AM
just a quick update.

i got the page to redirect successfully.

just to reiterate the problem was that the upload page would not redirect once the image was uploaded and new page created.

i fixed this by turning on output buffering for the process of the upload. my upload page looked like this,



<html>
<head>blah blah</head>
<body>
submit form is here.
<?php

include("functions/image_upload.php");

?>
</body>
</html>


so what i did is just go to image_upload.php and put my header at the very end.

then i came back to the upload page and wrapped the whole thing in output buffer tags, so that the page was flushed once everything on it was executed. and since i put the redirect header at the bottom of that image_upload.php this means the image is uploaded AND the header redirect is hit BEFORE it's passed to the browser. so the user is directed to the new page just after it's been made. pretty snazzy.

so now the upload page looks like this:


<?php ob_start(); ?>
<html>
<head>blah blah</head>
<body>
submit form is here. choose file and such.
<?php

include("functions/image_upload.php");

?>
</body>
</html>
<?php ob_end_flush(); ?>


i'm fairly certain the output buffer has to be started before any html or whitespace. as soon as even whitespace is passed, the browser starts processing the page and won't accept a header as it's already doing something.

one important aspect to this working is that at the very top of my image_upload.php i have this:


if(!$_POST)
{
break;
}
else{
the actual upload code.


so until something is even posted(image is chosen and upload button is hit), the upload code, and the header redirect won't be processed, keeping the user on the upload page. that is if there is no post(!$_POST) then it breaks out of my code.

and now when someone hits back after they've been redirected there's no asking for resending of data ^_^

edit: something else just hit me, i need to put a safeguard in to not redirect the user if the upload is not successful. for instance if someone picks a text file, even though it's not successfully uploaded, it will still attempt to redirect. this can be done with a simple if else statement.

edit2: so it seems an if else statement doesn't affect the redirecting. it's not really a big deal as it redirects to the folder's index on failure.

so now i'm on to getting my 'next' and 'previous' buttons working, so that when gramma lands on her freshly uploaded picture, she can hit next or previous, and see other pictures in the album.

still trying to figure out how to do that, if anyone has ideas pitch em :D