Page 1 of 1

uploading file using javascript but undefine in PHP

Posted: Mon Dec 11, 2006 1:09 am
by joboy
hi, i am creating a form that could browse and retrive a single file. please see my codes.

Code: Select all

//create the form
myForm=document.createElement("form");
myForm.action="uploader.php";
myForm.method="post";
myForm.enctype="multipart/form-data";
rightDiv.appendChild(myForm);
						
hidden1=document.createElement("input");
hidden1.type="hidden";
hidden1.name= "MAX_FILE_SIZE";
hidden1.value= 2000000;
myForm.appendChild(hidden1);
				
//for the browse button		
bttn = document.createElement("input");
bttn.type="file";
bttn.name="upload";
bttn.value="";
bttn.style.position="absolute";
myForm.appendChild(bttn);
		
//for submit button
bttn1 = document.createElement("input");
bttn1.type="submit";
bttn1.value="Submit";
bttn1.style.position="absolute";
bttn1.onclick=passForm;
myForm.appendChild(bttn1);
		
hidden2=document.createElement("input");
hidden2.type="hidden";
hidden2.name="submitted";
hidden2.value="TRUE";
myForm.appendChild(hidden2)
once the button Submit is click it wil call the function passForm to hopefully send the input element's value to a PHP file.

Code: Select all

function passForm() {
    myForm.submit();

}
and here is my PHP codes (uploader.php) that will handle the data from javascript codes.

Code: Select all

<?php
if (isset($_POST['submitted'])) {

   // Check for an uploaded file.
   if (isset($_FILES['upload'])) {	
		
       // Validate the type.
      $allow_pic = array ('image/gif', 'image/jpeg', 'image/jpg', 'image/pjpeg');
      $allow_doc = array ('application/msword', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/pdf');
              
      if (in_array($_FILES['upload']['type'], $allow_doc) || in_array($_FILES['upload']['type'], $allow_pic)) { 

         if (move_uploaded_file($_FILES['upload']['tmp_name'], "../documents/{$_FILES['upload']['name']}")) {
            echo '<p>The file has been uploaded!</p>';
			
         } else { // Couldn't move the file over.
             echo '<p><font color="red">The file could not be uploaded.</b>';
         } 
      } else { // Invalid type.
           echo '<p><font color="red">File format is not supported.</font></p>';
      }

   } else { // No file uploaded.
      echo '<p><font color="red">Please upload a MS Word, MS PowerPoint, MS Excel, or PDF File smaller than 2MB.</font></p>';
      $_FILES['upload'];   // to check if this global variable is set(and/or has value).
   }
} // End of the submitted conditional.
?>
unfortunately, i got this result.

Code: Select all

Please upload a MS Word, MS PowerPoint, MS Excel, or PDF File smaller than 2MB.


Notice: Undefined index: upload in F:\Program Files\Apache Group\Apache2\htdocs\DCFA\test1\sections\members\uploader.php on line 70
one thing for sure the value, supposedly for $_FILE['upload'], didn't reach uploader.php. i guess my javascript codes just lack something or is there a better way around?

Posted: Mon Dec 11, 2006 1:13 am
by feyd
Is there a reason you're using Javascript to create this form over say HTML?

Posted: Mon Dec 11, 2006 1:31 am
by joboy
thanks for the question. yup it is our company standard to use plain javascript - i mean not just embedding this client side scripting language to HTML.

Posted: Mon Dec 11, 2006 1:40 am
by Sloth

Code: Select all

var_dump($_FILES);

Posted: Mon Dec 11, 2006 1:45 am
by volka
The script works ok for me.
What is/was line 70?

Posted: Mon Dec 11, 2006 1:53 am
by joboy
Sloth wrote:

Code: Select all

var_dump($_FILES);
i put this statement on the topmost to check its purpose, but still got this message.

Code: Select all

Notice: Undefined index: upload in F:\Program Files\Apache Group\Apache2\htdocs\DCFA\test1\sections\members\uploader.php on line 2
NULL

Posted: Mon Dec 11, 2006 2:00 am
by volka
You didn't expect a var_dump to resolve the problem, did you? It's about what the var_dump prints
Try

Code: Select all

<?php
error_reporting(E_ALL);
ini_set('display_errors', true);
echo '<pre>POST: '; print_r($_POST); echo "</pre>\n";
echo '<pre>FILES: '; print_r($_FILES); echo "</pre>\n";
echo "<hr />\n";

if (isset($_POST['submitted'])) {

	// Check for an uploaded file.
	if (isset($_FILES['upload'])) {     
               
		// Validate the type.
...
What does it print?

Posted: Mon Dec 11, 2006 2:02 am
by joboy
volka wrote:The script works ok for me.
What is/was line 70?
in my case line 70 refers to...

Code: Select all

} else { // No file uploaded.
		echo '<p><font color="red">Please upload a MS Word, MS PowerPoint, MS Excel, or PDF File smaller than 2MB.</font></p>';
		$_FILES['upload']; // this is line 70. 
}
i so glad to hear that it is working in your case.. i think my PHP version (5.1.4) has nothing to do with this?
you mean, you didn't add any statement at all?

Posted: Mon Dec 11, 2006 2:09 am
by volka

Code: Select all

<html>
	<head><title>...</title></head><body>
		<div id="rightDiv"></div>
		<script type="text/javascript">
			function passForm() {
				myForm.submit();
			}
			rightDiv = document.getElementById("rightDiv");
			//create the form
			myForm=document.createElement("form");

			myForm.action="uploader.php";
			myForm.method="post";
			myForm.enctype="multipart/form-data";
			rightDiv.appendChild(myForm);
			                                               
			hidden1=document.createElement("input");
			hidden1.type="hidden";
			hidden1.name= "MAX_FILE_SIZE";
			hidden1.value= 2000000;
			myForm.appendChild(hidden1);
			                               
			//for the browse button  
			bttn = document.createElement("input");
			bttn.type="file";
			bttn.name="upload";
			bttn.value="";
			bttn.style.position="absolute";
			myForm.appendChild(bttn);
			               
			//for submit button
			bttn1 = document.createElement("input");
			bttn1.type="submit";
			bttn1.value="Submit";
			bttn1.style.position="absolute";
			bttn1.onclick=passForm;
			myForm.appendChild(bttn1);
			               
			hidden2=document.createElement("input");
			hidden2.type="hidden";
			hidden2.name="submitted";
			hidden2.value="TRUE";
			myForm.appendChild(hidden2);
		</script>
	</body>
</html>
added html code and rightDiv = document.getElementById("rightDiv");
What's
$_FILES['upload'];
as single statement supposed to do? What about

Code: Select all

<?php 1; ?>
? ;)
And btw: it's in the else block of if(isset($_FILES['upload']), so it's clear there is no $_FILES['upload'], you cannot access the element.

Posted: Mon Dec 11, 2006 2:38 am
by joboy
vodka, your additional codes are truly convincing..but i still need to adapt them to mine because the codes i presented were just a short version of the actual script. later i will give you my feedback..thanks in advance.

anyway here is the result..

Code: Select all

POST: Array
(
    [MAX_FILE_SIZE] => 2000000
    [upload] => D:\My Folder\Temp\bytes conversion table.xls
    [submitted] => TRUE
)

FILES: Array
(
)
of the codes you gave me..right below

Code: Select all

error_reporting(E_ALL); 
ini_set('display_errors', true); 
echo '<pre>POST: '; print_r($_POST); echo "</pre>\n"; 
echo '<pre>FILES: '; print_r($_FILES); echo "</pre>\n"; 
echo "<hr />\n";

Posted: Mon Dec 11, 2006 3:03 am
by volka
The output indicates that the form data was not submitted as multipart/form-data or the input element named "upload" was not of the type "file".
Otherwise there wouldn't be an element upload in the $_POST array.

Posted: Mon Dec 11, 2006 9:26 pm
by joboy
volka, i encountered probs while running your codes. it states..

Code: Select all

A Runtime Error has occured.
Do you wish to Debug?

Line 7
Error: Object doesn't support this property or method.
btw i enabled Script Debugging in I.E.6, the debugger pointed to this line.

Code: Select all

rightDiv = document.getElementById("rightDiv");

Posted: Sun Jan 07, 2007 11:45 pm
by joboy
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


volka:

i just want to tell u that your code actually works, maybe my PC at that time was experiencing something weird. i modified some part and here it is. so, hopefully, others may benefit from it. by the way i use the tag "

Code: Select all

[ /code]" because "[html][/html]" will not work...

[syntax="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Uploading File</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  
   <script type="text/javascript">
   <!--
   
		var myForm;
		var button;
		var stop=false;
   
		function submit() {
			if (false)
				window.setTimeout(submit, 500);
			else
				myForm.submit();
		}
   
	  function start()  {
	        		  		                          
	
			myForm=document.createElement("form");
			myForm.action="uploader.php";
			myForm.method="post";
			myForm.encoding="multipart/form-data"; 
			myForm.enctype="multipart/form-data"; 
			document.body.appendChild(myForm);
			
			upload2=document.createElement("input");
			upload2.type="file";
			upload2.name="upload2";
			myForm.appendChild(upload2);
			
			button=document.createElement("input");
			button.type="submit";
			myForm.appendChild(button);
				
			
 	  } // end of function start().
   
   // -->
   </script>
</head>
<body onLoad="start()"> 
	<p>This page is for uploading of file.</p>
	
</body>
</html>

as you will notice this lines was not present in my original codes...[/syntax]

Code: Select all

myForm.encoding="multipart/form-data";
the php handler...

Code: Select all

<?php
echo "<pre>POST: "; print_r($_POST); echo "</pre>\n"; 
echo "<pre>FILES: "; print_r($_FILES); echo "</pre>\n"; 
echo "<hr />\n";
?>
now gives me the desired result..

Code: Select all

POST: Array
(
)

FILES: Array
(
    [upload2] => Array
        (
            [name] => bytes conversion table.xls
            [type] => application/vnd.ms-excel
            [tmp_name] => H:\Temp\php5C.tmp
            [error] => 0
            [size] => 13824
        )

)
again, thanks for all of those who replied to this thread and i want to sealed it as solved.


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Mon Jan 08, 2007 9:00 am
by feyd

Code: Select all

 will not work because we have no such tag. The proper tag for HTML is: [syntax="html"]your html here[/syntax]

Posted: Tue Jan 09, 2007 9:47 pm
by joboy
feyd:

thanks for inserting the right tag.