PHP Novice, trying to do file uploads on a form.

[mstabosz]

Hi all,

 

First time poster.  I'm a novice at PHP, trying to work it out.  Right now I'm trying to write something that is a rough approximation of the old 1990s Geocities site.  The goal here is to have a file uploader form with 5 uploaders by default, but the user can add more as he pleases.  Most of the form elements are in plain old HTML, but I gotta use PHP to generate the block of the form that has the upload button.  I'm trying to do this with classes.  At this point, I'm just trying to get the PHP script to acknowledge that it received and uploaded the file.  Actually putting it in the right place comes later.

 

Here's what I have so far.  I'm sorry it's a little sparse on comments.

<div id="uploaderBox">
			<form action="uploadpage.php" method="post">
				<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
	
				<?php 
					//Create new uploaderBlock object. 
                                       $myUploader = new uploaderBlock(2);
 
                                        //Should be interpreted as if(isset($_FILES['uploader2']
					if(isset($_FILES[$myUploader->getUploaderName()]))
						$myUploader->getUploadedFile();
					else 
						print "Nothing uploaded yet!";
				?>
				<input type="submit" name="submitButton" value="Upload now!" />
			</form>
		</div>
	    <?php
	    	class uploaderBlock
	    	{
	    		private $uploaderName;
	    		
	    		public function __construct($upNumber)
	    		{
	    			$this->uploaderName = "uploader" .$upNumber;
	    			$this->makeUploaderBlock();	    			
	    		}
	    		
	    		public function makeUploaderBlock()
	    		{
	    			print '<input type="file" name="' .$this->uploaderName .'" />';
	    			print "<br />\n";
	    		}
	    		
	    		public function getUploadedFile()
	    		{
	    			print "UPLOADED FILE:<br />";
	    			print $_FILES[$this->uploaderName];
	    		}
	    		public function getUploaderName()
	    		{
	    			return $this->uploaderName;
	    		}
	    		
	    	}
		?>

The problem is that the script never seems to realize that a file has been uploaded.  The if(isset($_FILES[$myUploader->getUploaderName()])) statement always evaluates to FALSE. 

 

If I remove the if-else and just run the $myUploader->getUploadedFile(); statement, I get the error Notice: Undefined index: uploader2 in C:\Dropbox\xampp\htdocs\projects\FinalProject\uploadpage.php on line 43

 

It's funny because I thought I understood this.  Last week I did this little test script which works fine.  I can't figure out what I'm doing differently.  I mean, in the earlier script I'm using pure HTML for the entire form, and no objects.

<form action="file_io_test.php" enctype="multipart/form-data" method="post">
	<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
	<input type="file" name="uploader1" /><br />
	<input type="submit" name="submitbutton" value="Upload!" />
</form>


<?php

$infile = "stuff.txt";

$uploader = 'uploader1';

if(isset($_FILES[$uploader]['name']))
{
	$fileName = $_FILES[$uploader]['name'];
	move_uploaded_file($_FILES[$uploader]['tmp_name'], 'uploads/' .$fileName);
}
else 
	print "Nothing uploaded yet!";
?>

[Psycho]

1. Your new form does not have the proper encoding type set for a file upload. E.g. enctype="multipart/form-data"

 

2. Your if() statement is checking to see if an index within the $_FILES array is set. You should verify 1) what is contained in the $_FILES array and that 2) the dynamic index value ($myUploader->getUploaderName()) contains what you think it should.

 

3. The class doesn't make sense. You are initiating the class during the process of verifying the data sent in the form submission. But, when you instantiate the class it automatically calls the method makeUploaderBlock(). That makes no sense since you are using the class in this instance to verify the form submission. You should never have functions/methods that send output to the browser. They should return the output for the calling code to use.

 

EDIT: 4. Don't create the field names such as 'uploader1', 'uploader2', etc. Instead create sub-arrays.

 

<input type="text" name="uploader[1]" />
<input type="text" name="uploader[2]" />
<input type="text" name="uploader[3]" />

Edited September 16, 2013 by Psycho

[mstabosz]

Hi Psycho, thanks for the prompt reply.

 

Regarding point 1, that's it.  Probably.  I haven't had the chance to modify my code yet.  Thanks.  I knew that was part of the process, but I just totally forgot to put that in there and I guess I kept overlooking it.  Sometimes you just make a dumb mistake and need a fresh pair of eyes to point it out.

 

On the other points, thanks for the insights.  You're right, my code is really sloppy.  This is the first time I've done object oriented programming in PHP, and a lot of the time when I'm trying something new programming-wise I'll do something of a quick and dirty form just to see if I can get it working, then do a second pass to later to see if I can make it better.  Also, I was getting frustrated and trying a lot of random things to try and get it going, so that probably made a bad situation worse.

[mstabosz]

Including the enctype resolved this.  One question remains.  The file input looks different in different browsers.  In Internet Explorer and Opera, as well as in the web browser inside Eclipse (which I'm guessing is just Internet Explorer), there's a box like a text box, and the "Browse" button to the right of it.  In Firefox, Chrome, and Safari, the "Browse" button is to the left followed by plain text that says "No file selected" until you browse for a file, at which point it is replaced with the file name.

 

I prefer the look of the Internet Explorer/Opera/Eclipse version.  Is there any way to make it look that way in the other browsers?

[Psycho]

Not without creating some elaborate JavaScript/CSS to hide the actual input field and create a separate display element that interacts with the hidden field. There are several JQuery implementations that create such objects, but not one for a file input field. So you would have to build your own, which is not a good idea. For one, you would have to test the functionality in all the different browsers and in the different versions of those browsers (e.g. IE 10, 9, 8, etc.). Something that works in some browsers could break in others. Without testing ALL the browsers and versions, you run the risk of making the form completely unusable to some users. Second, a user on FireFox may like and be accustomed to the look of the file input field in that browser.

 

Basically, there is very little upside to trying to override the default layout. Applying some style properties is fine, but those will not change the differences you mentioned. Best to let the browser do what it was programmed to do.

[mstabosz]

Bah.  I was afraid you were gonna say that.  Oh well.