Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #41 (permalink)  
Old April 25th, 2007, 11:13 PM
Registered User
 
Join Date: Apr 2007
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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">
   &nbsp;
   <input type=button value="Browse">
    &nbsp;
    <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 With Quote
  #42 (permalink)  
Old December 27th, 2007, 03:27 AM
Registered User
 
Join Date: Dec 2007
Location: pune, maharashtra, India.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to aniruddhap Send a message via Yahoo to aniruddhap
Default

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 With Quote
  #43 (permalink)  
Old December 29th, 2007, 04:29 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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 With Quote
  #44 (permalink)  
Old January 2nd, 2008, 01:27 AM
Registered User
 
Join Date: Dec 2007
Location: pune, maharashtra, India.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to aniruddhap Send a message via Yahoo to aniruddhap
Default

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 With Quote
  #45 (permalink)  
Old January 2nd, 2008, 03:29 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Change Caption HtmlInputFile Israr ASP.NET 1.0 and 1.1 Professional 4 November 8th, 2006 02:32 AM
HtmlInputFile g_vamsi_krish ASP.NET 1.0 and 1.1 Basics 2 July 25th, 2006 06:40 AM



All times are GMT -4. The time now is 02:53 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.