[RESOLVED] uploading file using javascript but undefine in PHP

[joboy]

hi, i am creating a form that could browse and retrive a single file. please see my codes.

//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.

function passForm() {
    myForm.submit();

}

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

<?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.

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?

[Weedpacket]

Seeing as it has already been established that PHP just isn't receiving the file and that the problem is somehow on the client side, I'm moving this thread.

I can't say that I had the same problem when running your code. I can say that setting the submit button's onClick event to

bttn1.onclick="this.form.submit()";

worked.

Eewww! <font> tags!

[joboy]

bttn1.onclick="this.form.submit()";

i did follow the new code you gave and yet the prompt still remain...

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

so i decided to put a trap, topmost part of uploader.php, that verifies if $_FILE['upload'] do have a value?

<?php
echo '<pre>POST: '; print_r($_POST); echo "</pre>\n"; 
echo '<pre>FILES: '; print_r($_FILES); echo "</pre>\n"; 
echo "<hr />\n";
die();
// Check if the form has been submitted.
if (isset($_POST['submitted'])) {
   // Check for an uploaded file.
   //if (!$_FILES['upload']) {
	if (isset($_FILES['upload'])) {.....

unfortunately, the result was..

POST: Array
(
    [MAX_FILE_SIZE] => 2000000
    [upload] => D:\My Folder\My Pic\Me\s.jpg
    [submitted] => TRUE
)

FILES: Array
(
)

[bradgrafelman]

I know that many browsers block most script access to INPUT elements of the 'file' type as a security measure. Could it be that this is causing errors in your script?

Without seeing this in action (i.e. the outputted HTML page where the form is filled out), I can't say much more... just thought I'd throw that idea into the mix.

[joboy]

bradgrafelman wrote:

I know that many browsers block most script access to INPUT elements of the 'file' type as a security measure. Could it be that this is causing errors in your script?

i think security issue has nothing to do with the hitch, if i will use a plain HTML code everything works fine, i mean i could really upload file. as shown below:

<form enctype="multipart/form-data" action="uploader.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<p><b>File:</b> <input type="file" name="upload" /></p>
<input type="submit" name="submit" value="Submit" />
<input type="hidden" name="submitted" value="TRUE" />
</form>

beside i enabled the "Active Scripting" in the security Settings of the browser (I.E.6)..
it is a must for me (work requirements) to use "plain" javascript that's why i got into this challenge.

[joboy]

i modified some part and here it is. so, hopefully, others may benefit from it.

<!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...

myForm.encoding="multipart/form-data"; 

the php handler...

<?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..

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.

[bradgrafelman]

You can mark the thread as resolved using the Thread Tools menu.