open file selection from a link

Discussion in 'Javascript' started by Jonatan, Jan 27, 2005.

  1. Jonatan

    Jonatan Guest

    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
     
    Jonatan, Jan 27, 2005
    #1
    1. Advertising

  2. Jonatan

    Sam Guest

    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
     
    Sam, Mar 3, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    891
    Kevin Spencer
    May 17, 2005
  2. Simon Niederberger
    Replies:
    2
    Views:
    16,617
    Christian Kaufhold
    Jan 7, 2005
  3. Andrew Crowe
    Replies:
    1
    Views:
    4,496
    Andrew Crowe
    Sep 13, 2004
  4. curiousity

    HOWTO autopost the selection list upon selection

    curiousity, Nov 21, 2003, in forum: ASP .Net Mobile
    Replies:
    0
    Views:
    279
    curiousity
    Nov 21, 2003
  5. Berlin  Brown

    Selection; open popup or open a new window

    Berlin Brown, Jun 26, 2006, in forum: Javascript
    Replies:
    0
    Views:
    124
    Berlin Brown
    Jun 26, 2006
Loading...

Share This Page