Click to See Complete Forum and Search --> : Changing the FILE UPLOAD "Browse" button?


quantass
February 6th, 2005, 11:44 AM
We want to allow the user to upload their files to our website. We've tried adding in the ability to drag-drop their desktop items onto the webpage using the following Javascript code:

ondragenter="cancelEvent()" ondragover="cancelEvent()" ondrop="Dropped()"

but cant seem to retrieve the actual file path from the dropped icon. Unfortunate. Now I'm directly focusing on the <input type="file"> object. I remember this thing back when HTML was on version 1 and it still looks and acts the same, unless I'm mistaken. It has this awful looking Browse button which I would like to visually change.

How can i modify the appearance of this Browse button to my own custom button/image? Or is there an alternative approach to opening the File Dialog, as the Browse button does, and then returning the data into the text box? I've looked into ActiveXObject("UserAccounts.CommonDialog") but have received ActiveX security warnings which I'm trying to avoid in case the user has kicked up their Internet security settings to HIGH.

Perhaps the ActiveXObject("Microsoft.XMLHTTP") could be of use to me?

Thanks for any tips. I only need to support IE 5.5 and higher on Windows. I'm currently scripting in Javascript.

quantass
February 6th, 2005, 01:04 PM
Ok a solution i found adequate:

<form name="form1">
<input name="browse" type="file" style="display: none;">
<input name="file" type="text">
<input name="Submit" type="submit" class="button" value="Browse" onClick="document.form1.browse.click(); document.form1.file.value=document.form1.browse.value; return false;">
<input name="upload" type="submit" class="button" value="Upload" onclick="document.form1.browse.disabled=true;">
</form>

quantass
February 6th, 2005, 02:03 PM
Unfortunately the solution I found only does pop up the file dialog but when it comes to uploading it falls flat. How do i get it to upload successfully?

Dia
February 7th, 2005, 04:03 AM
Why two buttons with type 'submit'? and why return false from the onclick() of first submit button? Simply designate the first one to be a button (not submit one) and rest of the functionality should work as is....

quantass
February 9th, 2005, 05:11 AM
You;re right about the syntax of the code but that has nothing to do with why i cant post the file. I strongly feel this may be IE blocking me as this may be a security risk of some sort.