One file upload field acting on two submit forms

There can be few ways to do it.

One of them is:

• Add this to your second form.
  Code: ( text )
  1. <div style="display:none;"><input type="file" name="----" id="secondFile"></div>

• Add this to the file tag in the first form.
  Code: ( text )
  1. <input type="file" name="----" onchange="document.getElementById('secondFile').value = this.value;">

Tell me if this works...

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

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.



Thanks!

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?

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.

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.getElementById the same as FF (which I'm sure many of you know).

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



Any ideas on what I'm doing wrong?

Many thanks!

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

Hi acoder,

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

Anyway, I changed the relevant line to:

... 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.getElementById like hsriat suggested would be ideal, but I still can't get it to work in IE6 and Safari.

Any ideas?

Thanks!

Quote: Originally Posted by phub11 Code: ( text ) <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 getElementsByTagName 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.

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!

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

Quote: Originally Posted by phub11 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?

Quote: Originally Posted by 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!

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

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

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

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!

Quote: Originally Posted by 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. Anyway, I'll see if there is a work around. Thanks for you help!

He's right. If that's possible, it would have been so easy to steal files from people's computer. Just by using the same method which I told you.

So we need to find an alternative.

So try something like - change the action of the form when once submitted.

Regards,
Harpreet

Hi,

I've figured out a simple way to use one input file box with multiple PHP scripts. Merge the PHP scripts, and determine which part of the script is triggered depending on which submit button is clicked:





My (hopefully) final question: Both submit buttons dump the output into the "r" iframe. Could someone please explain to me how I can edit the FORM tag to execute "onsubmit" only when the "Update" button is clicked. I do not want the "Submit" button to trigger the "onsubmit" code.

Thanks!

Move the code inside onsubmit of the form to onclick of the required submit button.

Regards,
Harpreet

If I remove:
onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})"

from the FORM tag and place it with the "Upload" button as an "onclick" event, both buttons dump the output to a new page (i.e., the event isn't read).

Thanks!

Try this..

Hi again!

Thanks for the suggestion. It still doesn't seem to work; however, I've found that the following does as expected:
<input name="submit" value="Update" type="submit" onclick="alert('Hello!!!')">

Unfortunately these event doesn't seem to be passed to the FORM tag, and it appears that the event must be called inside the FORM tag. Could I have a conditional event inside the FORM tag, which is only triggered by one of the "Submit" buttons?

Thanks!

Replace this.parent with document.forms[0]

or

Try this..

Regards
Harpreet

PS: I'm not sure about the second one.

Hi Harpreet,

This *almost* works (your 1st suggestion)! If I hit button 2 first, the output is dumped to a new page, and if I hit button 1 first, the output is dumped to the iframe. However, if I hit button 1 first, and then hit button 2, the output generated by button 2 is dumped in the iframe too (arggh).

I suspect I need an "onclick" event with button 2 to clear some sort of memory/cache related to any previously run JS scripts (if they exist). I've Googled about, but can't find anything.

Any ideas?

Thanks!

Did you use the second thing?

And dude, I'll tell you a truth.
I still have not come to know what you are trying to do.

Regards,
Harpreet

According to the DOM on the input type=file object(http://www.w3schools.com/htmldom/dom_obj_fileupload.asp ), you cannot set the value through code of that input type.

Example of it:

You can check in IE and in FF, neither will allow you to change the value.

Here's a simplified version of the code (I left out the AJAX JS for possible agreement infringement - but it can be easily added), which should give a clear example for what I'm trying to achieve - and why the button clicking order is causing a problem. This code doesn't include any file uploading (I will add it later), as that's ancillary to the problem:



Thanks!

And what's the problem now?

If you press "update", the PHP output is dumped in the Iframe (which is good).

If you reload the page and press "submit", the PHP output is dumped in a new page (which is good).

If you press "update" - great (Iframe updated). However, if you then press "submit", the output is dumped in the Iframe, not a new page. It has a memory effect which I want to get rid of.

I've spent a while trying to decipher the webtoolkit/AJAX code I use, so as to fix the problem - but I'm still on a steep learning curve (I've only been programming as a hobby for a few months).

Sorry - but I hope this clears up any confusion, and stops this being the longest thread on this forum!

Add onclick="document.forms[0].target='_self'; return true;" to the second submit button.

Regards,
Harpreet

Dude - you are a rock star!

I dunno where you pulled that code from. I googled for ages!

For people who read this page later on - the following website shows how you can change the FORM "ACTION" depending on which button is clicked:

http://www.javascript-coder.com/html-form/html-form-action.phtml

Thanks for your help!

Actually when you were clicking the update button, it was changing the target of the form to the iframe. I just changed it back to the main page onclick of second submit button.

So you got it working?

Regards,
Harpreet

Yeah - does exactly what I wanted (including the file upload/delete).

It effectively allows one "FILE" box to act on two different PHP scripts - one dumps the PHP output in the Iframe, the other in a new page. Circumvents the problem with not allowing "VALUE" to be dynamically assigned to the "FILE" field.

Great! Thanks!

I'm glad you got it working. :)