One file upload field acting on two submit forms

[phub11]

Hi all,

This was originally posted on the HTML section, but it was suggested that I post it in the JavaScript section, so here it is...

I have a file upload box contained within a form which I use to dynamically update the contents of a drop down.

I have a second form just below which I use to submit the same file as used in form 1. However, I have set things up so that the uploaded file is deleted after the drop down has been updated - then this file is re-uploaded when the submit button in the second form is clicked. This obviously minimizes the time the file is on the server, so reduces the possibility a third party might see this data.

Is it possible to just have one file upload box.... in form1, and use this upload box as input for form 2 as well?

P.S: The forms are not nested.

Thanks!

[hsriat]

There can be few ways to do it.

One of them is:

• Add this to your second form.[html]<div style="display: none;"><input type="file" name="----" id="secondFile" ></div>[/html]

• Add this to the file tag in the first form.[html]<input type="file" name="----" onchange="docum ent.getElementB yId('secondFile ').value = this.value;">[/html]

Tell me if this works...

Other ways can be by changing name of submit button or form action onclick function of the submit button.

[phub11]

Hi,

Thanks for the suggestion. Works great in FF2, but doesn't work in IE6 and Safari. Below is the code I'm using. Any suggestions to make it more browser compatible would be great.

<form action="dropdown_update.php" enctype="multipart/form-data" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
<input name="MAX_FILE_SIZE" value="1000000" type="hidden"><input name="uploadedfile1" type="file" size="1" onchange="document.getElementById('secondFile').value = this.value;">
<input value="Update" type="submit">
</form>

<form action="uploader.php" method="post" enctype="multipart/form-data">
<div style="display:none;">
<input type="file" name="uploadedfile1" id="secondFile">
</div>

Thanks!

[hsriat]

It should work in IE too. If not working, there might be some problem with some other part of code.

But I am a bit confused about what you want to do. If you want to upload same file twice, why don't you make some changes in server side script to copy the file to two locations rather than creating two forms?

[phub11]

Hi!

Maybe I am being anal - but my website allows people to upload and analyze their scientific data, so I want to minimize the possibility of it being left on the server (either through a broken connection mid-processing, or distraction of the user who doesn't finish the session). It also gives the user confidence in having a message saying "Your uploaded data has been processed and deleted".

If I get the PHP script in the second form to report ( $_FILES['uploadedfile1']['name']) - it's fine in FF2, but not in IE6 or Safari. If I add 2 upload boxes (1 for each form), it works fine in all 3 browsers.

[phub11]

Hi again,

After doing a lot of trouble-shooting, I have figured out the source of the problem. It's basically that IE and Safari don't seem to handle document.getEle mentById the same as FF (which I'm sure many of you know).

I've tried using parent.getEleme ntsByTagName, but I get a syntax error...

<form action="dropdown_update.php" enctype="multipart/form-data" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
<input name="MAX_FILE_SIZE" value="1000000" type="hidden">
<input name="uploadedfile1" type="file" size="1" onchange="parent.getElementsByTagName("input").value = this.value;">
<!input name="uploadedfile1" type="file" size="1" onchange="alert(this.value);">
<input value="Update" type="submit">
</form>

<form action="uploader.php" method="post" enctype="multipart/form-data">
<div style="display:none;">
<input name="MAX_FILE_SIZE" value="1000000" type="hidden">
<input type="file" name="uploadedfile1" id="secondFile">
</div>

Any ideas on what I'm doing wrong?

Many thanks!

[acoder]

getElementsByTa gName() gives you an array, so you need to use the index into the array.

[phub11]

Hi acoder,

Thanks for the info. I'm still trying to figure out how to handle DOMs.

Anyway, I changed the relevant line to:

<input name="uploadedfile1" type="file" size="1" onchange="parent.getElementsByTagName("input")[0].value = this.value;">

... and I get a syntax error. Furthermore, I don't think I'm calling the correct child(?), as there are several "input"s. Using document.getEle mentById like hsriat suggested would be ideal, but I still can't get it to work in IE6 and Safari.

Any ideas?

Thanks!

[hsriat]

<input name="uploadedfile1" type="file" size="1" onchange="parent.getElementsByTagName("input")[0].value = this.value;">

Use the quotes carefully. When a string is started with double quotes, it tends to get closed at double quotes. And in your case, you have closed it before input. Do view source in FF, you will understand what was the problem. Use single quotes to enclose input

Moreover there's no need of using getElementsByTa gName when you can refer to the same element with getElementById.

Are there only 2 forms in your page of its more than that? The problem might occur if you have more then 1 element with id = secondFile

Moreover you have not closed the form tag in the above provided code. That also gives such problems.

[phub11]

Thanks hsriat for the suggestions.

I got rid of the double quotes round INPUT (doh!), but now I get an error saying "Object doesn't support this property or method".

Answers you your other questions: There are only 2 forms in the HTML part of the script; however, I think the hidden Iframe used for the dynamic upload (http://www.webtoolkit. info/) uses forms (my JS is not good enough to know for sure). The string "secondFile " is not used anywhere else in the script. Finally, the second form is closed using "/FORM" correctly - it's just way down the script.

Thanks for any further suggestions!

[acoder]

I'm still not sure why you need to submit the same file twice.

I have a second form just below which I use to submit the same file as used in form 1. However, I have set things up so that the uploaded file is deleted after the drop down has been updated - then this file is re-uploaded when the submit button in the second form is clicked. This obviously minimizes the time the file is on the server, so reduces the possibility a third party might see this data.

But then when it's submitted the second time, then what happens?

Why not upload to outside the web directory?

[hsriat]

Thanks hsriat for the suggestions.

I got rid of the double quotes round INPUT (doh!), but now I get an error saying "Object doesn't support this property or method".

Answers you your other questions: There are only 2 forms in the HTML part of the script; however, I think the hidden Iframe used for the dynamic upload (http://www.webtoolkit.info/) uses forms (my JS is not good enough to know for sure). The string "secondFile " is not used anywhere else in the script. Finally, the second form is closed using "/FORM" correctly - it's just way down the script.

Thanks for any further suggestions!

Even I used webtoolkit's AIM uploader, and it works good in my case.

Please explain a bit more what are you trying to do. May be I could suggest you some other way as loading the same file twice is not recommended. That is just wastage of time.
Give me the use case.

Regards,
Harpreet

[phub11]

Thanks for the replies guys!

Yeah - I know it's a waste of bandwidth, but when scientists are using web servers to analyze their data they are very uneasy leaving it on the server. The PHP code is used to read the Excel file, and update the drop-down accordingly. The file is deleted at the end of this script. The file is then re-uploaded to analyze the same data using another PHP script (based on subsequent HTML input), and is then deleted. This means that unless there is a break in the connection during either PHP script, the users data is off the server.

Anyway, the best way to explain whats going on is to have a look at the web page listed below. In the mean time, I will strip the code to the basics, and try and figure out what could be causing the problem. Bah!

page for a day (dot) com (slash) xtal wizard (slash) fixed (underscore) order (dot) php

Thanks for your help (and patience)!

[hsriat]

I could not see the second form. And one more thing. Instead of loading it again. Place a check box just below file asking user to Delete file after analysis.

But that's just a suggestion. You know the situation better.
I will still say that the solution that I provided in second post should work. Try to change name attribute or do something else. If its working in FF, you are too close in IE.

Although IE sucks (no doubt), but still we need to consider it while making websites. Just give it a try. Do some minor changes. It will work.

And one more thing.Its not sellpadding, its cellpadding. Similarly cellspacing.

Regards,
Harpreet

[phub11]

Hi Harpreet,

Thanks for taking a look at the page - and noticing the typos (the shame of using "search" and "replace" without checking!).

Anyway, according to the following web page, you can't use javascript to set a VALUE in a FILE INPUT (a security issue it seems). I guess FF2 wasn't clearing stuff out of a buffer - and was fooling me into think it was working.

http://www.webmasterworld.com/php/3031968.htm

Anyway, I'll see if there is a work around.

Thanks for you help!