[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]

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.