asp:FileUpload control not getting file value when using fake input

Question

I try to customize my asp:FileUpload control by using some css trick. When I finally upload the picture, it seems that the asp:FileUpload did not grab the file.

In the aspx page:

<style>
    #file {
        display:none;
    }
</style>

                    <div>
                        <div style="float:left;">
                            <asp:Button ID="btnSelectPicture" runat="server" CssClass="btn2small" Text="Select Picture" OnClientClick="javascript:return false;" />
                        </div>
                        <asp:FileUpload ID="fuPicture" runat="server" />
                        <div id="inputUploadFileName" style="float:left; line-height: 2; margin: 0 15px;">No picture selected</div>
                        <div style="float:left;">
                            <asp:Button ID="btnUploadPicture" runat="server" Text="Upload" CssClass="btn2small" OnClick="btnUploadPicture_Click" ValidationGroup="vgUploadp"/>
                        </div>
                        <div id="errorFormatPicture" class="errorMessage" style="float:left; line-height:2; margin-left: 15px;"></div>
                    </div>        

<script>
    var wrapper = $('#<%=fuPicture.ClientID%>').css({ height: 0, width: 0, 'overflow': 'hidden' });
    var fileInput = $('#<%=fuPicture.ClientID%>').wrap(wrapper);

    fileInput.change(function () {
        $this = $(this);
        var fileName = $this.val();
        fileName = fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length);
        if (fileName.length == 0)
            fileName = "No picture selected";
        else {
            extension = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
            if (extension != "jpg" && extension != "png")
                $("#errorFormatPicture").text(" * png or jpg only");
            else {
                $("#errorFormatPicture").text("");
                $('#inputUploadFileName').text(fileName);
            }
        }
    })

    $('#<%=btnSelectPicture.ClientID%>').click(function () {
        fileInput.click();
        return false;
    }).show();
</script>

Then in the aspx.cs page:

protected void btnUploadPicture_Click(object sender, EventArgs e)
{
    Response.Write("has file? " + fuPicture.HasFile + "<BR>");


    if (fuPicture.HasFile)
    {
        try
        {
            if (fuPicture.PostedFile.ContentType == "image/jpeg" || fuPicture.PostedFile.ContentType == "image/png")
            {
                if (fuPicture.PostedFile.ContentLength < 500000)
                {
                    string fileDirectory = string.Format("/images/upload/ServiceRequest/{0}/temp_request/", UserId);
                    System.IO.Directory.CreateDirectory(fileDirectory);
                    string fileName = Path.GetFileName(fuPicture.FileName);
                    string _fullFile = fileDirectory + fileName;

                    fuPicture.SaveAs(_fullFile);
                    lbErrorUploadPicture.Text = "uploaded";

                    //Loadthumbnail();
                }
                else
                    lbErrorUploadPicture.Text = "Pictures must be less than 500 kb";
            }
            else
                lbErrorUploadPicture.Text = "Pictures must be jpeg or png format";
        }
        catch (Exception ex)
        {
            lbErrorUploadPicture.Text = "Unexpected error: Pictures could not be uploaded. ";
        }
    }
}

The FileUpload never has a file in it. Where should I change it? Thank you all.

Answer 1

Nothing jumps out to me immediately. I'd suggest:

First, comment out your JavaScript. Does the FileUpload control work when you are not modifying the underlying HTML markup first? If so, take a closer look at these 2 lines in your JavaScript:

var wrapper = $('#<%=fuPicture.ClientID%>').css({ height: 0, width: 0, 'overflow': 'hidden' });
var fileInput = $('#<%=fuPicture.ClientID%>').wrap(wrapper);

Perhaps the culprit lies in trying to hide that value in the markup.