why file upload cannot work?

Discussion in 'Javascript' started by GuangXiN, Jun 11, 2008.

  1. GuangXiN

    GuangXiN Guest

    I want the file upload element disappear, instead of it, I place a text
    box and a button with my own css defination.
    but it doesn't work on IE7. What should I do now?
    <form action="upload.php" method="POST" enctype="multipart/form-data">
    <p>
    <span>Select photo:</span>
    <input type="file" name="photo" style="display:none;">
    <input type="text" name="photoUrl" class="s1" />
    <input type="button" class="s2"
    onClick="photo.disabled=false;photo.click();photoUrl.value=photo.value;photo.disabled=true"
    value="Browse" />
    </p>
    </form>
     
    GuangXiN, Jun 11, 2008
    #1
    1. Advertising

  2. GuangXiN

    Guest

    On Jun 10, 11:31 pm, GuangXiN <> wrote:
    > I want the file upload element disappear, instead of it, I place a text
    > box and a button with my own css defination.
    > but it doesn't work on IE7. What should I do now?
    > <form action="upload.php" method="POST" enctype="multipart/form-data">
    > <p>
    > <span>Select photo:</span>
    > <input type="file" name="photo" style="display:none;">
    > <input type="text" name="photoUrl" class="s1" />
    > <input type="button" class="s2"
    > onClick="photo.disabled=false;photo.click();photoUrl.value=photo.value;photo.disabled=true"
    > value="Browse" />
    > </p>
    > </form>


    turn the button into a anchor you can style that any way you want.
     
    , Jun 11, 2008
    #2
    1. Advertising

  3. GuangXiN

    GuangXiN Guest

    wrote:
    > On Jun 10, 11:31 pm, GuangXiN <> wrote:
    >> I want the file upload element disappear, instead of it, I place a text
    >> box and a button with my own css defination.
    >> but it doesn't work on IE7. What should I do now?
    >> <form action="upload.php" method="POST" enctype="multipart/form-data">
    >> <p>
    >> <span>Select photo:</span>
    >> <input type="file" name="photo" style="display:none;">
    >> <input type="text" name="photoUrl" class="s1" />
    >> <input type="button" class="s2"
    >> onClick="photo.disabled=false;photo.click();photoUrl.value=photo.value;photo.disabled=true"
    >> value="Browse" />
    >> </p>
    >> </form>

    >
    > turn the button into a anchor you can style that any way you want.


    Sorry, what I mean is the file upload element doesn't work.
    the file upload element's style cannot be set, so I make it unvisiable,
    but so it can't send a correct file upload request to web server.
     
    GuangXiN, Jun 11, 2008
    #3
  4. GuangXiN

    Evertjan. Guest

    GuangXiN wrote on 11 jun 2008 in comp.lang.javascript:

    > wrote:
    >> On Jun 10, 11:31 pm, GuangXiN <> wrote:
    >>> I want the file upload element disappear, instead of it, I place a
    >>> text box and a button with my own css defination.
    >>> but it doesn't work on IE7. What should I do now?
    >>> <form action="upload.php" method="POST"
    >>> enctype="multipart/form-data">
    >>> <p>
    >>> <span>Select photo:</span>
    >>> <input type="file" name="photo" style="display:none;">
    >>> <input type="text" name="photoUrl" class="s1" />
    >>> <input type="button" class="s2"
    >>> onClick="photo.disabled=false;photo.click();photoUrl.value=photo.valu
    >>> e;photo.disabled=true" value="Browse" />
    >>> </p>
    >>> </form>

    >>
    >> turn the button into a anchor you can style that any way you want.

    >
    > Sorry, what I mean is the file upload element doesn't work.
    > the file upload element's style cannot be set, so I make it
    > unvisiable, but so it can't send a correct file upload request to web
    > server.


    "Doesn't work" is not an acceptable fraze in this NG, unless you explain
    what and how, what debugging tou did, and if and what errorstring and
    linenumbers you encountered.

    As a security measure, you cannot manipulate the input file element of html
    upload forms. Otherwise it would be too easy to secretly upload another
    file than the one shown and so compromize the user's private parts.



    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Jun 11, 2008
    #4
  5. GuangXiN

    GuangXiN Guest

    Evertjan. wrote:
    > GuangXiN wrote on 11 jun 2008 in comp.lang.javascript:
    >
    >> wrote:
    >>> On Jun 10, 11:31 pm, GuangXiN <> wrote:
    >>>> I want the file upload element disappear, instead of it, I place a
    >>>> text box and a button with my own css defination.
    >>>> but it doesn't work on IE7. What should I do now?
    >>>> <form action="upload.php" method="POST"
    >>>> enctype="multipart/form-data">
    >>>> <p>
    >>>> <span>Select photo:</span>
    >>>> <input type="file" name="photo" style="display:none;">
    >>>> <input type="text" name="photoUrl" class="s1" />
    >>>> <input type="button" class="s2"
    >>>> onClick="photo.disabled=false;photo.click();photoUrl.value=photo.valu
    >>>> e;photo.disabled=true" value="Browse" />
    >>>> </p>
    >>>> </form>
    >>> turn the button into a anchor you can style that any way you want.

    >> Sorry, what I mean is the file upload element doesn't work.
    >> the file upload element's style cannot be set, so I make it
    >> unvisiable, but so it can't send a correct file upload request to web
    >> server.

    >
    > "Doesn't work" is not an acceptable fraze in this NG, unless you explain
    > what and how, what debugging tou did, and if and what errorstring and
    > linenumbers you encountered.
    >
    > As a security measure, you cannot manipulate the input file element of html
    > upload forms. Otherwise it would be too easy to secretly upload another
    > file than the one shown and so compromize the user's private parts.
    >
    >
    >


    OK, let me explain my words.
    I wrote a file upload component, but I cannot modify its sytle to what I
    want. So I added a textbox and a button with style, and then I make the
    file upload component hidden, I want to use script to simulate the file
    upload's "Browse" click. I am sure that file select dialog popup when I
    click the button. I select a image file, the path and filename did
    display in the textbox. But when I click submit, server side script
    caught no file.
     
    GuangXiN, Jun 11, 2008
    #5
  6. GuangXiN

    Evertjan. Guest

    GuangXiN wrote on 11 jun 2008 in comp.lang.javascript:

    >> As a security measure, you cannot manipulate the input file element
    >> of html upload forms. Otherwise it would be too easy to secretly
    >> upload another file than the one shown and so compromize the user's
    >> private parts.
    >>

    > OK, let me explain my words.
    > I wrote a file upload component, but I cannot modify its sytle to what
    > I want. So I added a textbox and a button with style, and then I make
    > the file upload component hidden, I want to use script to simulate the
    > file upload's "Browse" click. I am sure that file select dialog popup
    > when I click the button. I select a image file, the path and filename
    > did display in the textbox.


    As I said, security could be compromized by that.
    The browser does not contemplate your possible good intentions.

    > But when I click submit, server side script caught no file.


    Do serverside scripts catch files? Fire perhaps?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Jun 11, 2008
    #6
  7. GuangXiN

    SkyZhao Guest

    On Jun 11, 11:31 am, GuangXiN <> wrote:
    > I want the file upload element disappear, instead of it, I place a text
    > box and a button with my own css defination.
    > but it doesn't work on IE7. What should I do now?
    > <form action="upload.php" method="POST" enctype="multipart/form-data">
    >    <p>
    >      <span>Select photo:</span>
    >      <input type="file" name="photo" style="display:none;">
    >      <input type="text" name="photoUrl" class="s1" />
    >      <input type="button" class="s2"
    > onClick="photo.disabled=false;photo.click();photoUrl.value=photo.value;phot­o.disabled=true"
    > value="Browse" />
    >    </p>
    > </form>


    don't use "disabled",only use "display:none";
     
    SkyZhao, Jun 11, 2008
    #7
  8. GuangXiN

    GuangXiN Guest

    Evertjan. wrote:
    > GuangXiN wrote on 11 jun 2008 in comp.lang.javascript:
    >
    >>> As a security measure, you cannot manipulate the input file element
    >>> of html upload forms. Otherwise it would be too easy to secretly
    >>> upload another file than the one shown and so compromize the user's
    >>> private parts.
    >>>

    >> OK, let me explain my words.
    >> I wrote a file upload component, but I cannot modify its sytle to what
    >> I want. So I added a textbox and a button with style, and then I make
    >> the file upload component hidden, I want to use script to simulate the
    >> file upload's "Browse" click. I am sure that file select dialog popup
    >> when I click the button. I select a image file, the path and filename
    >> did display in the textbox.

    >
    > As I said, security could be compromized by that.
    > The browser does not contemplate your possible good intentions.

    Is there any other way to implement what I need? I just need a file
    upload component with customs style in css file.

    >> But when I click submit, server side script caught no file.

    >
    > Do serverside scripts catch files? Fire perhaps?
    >

    PHP has an $_FILES arra. When submit with a file, it will be not null.
    I tried to make the file upload component appear and I click the
    following button (NOT the Browse button in fileupload component). I can
    choose a file and the file upload component show its path correctly.
    I click submit and PHP shows that $_FILES is still null.
     
    GuangXiN, Jun 11, 2008
    #8
  9. GuangXiN wrote:
    > Evertjan. wrote:
    >> GuangXiN wrote on 11 jun 2008 in comp.lang.javascript:
    >>>> As a security measure, you cannot manipulate the input file element
    >>>> of html upload forms. Otherwise it would be too easy to secretly
    >>>> upload another file than the one shown and so compromize the user's
    >>>> private parts.
    >>>
    >>> OK, let me explain my words.
    >>> I wrote a file upload component, but I cannot modify its sytle to what
    >>> I want. So I added a textbox and a button with style, and then I make
    >>> the file upload component hidden, I want to use script to simulate the
    >>> file upload's "Browse" click. I am sure that file select dialog popup
    >>> when I click the button. I select a image file, the path and filename
    >>> did display in the textbox.

    >> As I said, security could be compromized by that.
    >> The browser does not contemplate your possible good intentions.

    > Is there any other way to implement what I need? I just need a file
    > upload component with customs style in css file.


    This is rather a question for comp.infosystems.www.authoring.stylesheets.
    But I am pretty sure you will have to live with the fact that a custom style
    cannot be applied to this control in all user agents, and I can't think of a
    *viable* alternative.

    > PHP has an $_FILES arra. When submit with a file, it will be not null.
    > I tried to make the file upload component appear and I click the
    > following button (NOT the Browse button in fileupload component). I can
    > choose a file and the file upload component show its path correctly.
    > I click submit and PHP shows that $_FILES is still null.


    Of course. By disabling the file input control you have only caused only
    the encoded file path to be submitted per `photoUrl'. A file input control
    in a form causes the encoded content of the selected file to be submitted
    instead. And if it was possible to set the value of that control with
    scripting, any Web site you visit could upload any file from your computed
    without your knowing it; you do not want that to happen. (Using
    display:none as suggested will not change that.)


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Jun 12, 2008
    #9
  10. Dan Rumney wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> Of course. By disabling the file input control you have only caused only
    >> the encoded file path to be submitted per `photoUrl'. A file input control
    >> in a form causes the encoded content of the selected file to be submitted
    >> instead. And if it was possible to set the value of that control with
    >> scripting, any Web site you visit could upload any file from your computed
    >> without your knowing it; you do not want that to happen. (Using
    >> display:none as suggested will not change that.)

    >
    > Certainly the risk of being able to set the value of a file input
    > control via a script is clear to those who understand its function.


    I would not be so sure.

    > My interpretation of the OP's request was the following question:
    >
    > Is it possible to write a script that mimic's a user clicking the upload
    > box.


    That is assuming that there is always an upload _button_.

    > Nothing nefarious... just some way of opening the Open... dialog
    > such that the file input control's value will be populated in a
    > legitimate fashion.
    > [...]
    > I thought that the click function would do it, but I think all that does
    > is emulate the user clicking at some random point on the control and not
    > specifically on the Upload button.
    >
    > Any thoughts?


    ISTM the proprietary click() method is available for input[type="file"]
    controls but does nothing at all (in Firefox 2.0.0.14/Gecko 1.8.1.14), not
    even emulating a random click anywhere within the control's canvas. In
    contrast to clicking directly, the `click' event does not occur for this
    control when click() is called. However error-prone, it does occur then for
    other types of controls.

    This might be another security precaution to prevent an attacker from
    selecting a file programmatically.


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Jun 13, 2008
    #10
  11. Dan Rumney wrote:
    > Thomas 'PointedEars' Lahn wrote:
    > [snip]
    >>> My interpretation of the OP's request was the following question:
    >>>
    >>> Is it possible to write a script that mimic's a user clicking the upload
    >>> box.

    >> That is assuming that there is always an upload _button_.

    >
    > Is your point that a text only browser would have an... [...]


    My point is instead that no Web standard says how a file input control is to
    be rendered; HTML 4.01 only says what it should allow to do. And that is
    good so.

    >>> Nothing nefarious... just some way of opening the Open... dialog
    >>> such that the file input control's value will be populated in a
    >>> legitimate fashion.
    >>> [...]
    >>> I thought that the click function would do it, but I think all that does
    >>> is emulate the user clicking at some random point on the control and not
    >>> specifically on the Upload button.
    >>>
    >>> Any thoughts?

    >> ISTM the proprietary click() method is available for input[type="file"]
    >> controls but does nothing at all (in Firefox 2.0.0.14/Gecko 1.8.1.14), not
    >> even emulating a random click anywhere within the control's canvas. In
    >> contrast to clicking directly, the `click' event does not occur for this
    >> control when click() is called. However error-prone, it does occur then for
    >> other types of controls.

    >
    > And wouldn't you know it, it 'works' in MSIE.


    True.

    > Personally, I think it's a shame that there's no way to do this (See below)
    >
    >> This might be another security precaution to prevent an attacker from
    >> selecting a file programmatically.

    >
    > Granted, but I grow a little tired of 'security precautions'.
    > I'm not laissez-faire about security, but I get frustrated at imposed
    > restrictions because there's some chance that somebody somewhere might
    > be able to do something that needs to be prevented.
    > It's a no-win argument because the security advocates do not need to
    > back up their position. They have the trump card which is "security risk"


    I don't think so. For example, recently Gecko established a customizable
    few-seconds timeout before a download/install dialog can be confirmed
    because otherwise there was the possibility that the user accidentally
    executed malicious software when pressing the return key while typing and a
    script kiddie had the dialog window pop up. IIRC there was a real case that
    prompted this design decision, and I think it is a Good Thing that it was
    implemented. (Making the Cancel button the default instead would have been
    rather counter-intuitive.)

    The same thing could happen with a file upload/select dialog window that
    popped up without user interaction.

    > Slight rant aside, this kind of attack, in my mind, could be more
    > readily protected against by alerting the user whenever a file is to be
    > transferred by the UA. The UA knows that it's about to read a local file
    > (because it's going to have to open a handle to that file) so why not
    > post a warning, instead of hobbling the functionality of form controls?


    Maybe because the probability that a user uses an file upload control on
    purpose (maybe without having scripting enabled) is greater than the
    probability of a script kiddie wanting to click on it without user interaction.


    PointedEars
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, Jun 13, 2008
    #11
    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. =?Utf-8?B?U2FyYXY=?=

    Upload a file without file Upload control - ASP.Net

    =?Utf-8?B?U2FyYXY=?=, Aug 2, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    2,451
    Bruce Barker
    Aug 3, 2005
  2. Andrea Desole
    Replies:
    2
    Views:
    916
    Andrea Desole
    Aug 31, 2005
  3. LisaBigJax
    Replies:
    5
    Views:
    24,498
    tommynzuk
    Oct 23, 2006
  4. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    902
    Mark Rae
    Dec 21, 2006
  5. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,964
    Smokey Grindel
    Dec 2, 2006
Loading...

Share This Page