PHP Image uploader

Discussion in 'Web Design and Development' started by japaternoster, Jun 19, 2008.

  1. japaternoster macrumors newbie

    Joined:
    Nov 20, 2007
    #1
    Hi,

    I am quite new to php, and have found a script that does pretty much what I want it to do but needs a little modification. The original script is from here and I take no credit for it. I have however modified the file to allow upto 10 files to be uploaded at once, but want to add one more piece of functionality. What I want to be able to do is have another field in the form asking the user for a title ('title') for the files, then the files are placed in a folder named the title that they entered.

    eg
    I have a group of photos of a holiday in Brazil, I will enter brazil in the form and it will upload the files to .../uploaded_files/brazil/

    Hope this make sense. Anyway here is what I am working with (sorry it is long):

    File: multiple.upload.form.php
    Code:
    <?php
    
    // filename: multiple.upload.form.php
    
    // first let's set some variables
    
    // make a note of the current working directory relative to root.
    $directory_self = str_replace(basename($_SERVER['PHP_SELF']), '', $_SERVER['PHP_SELF']);
    
    // make a note of the location of the upload handler
    $uploadHandler = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'multiple.upload.processor.php';
    
    // set a max file size for the html upload form
    $max_file_size = 30000000; // size in bytes
    
    // now echo the html page
    ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    	
    		<link rel="stylesheet" type="text/css" href="stylesheet.css">
    		
    		<title>Upload form</title>
    	
    	</head>
    	
    	<body>
    	
    	<form id="Upload" action="<?php echo $uploadHandler ?>" enctype="multipart/form-data" method="post">
    	
    		<h1>
    			Upload form
    		</h1>
    		
    		<p>
    			<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>">
    		</p>
    			<input type="text" name="directory" id="dir">
    		<p>
    			<label for="file1">File to upload:</label>
    			<input id="file1" type="file" name="file[]">
    		</p>
    				
    		<p>
    			<label for="file2">File to upload:</label>
    			<input id="file2" type="file" name="file[]">
    		</p>
    				
    		<p>
    			<label for="file3">File to upload:</label>
    			<input id="file3" type="file" name="file[]">
    		</p>
    		<p>
    			<label for="file4">File to upload:</label>
    			<input id="file4" type="file" name="file[]">
    		</p>
    		<p>
    			<label for="file5">File to upload:</label>
    			<input id="file5" type="file" name="file[]">
    		</p>
    		<p>
    			<label for="file6">File to upload:</label>
    			<input id="file6" type="file" name="file[]">
    		</p>
    		<p>
    			<label for="file7">File to upload:</label>
    			<input id="file7" type="file" name="file[]">
    		</p>
    		<p>
    			<label for="file8">File to upload:</label>
    			<input id="file8" type="file" name="file[]">
    		</p>
    		<p>
    			<label for="file9">File to upload:</label>
    			<input id="file9" type="file" name="file[]">
    		</p>
    		<p>
    			<label for="file10">File to upload:</label>
    			<input id="file10" type="file" name="file[]">
    		</p>
    				
    		<p>
    			<label for="submit">Press to...</label>
    			<input id="submit" type="submit" name="submit" value="Upload us!">
    		</p>
    	
    	</form>
    	
    	
    	</body>
    
    </html>
    File: multiple.upload.processor.php
    Code:
    <?php  
    
    // filename: multiple.upload.processor.php
    
    // first let's set some variables
    
    // make a note of the current working directory, relative to root.
    $directory_self = str_replace(basename($_SERVER['PHP_SELF']), '', $_SERVER['PHP_SELF']);
    
    // make a note of the directory that will recieve the uploaded files
    $uploadsDirectory = $_SERVER['DOCUMENT_ROOT'] . $directory_self . 'uploaded_files/';
    
    // make a note of the location of the upload form in case we need it
    $uploadForm = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'multiple.upload.form.php';
    
    // make a note of the location of the success page
    $uploadSuccess = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'multiple.upload.success.php';
    
    // name of the fieldname used for the file in the HTML form
    $fieldname = 'file';
    
    //echo'<pre>';print_r($_FILES);exit;
    
    
    
    // Now let's deal with the uploaded files
    
    // possible PHP upload errors
    $errors = array(1 => 'php.ini max file size exceeded', 
                    2 => 'html form max file size exceeded', 
                    3 => 'file upload was only partial', 
                    4 => 'no file was attached');
    
    // check the upload form was actually submitted else print form
    isset($_POST['submit'])
    	or error('the upload form is neaded', $uploadForm);
    	
    // check if any files were uploaded and if 
    // so store the active $_FILES array keys
    $active_keys = array();
    foreach($_FILES[$fieldname]['name'] as $key => $filename)
    {
    	if(!empty($filename))
    	{
    		$active_keys[] = $key;
    	}
    }
    
    // check at least one file was uploaded
    count($active_keys)
    	or error('No files were uploaded', $uploadForm);
    		
    // check for standard uploading errors
    foreach($active_keys as $key)
    {
    	($_FILES[$fieldname]['error'][$key] == 0)
    		or error($_FILES[$fieldname]['tmp_name'][$key].': '.$errors[$_FILES[$fieldname]['error'][$key]], $uploadForm);
    }
    	
    // check that the file we are working on really was an HTTP upload
    foreach($active_keys as $key)
    {
    	@is_uploaded_file($_FILES[$fieldname]['tmp_name'][$key])
    		or error($_FILES[$fieldname]['tmp_name'][$key].' not an HTTP upload', $uploadForm);
    }
    	
    // validation... since this is an image upload script we 
    // should run a check to make sure the upload is an image
    foreach($active_keys as $key)
    {
    	@getimagesize($_FILES[$fieldname]['tmp_name'][$key])
    		or error($_FILES[$fieldname]['tmp_name'][$key].' not an image', $uploadForm);
    }
    	
    // make a unique filename for the uploaded file and check it is 
    // not taken... if it is keep trying until we find a vacant one
    foreach($active_keys as $key)
    {
    	$now = time();
    	while(file_exists($uploadFilename[$key] = $uploadsDirectory.$_FILES[$fieldname]['name'][$key]))
    	{
    		$now++;
    	}
    }
    
    // now let's move the file to its final and allocate it with the new filename
    foreach($active_keys as $key)
    {
    	@move_uploaded_file($_FILES[$fieldname]['tmp_name'][$key], $uploadFilename[$key])
    		or error('receiving directory insuffiecient permission', $uploadForm);
    }
    	
    // If you got this far, everything has worked and the file has been successfully saved.
    // We are now going to redirect the client to the success page.
    header('Location: ' . $uploadSuccess);
    
    // make an error handler which will be used if the upload fails
    function error($error, $location, $seconds = 5)
    {
    	header("Refresh: $seconds; URL=\"$location\"");
    	echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'."\n".
    	'"http://www.w3.org/TR/html4/strict.dtd">'."\n\n".
    	'<html lang="en">'."\n".
    	'	<head>'."\n".
    	'		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">'."\n\n".
    	'		<link rel="stylesheet" type="text/css" href="stylesheet.css">'."\n\n".
    	'	<title>Upload error</title>'."\n\n".
    	'	</head>'."\n\n".
    	'	<body>'."\n\n".
    	'	<div id="Upload">'."\n\n".
    	'		<h1>Upload failure</h1>'."\n\n".
    	'		<p>An error has occured: '."\n\n".
    	'		<span class="red">' . $error . '...</span>'."\n\n".
    	'	 	The upload form is reloading</p>'."\n\n".
    	'	 </div>'."\n\n".
    	'</html>';
    	exit;
    } // end error handler
    
    ?>

    File: multiple.upload.success.php
    Code:
    <?php
    
    // filename: multiple.upload.success.php
    
    ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    		
    		<link rel="stylesheet" type="text/css" href="stylesheet.css">
    		
    		<title>Successful upload</title>
    	
    	</head>
    	
    	<body>
    	
    		<div id="Upload">
    			<h1>File upload</h1>
    			<p>Congratulations! Your file uploads were successful</p>
    		</div>
    	
    	</body>
    
    </html>
    File: stylesheet.css
    Code:
    #Upload {
    	width: 25em;
    	margin: 1em auto;
    	padding:0 2em 2em 2em ;
    	border:1px solid #bbb;
    	color: #333;
    	background:#ffd;
    	font: 0.9em verdana, sans-serif;
    }
    			
    #Upload h1{
    	font: 1.4em bold verdana, sans-serif;
    	margin: 0;
    	padding:1em 0;
    	text-align:center;
    }
    #Upload label{
    	float: left;
    	width: 7em;
    }
    		
    #Upload p {
    	 clear: both;
    }		
    
    .red{
    	color:red;
    }
    And there is also a folder called 'uploaded_files' where the files are uploaded to.

    Thanks
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I haven't looked through the files that closely as there's a lot there and I don't have enough time at the moment, but something to look into:
    1. You mention the "title" will be a folder name for the files to be placed in. Do you create this folder before trying to move the file to it? PHP will not create directories on its own unless you tell it to. I've run into this myself when I decide to use a different folder, which I haven't yet created.
    2. Do you have access to the PHP error log? This can provide insight into what's going wrong. If you find the log and post the errors (if you don't understand them) that could be helpful as you didn't mention where the code is failing.
     
  3. japaternoster thread starter macrumors newbie

    Joined:
    Nov 20, 2007
    #3
    Ah ok, maybe it could be set up so that the uploaded file is called:
    title-filename.jpeg

    eg upload file "hello.gif" with the other input being "germany"
    the file uploaded will be "germany-hello.gif"

    My only real problem is reading in what was entered into the text field in the form and converting it into a variable.

    Thanks
     
  4. japaternoster thread starter macrumors newbie

    Joined:
    Nov 20, 2007
    #4
    did some more reading and figured it out i just concat'ed "$_POST['directory'].'-'." into the script where it saves the file.

    Thanks for your help, I will now try and get it to create the directory and then save it within.
     
  5. ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #5
    Yes, just tack that on to the filename when you move the file from the temporary directory to its final destination.

    One thing though, be very careful when allowing users to name files like that. A malicious filename can do a lot of damage. Be sure to check against dots or slashes in the name! Things like that. :)
     
  6. japaternoster thread starter macrumors newbie

    Joined:
    Nov 20, 2007
    #6
    Thanks ppc_michael, the site will only be accessible by me and will be protected by a password so there shouldn't be any problems with malicious files.
     
  7. goofen macrumors newbie

    Joined:
    Sep 7, 2009
    #7
    Problems Uploading File

    hey guys i need some help to do this how can i solve this problem? visit http://www.wuaraira.com/upload.form.php and try to upload an image... it displays this error "An error has occured: receiving directory insuffiecient permission... The upload form is reloading" what can i do? help me plz!
     
  8. thejadedmonkey macrumors 604

    thejadedmonkey

    Joined:
    May 28, 2005
    Location:
    Pa
    #8
    You probably don't have the permissions set correctly on the folder. Chmod it to 666 or 777 I think...
     
  9. goofen macrumors newbie

    Joined:
    Sep 7, 2009
    #9
    That works! thanks. but now the file doesnt appear in the folder aparently it uploads the file but isnt in the folder =/...

    i have this files uploaded in my ftp what else can i do?
    visit http://www.wuaraira.com/uploader.png to see the screen shot!
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Need to see the actual code doing the processing to figure out what may be happening.
     
  11. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #11
    If you are using (you should be) the move_uploaded_file function within PHP, see what error message, if any, it is throwing back.

    A list of the error numbers and their meaning can be found here.
     
  12. goofen macrumors newbie

    Joined:
    Sep 7, 2009
    #12
    Thanks

    Problem solved guys thanks for your help the problem was the location path of the file but i fixed it successfully thank you so much! :D now works perfect!
     

Share This Page