|
Subject:
|
HTMLInputFile control
|
|
Posted By:
|
geeta
|
Post Date:
|
10/1/2003 10:33:47 AM
|
Hi,
I am creating a HTMLInputFile control in ASP.Net to upload a file. But I am not able to change the appearance of the browse button using style sheets. Is it possible to change the background color of Browse Button in HTMLInputFile control.
I used the following statement and it changes the appearance of the HTMLInputFile control's text box field but not the Browse button that accompanies it.
<input id="inpFileUp" type=file runat=server style="BORDER-RIGHT: purple 1px solid; BORDER-TOP: purple 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: baseline; BORDER-LEFT: purple 1px solid; COLOR: purple; DIRECTION: ltr; BORDER-BOTTOM: purple 1px solid; FONT-FAMILY: Verdana; LETTER-SPACING: 2pt; BACKGROUND-COLOR: silver; TEXT-ALIGN: center">
Please help.
Thank You.
Geeta
|
|
Reply By:
|
Imar
|
Reply Date:
|
10/1/2003 11:42:01 AM
|
Hi Geeta,
You ran into a little problem in the <input type="file"> control. Indeed you can't change the button; all you can change is the text box. However, you can cheat around it a little bit. Here's what to do:
1. Add an input type="file" to your page
2. Make it hidden by setting its display style-attribute to none
3. Add a text box to your page that will replace the text part of the file control (it's just used as a fake text box)
4. Add a normal button to your page. Set its style to whatever you want, using the style or class attributes.
5. In the onclick of the second button, fire a JavaScript function that fires the onclick of the HTML file control
6. Once the user has chosen a file, copy the contents of the hidden file control to the second and visible text box, so the user knows what file has been selected.
The following code does exactly that:<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">
<!-- Real Input field, but hidden-->
<input type="file" name="myFile" style="display: none">
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly="true">
<!-- Button to invoke the click of the File Input -->
<input type="button" onclick="HandleFileButtonClick();" value="Upload File" style="background: red;">
</form>
</body>
</html>I also added a readonly="true" attribute to the second text box. This is to prevent users from directly changing the contents of the fake file text box. If you allow them to change it directly, your real, and hidden, file text box will get out of synch.
It's quite a bit of work, it's not completely backwards compatible to ancient browsers, but I'm sure it will do the trick in most circumstances.
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
Imar
|
Reply Date:
|
10/1/2003 1:59:20 PM
|
One addition to my previous post: I really believed this example was pretty much cross browser. However, after a bit of testing, it turns out that it only works in Internet Explorer, but not in Netscape, Mozilla, Opera etc.
Not sure why yet, but if I ever figure out the reason, I'll post an update here.
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
geeta
|
Reply Date:
|
10/1/2003 5:28:34 PM
|
Imar,
This solution surely is a good work around for the problem. Thanks for your time and appreciate your help.
Regards,
Geeta
|
|
Reply By:
|
alaywara
|
Reply Date:
|
10/13/2003 12:49:06 AM
|
Using code below + an ASP button on ASP.NET, when the ASP-button clicked, the value of htmlinputfile = blank.
quote:
Originally posted by Imar
Hi Geeta,
You ran into a little problem in the <input type="file"> control. Indeed you can't change the button; all you can change is the text box. However, you can cheat around it a little bit. Here's what to do:
1. Add an input type="file" to your page
2. Make it hidden by setting its display style-attribute to none
3. Add a text box to your page that will replace the text part of the file control (it's just used as a fake text box)
4. Add a normal button to your page. Set its style to whatever you want, using the style or class attributes.
5. In the onclick of the second button, fire a JavaScript function that fires the onclick of the HTML file control
6. Once the user has chosen a file, copy the contents of the hidden file control to the second and visible text box, so the user knows what file has been selected.
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/4/2003 5:34:13 AM
|
I am also having problems with the suggested solution. When I click on the "normal" button, the file browse dialog does indeed appear. However, when I select a file it does not get returned, i.e. document.frmUpload.myFile.value is blank! It works fine if I click on the original browse button of the HTMLInputFile control.
What am I doing wrong? I am using v1.1 of the .NET framework and IE6
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/4/2003 6:00:14 AM
|
I think the problem may be due to the fact that I am using "runat=server" with the HTMLInputFile control, but I need to do this for a reason. Any help would be much appreciated
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/4/2003 7:42:17 AM
|
Yeah, you do indeed need the runat="server" attribute, or your ASP.NET app won't be able to see the control.
What is the ID of the control in the HTML page at run-time? ASP.NET will add a prefix to controls when they're not unique.
You have to make sure that the ID of the hidden control in the HTML page matches that of the one you're trying to fill with the JavaScript.
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/4/2003 10:57:03 AM
|
Thanks for your reply.
I think I know what's causing the problem, but don't have a solution:
The original code I wrote uses the OnPropertyChanged()event of the HTMLInputFile control to respond to the user selecting a file, and this works fine. However, the main code for handling the event is server-side, and that's where the problem is. On the server I register a javascript function using RegisterClientScriptBlock, which I call from the clent-side event handler. This allows me to write code on the server to handle this by trapping the postback event.
The problem is: the RegisterClientScriptBlock line in the server-side code seems to prevent the HTMLInputFile from having it's value set correctly after a file has been selected. If I comment this line out it works fine otherwise the control does not contain a value after file selection, and therefore the OnPropertyChanged()event never gets called. However, due to the nature of my application I need to use server-side code to deal with the event.
Any ideas? I know this scenario is quite complicated, but if you have come across a similar problem before please let me know.
Thanks for your help.
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/4/2003 11:42:40 AM
|
..I forgot to mention: When I use the HTMLInputFile control normally everything works fine. There seems to be an conflict in using RegisterClientScriptBlock with the control AND calling the onclick() event dynamically (to simulate the user clicking on the control)
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/4/2003 12:14:53 PM
|
What code do you register in your RegisterClientScriptBlock method?
Can you post the relevant parts of your HTML page, including the JavaScript?
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/4/2003 12:47:48 PM
|
The RegisterClientScriptBlock code is:-
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">
Many thanks
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/4/2003 3:07:41 PM
|
Hmmm, tricky. It seems that the file box causes a post back, even before its value has been set correctly by the client side JavaScript. Is that correct?
How about you use the onchange handler instead of the onpropertychange handler? Would that work?
Alternatively, how about adding the Page.GetPostBackEventReference call inside the JavaScript method that invokes the file.click() method?
I haven't tried any of these solutions out (can't access a .NET environment at the moment), but it may be worth trying it out.
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/5/2003 4:12:24 AM
|
Thanks for your reply.
I don't get a postback from the file box either before or after the file has been selected.
There is no onchange event - the only event that seems to fire on file selection is onpropertychange.
Could you please explain how I would go about adding the Page.GetPostBackEventReference call inside the JavaScript method? I've only ever called it from server side code.
Cheers
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/5/2003 2:55:10 PM
|
I am not to familiar with Page.GetPostBackEventReference.
What you could do, is see what this methods outputs as JavaScript, and then put that in the JavaScript for the page.
I wish Peter was here. Maybe he has an answer. Peter?? ;-)
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
planoie
|
Reply Date:
|
11/5/2003 3:18:07 PM
|
Investigating.....
Peter
------------------------------------------------------
Work smarter, not harder.
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/5/2003 3:28:30 PM
|
This *is* truly weird. Take a look at this:<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;">
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly="readonly" />
<!-- Button to invoke the click of the File Input -->
<input type="button" value="Browse" onclick="HandleFileButtonClick();" />
<asp:Button id="btnSubmit" runat="server" Text="Upload" />
</form>
</body>
</html>When I run this page, browse for a file, and then click the Upload button, it doesn't even upload (I can't see the page refreshing in the browser's progress bar). I have to click it a second time, and then the Uploaded file is empty. Well, there is a file (PostFile != null) but when I save it, I get a zero bytes file
Very strange. This must be a bug somewhere.
Also investigating.....
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
planoie
|
Reply Date:
|
11/5/2003 3:50:48 PM
|
Woah! I was doing the exact same thing, and got the same result!.... VERY strange.
It's almost like the asp:button is doing a reset, then doing the submit.
Peter
------------------------------------------------------
Work smarter, not harder.
|
|
Reply By:
|
vknowles
|
Reply Date:
|
11/7/2003 12:22:58 AM
|
Look here:
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20398679.html
For some reason, they found it necessary to create an additional form on the page for the Submit button...
-Van
-Van
(Old dog learning new tricks...)
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/7/2003 7:49:28 AM
|
That sounds like the perfect solution, as I need to use an image button anyway. I'll give it a try
Thanks for your help guys
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/10/2003 11:39:31 AM
|
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?
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/10/2003 11:57:55 AM
|
...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.
|
|
Reply By:
|
vknowles
|
Reply Date:
|
11/10/2003 10:20:46 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...)
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/11/2003 6:41:13 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">
|
|
Reply By:
|
vknowles
|
Reply Date:
|
11/11/2003 9:51:17 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/Web_Languages/HTML/Q_20396596.html
although I think their 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...)
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/12/2003 2:52:33 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:<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;">
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly="readonly" />
<!-- Button to invoke the click of the File Input -->
<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:<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.
|
|
Reply By:
|
gp_mk
|
Reply Date:
|
11/12/2003 5:54:41 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.
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/12/2003 8:38:06 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:<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">
<!-- Real Input field, but hidden-->
<input type="file" name="myFile" style="display: none">
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly="true">
<!-- Button to invoke the click of the File Input -->
<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.
|
|
Reply By:
|
vknowles
|
Reply Date:
|
11/12/2003 9:23:49 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...)
|
|
Reply By:
|
alleswirdgut
|
Reply Date:
|
8/5/2004 11:49:10 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
|
|
Reply By:
|
richard.york
|
Reply Date:
|
9/7/2004 1:33:28 AM
|
I didn't look over the full details of this thread, but I recently ran across this link which describes a cross-browser method of styling the "Browse" button. It's an awesome effect that relies on the use of opacity as described in the last post here, but takes it a step further by adding a little javascript. There are a few caveats but overall it looks like a very good hack for the problem.
http://www.quirksmode.org/dom/inputfile.html
All of the major browsers support opacity in some form via CSS. Here is a page that describes the different CSS properties that different browsers use for opacity.
http://www.quirksmode.org/css/opacity.html
He's a little outdated though, Mozilla 1.7 supports the CSS 3 opacity property, whereas previous to that version the proprietary -moz-opacity property is used.
So it can be done in Mozilla, Netscape, Firefox, Safari and IE, users of browsers with no opacity support will see the file input field positioned on top of the customized input field + image.
There are some security ramifications as to why browsers don't allow styling of the file input field. This bug in Mozilla describes some of the security concerns with that:
http://bugzilla.mozilla.org/show_bug.cgi?id=57770
Regards,
Rich
--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
|
|
Reply By:
|
Imar
|
Reply Date:
|
9/7/2004 2:50:56 PM
|
Interesting solution. I'll try this out someday, and see if it has the sam problems as the hidden controls solution (with that solution, no file was actually uploaded).
However, it looks to me this is better, as you still really click the original Browse button, and not a replacement button.
Will check it out...
Thanks,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Endlessly by Muse (Track 12 from the album: Absolution) What's This?
|
|
Reply By:
|
kmi
|
Reply Date:
|
3/4/2005 2:54:54 PM
|
I redefined the sample of Imar in a new webControl, but Im having a trouble with the HtmlInputFile.PostedFile.SaveAs().. 'cause when I fired this event the posted file dissappears, any ideas????
|
|
Reply By:
|
Imar
|
Reply Date:
|
3/5/2005 3:59:23 AM
|
Did you use my first example from the start of the thread? If so, you need to read the entire thread, because the issue you're experiencing is discussed. It seems to be a problem with later (service packs) versions of IE.
Later in the thread a CSS solution is proposed that seems to work....
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
DeBiese
|
Reply Date:
|
10/6/2005 2:03:08 AM
|
Hey, I've read almost the whole thread. But I was wondering.
I only need to adjust the language of the button... Is this possible without using a whole lot of javascript or special css files?
I have to make a web page that is dutch/french. I've noticed that the language of the button depends on the language of the OS you're running.
There is an attribute lang for the <input>-tag, but setting this does not work.
So, is there a way to do this? Or do I really have to make this work with javascript and css styles?
Greetz
|
|
Reply By:
|
Imar
|
Reply Date:
|
10/6/2005 2:50:34 PM
|
Hi DeBiese,
Yeah, I am afraid so. AFAIK, there is no way to set the text for the button to something like Bladeren, so the only way to do is to completely replace the control itself with the CSS solution from this thread.
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
mendeza
|
Reply Date:
|
1/25/2006 10:12:18 PM
|
Here is my solution to the problem:
NOTE: filebutton2.gif dimensions are 88W X 25H.
<style>
.FileButton2
{
filter: alpha(opacity=0);
}
.FileButton
{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
background: url(Images/filebutton2.gif) fixed no-repeat right center;
}
</style>
<script id="clientEventHandlersJS" language="javascript">
<!--
function SetTextBox()
{
var tFile = document.getElementById('txtFile');
var file = document.getElementById('fileUpload');
tFile.value = file.value;
}
function ClearFileName()
{
var tFile = document.getElementById('txtFile');
if (tFile.value == '')
{
var file = document.getElementById('fileUpload');
file.outerHTML = '<input type="file" name="fileUpload" id="fileUpload" class="FileButton2" onchange="return SetTextBox();" style="height:25px;width:66px;" />';
}
}
</script>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 242px">
<tr>
<td nowrap="nowrap" class="FileButton">
<input name="txtFile" type="text" id="txtFile" onchange="return ClearFileName();" style="height:25px;width:408px;" />
<input type="file" name="fileUpload" id="fileUpload" class="FileButton2" onchange="return SetTextBox();" style="height:25px;width:66px;" />
</td>
</tr>
</table>
Hope this helps.
Alex
|
|
Reply By:
|
Israr
|
Reply Date:
|
11/7/2006 11:32:02 PM
|
When i tried the same code it works fine but on server side we have not any file streamed there is null value
Please help me
With regards
Shafi
|
|
Reply By:
|
Israr
|
Reply Date:
|
11/8/2006 1:34:06 AM
|
Hi
i have tried this code but the file does not uploads i.e
txtFile.PostedFile in null
with regards
|
|
Reply By:
|
Israr
|
Reply Date:
|
11/8/2006 3:20:35 AM
|
Really it was good but it does not upload the file on server side there is not any file posted
with Cheers
|
|
Reply By:
|
pgpotvin
|
Reply Date:
|
4/25/2007 11:13:01 PM
|
Styling an <input type="file">
This is an old conversation and I don't know if anyone is still listening, but I believe I have a contribution to make.
I don't do anything server-side, so I have nothing to contribute there. I have tried every javascript/CSS suggestion I've run into, but without success, even the elegant but ultimately unworkable Quirksmode solution [at http://www.quirksmode.org/dom/inputfile.html].
I believe I have a working solution for Firefox 1.5, I see no impediment to its implementation on other browsers and I would be curious to see if it indeed has generality. What's more is that this works for browsing for a file name to do local file read/write, which is what I was really looking to do.
Without going into great detail about why previous ideas did not work, here's what I found works (for Firefox 1.5):
- simulating a click of the "Browse" button didn't work (no surprise) as the .click() method is not implemented (in this and other browsers) for this element, so I opted for a manual click
- underlaying a "fake" file input (and fake Browse button) under a zero-opacity "real" one was difficult (I could never get the alignment just right), until I sized the real one to height 0px or 1px and used right-alignment to reliably overlap the "fake" and "real" Browse buttons just right;
- suggesting a file name is, as you no doubt know, impossible for "real" file inputs and easy for a "fake one", but then manually modifying the suggested name was then impossible because clicking on the visible text-box brought you into the invisible but "real" text-box of higher z-index, until I shortened the "real" text-box width to 1 (<input type=file width=1>)
- if the Browse button is used to select an existing file name, the name goes into the "real" but invisible text-box, so I implemented a setInterval that would look for a change in the value property and transfer the value of the "real" input to that of the "fake" one; the setInterval is triggered by the "real" Browse button click using the onClick event (this is where I'm curious about generality - do other browsers implement an onClick event for file inputs?)
- to then allow manual modification of the file name (in the "fake" filename field), I need to turn off the setInterval transfer hack (otherwise, the contents would be forever restored to what the "real" filename field contains), and this turn-off uses the "fake" text-box's onSelect, onClick and onChange events (all three, just in case)
- I then act on the "fake" filename
Altogether, this works like a charm.
Here's a code snippet to convey the idea:
<style>
div.UnstylableRealInput {position: relative; height: 1px; z-index: 2}
input.UnstylableRealInput {position: relative; -moz-opacity: 0; filter: alpha(opacity: 0); opacity: 0; z-index: 2; font-family: whatever; font-size: whatever}
div.StyledFakeInput {position: absolute; z-index: 1}
input.StyledFakeInput {font-family: whatever; font-size: whatever}
</style>
<div class="containerDiv" align=right>
<div class="StyledFakeInput">
<input type=text width=100 class="StyledFakeInput" onChange="clearInterval(anInterval);" onSelect="clearInterval(anInterval);" onClick="clearInterval(anInterval);" id="FakeInput">
<input type=button value="Browse">
<input type=button value="Go" onClick="doSomethingWithThisFile();">
</div>
<div class="UnstylableRealInput">
<input type=file width=1 class="UnstylableRealInput" onClick="transferInputContent();" id="RealInput">
</div>
</div>
<script language="Javascript">
var anInterval;
function transferInputContent() {
anInterval = setInterval("copyFileName();",100);
}
function copyFileName() {
if (document.getElementById('RealInput').value != document.getElementById('FakeInput').value) {
document.getElementById('FakeInput').value = document.getElementById('RealInput').value;
}
}
function doSomethingWithThisFile() {
clearInterval(anInterval);
read/write or whatever
}
</script>
An image can of course be used instead of the "fake" button.
------------------------
professional tinkerer
amateur expert
at your humble service
|
|
Reply By:
|
aniruddhap
|
Reply Date:
|
12/27/2007 2:27:59 AM
|
i have a problem with my <input type='file'> control.
i'm trying to upload a file using this control. at the same time i'm checking whether the file already exists. if yes, it should replace the file, if no then should upload the as a new file. but the problem is that there are two buttons apart from the upload button: the 'yes' and 'no' buttons. when i click on either of the buttons, a postback is fired and the value of the file control becomes null. in the code i need to get the content length and read it using an object stream. but, since the file.value is null, it gives an error at the object stream code. how do i retain the value in the file control. if there any other way in which i can get these values as we cannot set the value of a file control.
|
|
Reply By:
|
Imar
|
Reply Date:
|
12/29/2007 3:29:45 AM
|
Hi there,
Can you please start a new thread for issues like this?
Anyway, the Yes and No button occur after a postback, right? In that case, the file is no longer there. It's only submitted the first time you select it and then submit the form.
I think the easiest way to do this is to save a temp copy of the file on the server and use that the second time the form submits...
Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
|
|
Reply By:
|
aniruddhap
|
Reply Date:
|
1/2/2008 12:27:14 AM
|
actually the thing is that afer i select upload or click on yes/no, i'm using that path thru the htmlfileinput to convert it into an image datatype of the db i'm storing it in so as to search a word within that file. now, i need that file name to be present in the that field coz i'm using the code "file1.postedfile.inputstream", where file1 is the id of the input. this is where it throws an error as the field has beed cleared at postback. can u give me a solution.
|
|
Reply By:
|
Imar
|
Reply Date:
|
1/2/2008 2:29:17 AM
|
I did give you a solution already: store the file on disk.
As I said, the second time you post the form, the FileInput will be empty. This is by design and there is no way around it other than asking the user to upload it again.
So, store th file on disk, and then read it in again when you need it. You need to change some of your code, but not much, as you can read a file from disk into a Stream as well.
Maybe this is helpful: http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=414
Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
|
