473,320 Members | 1,841 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

open file selection from a link

Hi all,

I'm trying to upload files doing something like gmail. I almost got it
but I have a problem when I post the form.

Basicaly, I am doing the following.

When the user presses the link I create a input type="file". Then I
fire the click event of the control and the open file dialog appears.
The user selects a file and then the onpropertychange of the control
calls the funtion "onFileSelected" where I get the file name. Then I
create one control to hold the file name and a delete hyperlink to
delete the controls.

That part work just fine.

My problem comes when the user presses the "upload" button. For some
reason instead of submiting the form it executes de "onFileSelected"
function again, sets the focus in the textbox next to the "Browse"
button and removes the name of the file that the user had already
selected.

If instead of doing that, I remove the line that hids the input file
and the line that fires the click event and force the user to press
the "Browse" button, everything works perfectly. The Upload button
sends the request to the server where I upload the files!

Could somebody tell me the difference between firing the click event
programatically and pressing on the "Browse" button please? Could you
also let me know how to solve it please?

This is my code.

<HTML>
<HEAD>
<script language="javascript">
function anotherFile(lnk) {
if (document.createElement &&
lnk.insertBefore &&
lnk.parentNode) {

var finp = document.createElement('input');
var brk = document.createElement('br');

if (finp && brk) {
finp.type = 'file';
finp.name = 'userfile' + (new Date()).getTime() + Math.floor(100
* Math.random());

finp.onpropertychange = function () {
onFileSelected(this, brk);
return false;
}

finp.style.visibility="hidden";

lnk.parentNode.insertBefore(finp, lnk);
lnk.parentNode.insertBefore(brk, lnk);

finp.click();
}
}
return false;
}

function onRemove(aLink, aFile, aBr, aS){

aLink.removeNode(true);
aFile.removeNode(true);
aBr.removeNode(true);
aS.removeNode(true);

return false;
}

function onFileSelected(finp, brk) {
if (document.createElement &&
finp.insertBefore &&
finp.parentNode) {

var a = document.createElement("a");
var s = document.createElement("span");

if (s && a) {

a.href = "#";

a.onclick = function () {
onRemove(this, finp, brk, s);
return false;
}

var t = document.createTextNode("[Remove]");
if (t) {
a.appendChild(t);
}

var t2 = document.createTextNode(finp.value + " ");
if (t2) {
s.appendChild(t2);
}

finp.parentNode.insertBefore(s, finp);
finp.parentNode.insertBefore(a, finp);
}
}

return false;
}

</script>
</HEAD>
<body>
<form id="Form1" method="post" encType="multipart/form-data"
runat="server">
<table>
<tr>
<td><A id="link2" style="Z-INDEX: 109; WIDTH: 240px; HEIGHT:25px;
BACKGROUND-COLOR: white" href="#" onclick="return
anotherFile(this);">Another Attachment</A>
</td>
</tr>
<tr>
<td><input class="button" type="submit" name="upload" value="Upload
">
</td>
</tr>
</table>
</form>
</body>
</HTML>

Thank you very much in advance

Jonatan
Jul 23 '05 #1
1 2767
Sam
Hello,
Did you find any solution about 'upload file programmatically' when
you post the form? I have the same problem :(
Help much appreciated,
Thanks in advance,

Sam

Jonatan wrote:
Hi all,

I'm trying to upload files doing something like gmail. I almost got it but I have a problem when I post the form.

Basicaly, I am doing the following.

When the user presses the link I create a input type="file". Then I
fire the click event of the control and the open file dialog appears.
The user selects a file and then the onpropertychange of the control
calls the funtion "onFileSelected" where I get the file name. Then I
create one control to hold the file name and a delete hyperlink to
delete the controls.

That part work just fine.

My problem comes when the user presses the "upload" button. For some
reason instead of submiting the form it executes de "onFileSelected"
function again, sets the focus in the textbox next to the "Browse"
button and removes the name of the file that the user had already
selected.

If instead of doing that, I remove the line that hids the input file
and the line that fires the click event and force the user to press
the "Browse" button, everything works perfectly. The Upload button
sends the request to the server where I upload the files!

Could somebody tell me the difference between firing the click event
programatically and pressing on the "Browse" button please? Could you
also let me know how to solve it please?

This is my code.

<HTML>
<HEAD>
<script language="javascript">
function anotherFile(lnk) {
if (document.createElement &&
lnk.insertBefore &&
lnk.parentNode) {

var finp = document.createElement('input');
var brk = document.createElement('br');

if (finp && brk) {
finp.type = 'file';
finp.name = 'userfile' + (new Date()).getTime() + Math.floor(100
* Math.random());

finp.onpropertychange = function () {
onFileSelected(this, brk);
return false;
}

finp.style.visibility="hidden";

lnk.parentNode.insertBefore(finp, lnk);
lnk.parentNode.insertBefore(brk, lnk);

finp.click();
}
}
return false;
}

function onRemove(aLink, aFile, aBr, aS){

aLink.removeNode(true);
aFile.removeNode(true);
aBr.removeNode(true);
aS.removeNode(true);

return false;
}

function onFileSelected(finp, brk) {
if (document.createElement &&
finp.insertBefore &&
finp.parentNode) {

var a = document.createElement("a");
var s = document.createElement("span");

if (s && a) {

a.href = "#";

a.onclick = function () {
onRemove(this, finp, brk, s);
return false;
}

var t = document.createTextNode("[Remove]");
if (t) {
a.appendChild(t);
}

var t2 = document.createTextNode(finp.value + " ");
if (t2) {
s.appendChild(t2);
}

finp.parentNode.insertBefore(s, finp);
finp.parentNode.insertBefore(a, finp);
}
}

return false;
}

</script>
</HEAD>
<body>
<form id="Form1" method="post" encType="multipart/form-data"
runat="server">
<table>
<tr>
<td><A id="link2" style="Z-INDEX: 109; WIDTH: 240px; HEIGHT:25px; BACKGROUND-COLOR: white" href="#" onclick="return
anotherFile(this);">Another Attachment</A>
</td>
</tr>
<tr>
<td><input class="button" type="submit" name="upload" value="Upload ">
</td>
</tr>
</table>
</form>
</body>
</HTML>

Thank you very much in advance

Jonatan


Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Todd | last post by:
I am looking for ideas on how I could create something to change a file's name each time the link is selected, from a web page. The format I am looking for is: 040700001 Where 04 is the...
1
by: lawrence | last post by:
This PHP function prints out a bunch of Javascript (as you can see). This is all part of the open source weblog software of PDS (www.publicdomainsoftware.org). We had this javascript stuff...
15
by: lawrence | last post by:
Is this the correct way to test for a method before I use it? createRange() is, I believe, an IE only method. function wrapSelectionInTag(selection, tag) { if (document.selection.createRange)...
29
by: wayne | last post by:
Hey there... I'm having some problems passing url parameters with an open.window command. I'm not terribly familiar with java script but here is the code below. When executed it opens the...
1
by: Alisha | last post by:
I'm trying to open the Common Dialog box to allow the user to navigate to a folder and select a file. The users are accessing the application on a single Citrix server, so the enviroment is the...
1
by: Jason Huang | last post by:
Hi, Would someone tell me how to open a CrystalReport in my ASP.Net C#? We can use the Show method to open a windows form, but what method should we use for opening a CrystalReport? Thanks for...
4
by: MC D | last post by:
What's the best way to have a modal dialog that will only allow the selection of a FOLDER, rather than a file? Is there a property of the openFileDialog I'm missing, or is there another control...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.