Question

The idea of the code was to make a separate text box and button so i can create class for each one and make them work like fileupload.

But the javascript runs twice and the fileupload value gets erased.

<style type="text/css">
div.fileinputs
{
    position: relative;
}

div.fakefile
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

input.file
{
   visibility:hidden;
}
</style>
<script type="text/javascript" language="javascript">
    function uploadFileChange() {
            alert("start");
            document.getElementById('FileName').value = document.getElementById("FileUpload1").value;
            alert("end");
    }
</script>
<div class="fileinputs" style="width: 50%;">
    <!-- Upload file invisivel-->
    <asp:FileUpload ID="FileUpload1" ClientIDMode="Static" class="file" runat="server" 
         onpropertychange="uploadFileChange();"  />
    <!-- button e textbox falsas para poder dar syles ao button-->
    <div class="fakefile">
        <asp:TextBox ID="FileName" CssClass="textbox" ClientIDMode="Static" runat="server" Width="31%" ></asp:TextBox>
        <asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..."
            ForeColor="White" onClick="document.getElementeByID('FileUpload1').click()" />
    </div>
</div>

Whats wrong???
Thanks in advance

Answer 1

little correction to your code,

<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..."             ForeColor="White" onClientClick="document.getElementeByID('FileUpload1').click();return false;" />

writing return false to clickevent will not post back, the reason why you are losing fileuplaod value is because the page is getting post backed.

or else you could try this,

<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..." ForeColor="White" onClientClick="CallClick();return false;" />

function CallClick(){
document.getElementeByID('FileUpload1').click();
return false;
}