HTMLInputFile control

gp_mk · November 10th, 2003, 12:39 PM

Unfortunately, that didn't help either. It's fine for "all client side" code, but as soon as I add "runat=server" to the file browse control it no longer works.

I can't beleive there isn't a file browse control that is compatable with server-side code.

Does anyone know how to get round this problem, or if there are any server-side file browse controls available?

gp_mk · November 10th, 2003, 12:57 PM

...and of course I need to change the appearance of the button or use an image button. The basic HTMLInputFile control works fine if you don't want to change the way it looks.

vknowles · November 10th, 2003, 11:20 PM

Hi again. I cannot understand why adding "runat=server" should prevent the control from working. It should show up in your codebehind as an HtmlInputFile control. But it shouldn't affect the client-side functionality. I have used this control in ASP.NET myself.

Maybe you could post the current version of your scripts, HTML, and even the declarations in your code-behind...

-Van
(Old dog learning new tricks...)

gp_mk · November 11th, 2003, 07:41 AM

I've played about with this and no longer get the "runat=server" problem. However it does not solve my original problem which was do do with generating a postback so that I can deal with the file selected on the server.

If you remember from my earlier posting (html & code below) I found that when I called Form1.inpImageFile.click() no postback occurred, although it does work if you click the HTMLInputFile (inpImageFile)control directly.

I have tried modifying this slightly, so instead of Form1.inpImageFile.click() I am using document.getElementById('inpImageFile').click(), and this does attempt to generate a postback. Unfortunatly I now get an error in the .NET generated script __doPostBack() - the last line "theform.submit()" gives the following error - "htmlfile: Access is denied"

If anyone knows what is going wrong please let me know. original HTML & code below:-

Page.RegisterClientScriptBlock("FileSelected", "<script Language=javascript>function FileSelected(){" + Page.GetPostBackEventReference(this.inpImageFile) + "}</script>");

...and the relevant parts of the HTML page are:-

<script language="javascript">
function inpImageFile_OnPropertyChanged()
{
FileSelected();
}

function btnBrowseFile_Click()
{
Form1.inpImageFile.click();
}
</script>

<input id="inpImageFile" title="xxx" style="Z-INDEX: 106; LEFT: 160px; WIDTH: 87px; POSITION: absolute; TOP: 62px; HEIGHT: 24px"
onpropertychange="inpImageFile_OnPropertyChanged() " tabIndex="1" type="file" size="1" name="filepath" runat=server>

<input id="btnBrowseFile" title="Browse For File" style="Z-INDEX: 138; LEFT: 248px; WIDTH: 24px; POSITION: absolute; TOP: 61px; HEIGHT: 26px" type="button" value="..." onclick="btnBrowseFile_Click()" runat="server">

vknowles · November 11th, 2003, 10:51 PM

Okay, as I read your code, what happens is your user clicks on the browse button (whatever it says) and that fires the script that simulates a click on the file control (which doesn't appear to be hidden any more in your example).

Then, after the user selects a file, that fires the propertychanged event and that fires the script that fires another script that fires the _dopostback() script passing a reference to the file control.

And the _dopostback() script doesn't like this. I'm not exactly sure why, but I think you're running into the same problem you had before.

One thing I forgot, but it's in the Visual Studio .NET help facility: The INPUT type="file" element has a few requirements. The one that appears to apply here is:

The FORM tag must specify ENCTYPE="multipart/form-data"

If that doesn't work, I think you need to look at:

http://www.experts-exchange.com/Web/..._20396596.html

although I think [u]their</u> problem might be due to not using the proper ENCTYPE attribute, they might be correct that IE has some sort of security feature.

I hope this is some help.

-Van
(Old dog learning new tricks...)

Imar · November 12th, 2003, 03:52 AM

When you add a file control with a runat="server" attribute in VS.NET, you'll automatically get the correct enctype in the form.

That is, this code:

Code:

<html>
  <head>
    <title>TestUpload</title>
    <script language="JavaScript" type="text/javascript">
    function HandleFileButtonClick()
    {
        document.Form1.txtFile.click();
        document.Form1.txtFakeText.value = document.Form1.txtFile.value;
    }
    </script>
</head>
  <body>
    <form id="Form1" method="post" runat="server">
    <input type="file" id="txtFile" runat="server" style="display:none;">

    <input type="text" name="txtFakeText" readonly="readonly" />

    <input type="button" value="Browse" onclick="HandleFileButtonClick();" />
    <asp:Button id="btnSubmit" runat="server" Text="Upload" />
  </form>
</body>
</html>

will end up like this in the browser:

Code:

<form name="Form1" method="post" 
  action="TestUpload.aspx" id="Form1" 
  enctype="multipart/form-data">

which looks fine by me.

The weird thing is, I can't see the difference between a form that works, and a form that doesn't. In the end, the input type="file" should be the same, whether you have added an old skool HTML control directly, or added a file control with the runat attribute.

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

gp_mk · November 12th, 2003, 06:54 AM

I'm beginning to think this IS a security measure of IE, to prevent malicious code from uploading files the user isn't aware of uploading. It certainly makes sense that a file should only be uploaded if the user clicks on the browse button. If this is the case it seems very silly that the HTMLInputFile control does not allow the text / style to be changed. I'm now stuck with a button that looks completely different to everything else in my application.

I'm very surprised no-one else has encountered this problem before though.

Imar · November 12th, 2003, 09:38 AM

Well, yeah, it partly seems so. However, the problem arises when you use a server side upload control. My first answer to the original question was this:

Code:

<html>
<head>
    <title>File Upload Example</title>
    <script language="JavaScript" type="text/javascript">
    function HandleFileButtonClick()
    {
        document.frmUpload.myFile.click();
        document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
    }
    </script>
</head>
<body>
  <form name="frmUpload">

    <input type="file" name="myFile" style="display: none">

    <input type="text" name="txtFakeText" readonly="true">

    <input type="button" onclick="HandleFileButtonClick();" value="Upload File" style="background: red;">
  </form>
</body>
</html>

As you can see, the JavaScript calls the click of the upload button. So, IE is not really preventing access to the dialog, as long as it is the user who selects a file (that is, you can't set the value property of the upload control directly).

That's what's making it so weird. The code above works fine while a file upload with a runat="server" attribute should generate more or less the same code.....

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

vknowles · November 12th, 2003, 10:23 PM

I'm very surprised no-one else has encountered this problem before though.

Actually, it has come up several times on experts exchange (the web reference I have given you. Always with the same result.

They were not using ASP.NET, but in fact the "runat=server" property is not rendered. If you look at the page source, you should see only standard HTML. So that's not it.

Good luck.

-Van
(Old dog learning new tricks...)

alleswirdgut · August 5th, 2004, 11:49 AM

Hi,

I recently encountered the same problems.
To hide the FileInput control and fire a 'click()' turned out not to be very useful, as the target php-script didn't receive any files.

But you should try the following:
Make your own button design part of a background-image of your form and place your FileInput control over that image.
With the MS-css "filter: progid:DXImageTransform.Microsoft.Alpha(Opacity='0 ')"-attribute you set the control's opacity to 0 and make it invisible, but still clickable (use height and width attributes of the control to match the size of your image).

Hope this helps,
Falko