469,326 Members | 1,600 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,326 developers. It's quick & easy.

One file upload field acting on two submit forms

127 100+
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!
Mar 23 '08 #1
32 5122
hsriat
1,654 Expert 1GB
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="document.getElementById('secondFile').va lue = 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.
Mar 24 '08 #2
phub11
127 100+
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.

Expand|Select|Wrap|Line Numbers
  1. <form action="dropdown_update.php" enctype="multipart/form-data" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
  2. <input name="MAX_FILE_SIZE" value="1000000" type="hidden"><input name="uploadedfile1" type="file" size="1" onchange="document.getElementById('secondFile').value = this.value;">
  3. <input value="Update" type="submit">
  4. </form>
  5.  
  6. <form action="uploader.php" method="post" enctype="multipart/form-data">
  7. <div style="display:none;">
  8. <input type="file" name="uploadedfile1" id="secondFile">
  9. </div>
  10.  
Thanks!
Mar 24 '08 #3
hsriat
1,654 Expert 1GB
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?
Mar 24 '08 #4
phub11
127 100+
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.
Mar 24 '08 #5
phub11
127 100+
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...

Expand|Select|Wrap|Line Numbers
  1.  
  2. <form action="dropdown_update.php" enctype="multipart/form-data" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
  3. <input name="MAX_FILE_SIZE" value="1000000" type="hidden">
  4. <input name="uploadedfile1" type="file" size="1" onchange="parent.getElementsByTagName("input").value = this.value;">
  5. <!input name="uploadedfile1" type="file" size="1" onchange="alert(this.value);">
  6. <input value="Update" type="submit">
  7. </form>
  8.  
  9. <form action="uploader.php" method="post" enctype="multipart/form-data">
  10. <div style="display:none;">
  11. <input name="MAX_FILE_SIZE" value="1000000" type="hidden">
  12. <input type="file" name="uploadedfile1" id="secondFile">
  13. </div>
  14.  
Any ideas on what I'm doing wrong?

Many thanks!
Mar 24 '08 #6
acoder
16,027 Expert Mod 8TB
getElementsByTagName() gives you an array, so you need to use the index into the array.
Mar 24 '08 #7
phub11
127 100+
Hi acoder,

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

Anyway, I changed the relevant line to:
Expand|Select|Wrap|Line Numbers
  1. <input name="uploadedfile1" type="file" size="1" onchange="parent.getElementsByTagName("input")[0].value = this.value;">
  2.  
... 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!
Mar 24 '08 #8
hsriat
1,654 Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. <input name="uploadedfile1" type="file" size="1" onchange="parent.getElementsByTagName("input")[0].value = this.value;">
  2.  
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.
Mar 25 '08 #9
phub11
127 100+
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!
Mar 25 '08 #10
acoder
16,027 Expert Mod 8TB
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?
Mar 25 '08 #11
hsriat
1,654 Expert 1GB
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
Mar 25 '08 #12
phub11
127 100+
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)!
Mar 25 '08 #13
hsriat
1,654 Expert 1GB
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
Mar 25 '08 #14
phub11
127 100+
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!
Mar 25 '08 #15
hsriat
1,654 Expert 1GB
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
Mar 25 '08 #16
phub11
127 100+
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:

Expand|Select|Wrap|Line Numbers
  1. <form action="junk.php" enctype="multipart/form-data" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
  2. <input name="MAX_FILE_SIZE" value="1000000" type="hidden">
  3. <input name="uploadedfile1" type="file" size="1">
  4. <input name="submit" value="Update" type="submit">
  5. <pre id="r">
  6. ETC ETC
  7. </pre>
  8. <input name="submit" value="Submit" type="submit">
  9.  
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. print_r ($_POST);
  3. if ($submit=="Update") {
  4. echo "Update was clicked!";
  5. //////////////////////////////////////////
  6. } elseif ($submit=="Submit") {
  7. //////////////////////////////////////////
  8. echo "Submit was clicked!";
  9. }
  10. ?>
  11.  
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!
Mar 26 '08 #17
hsriat
1,654 Expert 1GB
Move the code inside onsubmit of the form to onclick of the required submit button.

Regards,
Harpreet
Mar 26 '08 #18
phub11
127 100+
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!
Mar 26 '08 #19
hsriat
1,654 Expert 1GB
Try this..
Expand|Select|Wrap|Line Numbers
  1. onsubmit="return AIM.submit(this.parent, {'onStart' : startCallback, 'onComplete' : completeCallback})"
Mar 26 '08 #20
phub11
127 100+
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!
Mar 26 '08 #21
hsriat
1,654 Expert 1GB
Replace this.parent with document.forms[0]

or

Try this..[html]
<form id='f1' action="junk.php" enctype="multipart/form-data" method="post" onsubmit="if (this.id=='f1') { this.id='f2'; return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback});} else { doWhatEverYouWantToDoHere(); return true;}">[/html]

Regards
Harpreet

PS: I'm not sure about the second one.
Mar 26 '08 #22
phub11
127 100+
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!
Mar 26 '08 #23
hsriat
1,654 Expert 1GB
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
Mar 26 '08 #24
Plater
7,872 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="Javascript">
  2.    function ChangeIt(val)
  3.    {
  4.       var o=document.getElementById("secondFile");
  5.       alert(o.value);
  6.       o.value=val;
  7.       alert(o.value);
  8.    }
  9. </script>
  10. <form>
  11. <input type="file" name="a" id="secondFile">
  12. <input type="file" name="b" id="firstFile" onchange="ChangeIt(this.value);">
  13. </form>
  14.  
You can check in IE and in FF, neither will allow you to change the value.
Mar 26 '08 #25
phub11
127 100+
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:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <meta content="text/html; charset=ISO-8859-1"
  5.  http-equiv="content-type">
  6.   <title></title>
  7.   <script type="text/javascript">
  8. /**
  9. *
  10. * AJAX IFRAME METHOD (AIM)
  11. * http://www.webtoolkit.info/
  12. *
  13. **/
  14. //PLEASE DOWNLOAD THE JAVASCRIPT FROM THEIR WEBSITE
  15.   </script>
  16. </head>
  17. <body>
  18. <form action="junk.php" method="post">
  19. <input name="submit" value="Update" type="submit" onclick="return AIM.submit(document.forms[0], {'onStart' : startCallback, 'onComplete' : completeCallback})">
  20.  
  21. <pre id="r">Click "Update" to put contents of junk.php in here<br>
  22. Click "Submit" to put contents of junk.php in a new page</pre>
  23.  
  24. <input name="submit" value="Submit" type="submit">
  25. </form>
  26. </body>
  27. </html>
  28.  
Thanks!
Mar 26 '08 #26
hsriat
1,654 Expert 1GB
And what's the problem now?
Mar 27 '08 #27
phub11
127 100+
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!
Mar 27 '08 #28
hsriat
1,654 Expert 1GB
Add onclick="document.forms[0].target='_self'; return true;" to the second submit button.

Regards,
Harpreet
Mar 27 '08 #29
phub11
127 100+
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!
Mar 27 '08 #30
hsriat
1,654 Expert 1GB
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
Mar 27 '08 #31
phub11
127 100+
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!
Mar 27 '08 #32
hsriat
1,654 Expert 1GB
I'm glad you got it working. :)
Mar 27 '08 #33

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by atse | last post: by
3 posts views Thread by Bijoy Naick | last post: by
6 posts views Thread by tshad | last post: by
3 posts views Thread by Jefferis NoSpamme | last post: by
7 posts views Thread by pbd22 | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by Gurmeet2796 | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.