Remain path of FileUpload control after postback....

Question

I have a FileUpload control and a DropDownlist control in an UpdatePanel and when user select a file for the FileUpload control (no upload yet), in the meanwhile the user select an option from the DropDownList control which will cause a postback! Once the page postback, the path selected in the FileUpload control will gone. How can i remain the path in the FileUpload control? File uploading function was working. I hope can remain the path in the FileUpload control during postback.

I have tried the solution below but the "FileUpload1.HasFile" will return false to me.

            If Session("FileUpload1") Is Nothing AndAlso Upload.HasFile Then
                Session("FileUpload1") = Upload
                lblPhotoUploadErr.Text = Upload.FileName
            ElseIf Session("FileUpload1") IsNot Nothing AndAlso (Not Upload.HasFile) Then
                Upload = DirectCast(Session("FileUpload1"), FileUpload)
                lblPhotoUploadErr.Text = Upload.FileName
            ElseIf Upload.HasFile Then
                Session("FileUpload1") = Upload
                lblPhotoUploadErr.Text = Upload.FileName
            End If

but the "Upload.HasFile" in the uploading function below will true when it was executed.

Public Sub uploadPhoto()
    Dim FileOK As Boolean = False
    Dim FileSaved As Boolean = False
    Dim CandidateCode As String = Nothing
    Dim newFileName As String = Nothing

    Dim extension As String = Nothing
    Dim fileNameWithoutExt As String = Nothing

    If txtCandidateCode.Text.Trim <> "" Then
        CandidateCode = txtCandidateCode.Text.Trim
    End If

    If Upload.HasFile Then
        Dim FileExtension As String = Path.GetExtension(Upload.FileName).ToLower
        Dim allowedExtensions() As String = {".png", ".jpeg", ".jpg", ".gif"}

        Dim i As Integer = 0
        Do While (i < allowedExtensions.Length)
            If (FileExtension = allowedExtensions(i)) Then
                FileOK = True
            End If
            i = (i + 1)
        Loop
    End If

    If FileOK Then
        Try
            fileNameWithoutExt = Path.GetFileNameWithoutExtension(Upload.FileName)
            extension = Path.GetExtension(Upload.FileName)
            newFileName = fileNameWithoutExt + "_" + CandidateCode + extension

            Upload.PostedFile.SaveAs((path1 + newFileName))
            FileSaved = True
        Catch ex As Exception
            lblPhotoUploadErr.Text = ("File could not be uploaded." + ex.Message.ToString)
            FileSaved = False
        End Try
    Else
        lblPhotoUploadErr.Text = "Cannot accept files of this type."
    End If

    If FileSaved Then
        pnlUpload.Visible = False
        imgPhoto.ImageUrl = ("~/images/" + newFileName)
        hfPhotoUploadPath.Value = ("~/images/" + newFileName)

        hfFileExtension.Value = extension
        hfPhotoUploadFileName.Value = fileNameWithoutExt
    End If
End Sub

Answer 1

Does the dropDown need to postback? I think the fileupload doesn't work inside updatePanels for security reasons. See here:

http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx

Answer 2

Why not disable the dropdown when the user submits the form.

• Something like...

  OnClientClick="$('dropdown').attr('disabled',true);return true;"

on the button?

Answer 3

The FileUpload will only keep it's value if you take it out of the UpdatePanel. That way you can still do everything with the DropDownList and its AutoPostBack but the ajax-postback won't refresh the FileUpload causing it to become empty. This way you'll also won't need the postbacktriggers any more.

Put the UpdatePanel only around the DropDownList and any controls the postback has to change. If these controls are not next to each other you can use multiple UpdatePanels, the AutoPostBack will refresh all of them (default behavior, you can even change that).

Answer 4

Set the UpdatePanel mode to conditional, and place another UpdatePanel wrapping the Dropdown. This way the dropdown will not post the file.

If you want to make an async file upload, you will not be able to, but you can fake it.

Have a look on this project, it changes the form's target, so nothing on your page will change, it will post to an iframe.

Answer 5

i think i found a solution:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Session["FileUpload1"] = null;
    }
    else
    {
        if (FileUpload1.HasFile)
        {
            Session["FileUpload1"] = FileUpload1;
            TextBox1.Text = FileUpload1.FileName;
        }
        else if (Session["FileUpload1"] != null)
        {
            FileUpload1 = (FileUpload)Session["FileUpload1"];
            TextBox1.Text = FileUpload1.FileName;
        }
    }
}

 

<span class="spanFu">
    <asp:TextBox ID="TextBox1" Text="Select a file..." runat="server" CssClass="txt" ReadOnly="true" />
    <asp:FileUpload ID="FileUpload1" runat="server" onchange="File_OnChange(this)" CssClass="fu" />
</span>

<script>
function File_OnChange(sender) {
    val = sender.value.split('\\');
    document.getElementById('<%= TextBox1.ClientID %>').value = val[val.length - 1];
}
</script>

<style>
.spanFu .txt { width: 200px; height: 20px; }
.spanFu { position: relative; overflow: hidden; vertical-align: top; }
.fu { z-index: 1; width: 200px; height: 24px; position: absolute; top: 0px;
    left: 0px; filter: alpha(opacity=0); opacity: .0; }
</style>

Answer 6

Hello WeeShian from Malaysia :)

As suggested by others, put your fileupload control outside the Updatepanel so that the asynchronous postback caused by the dropdownlist won't affect the FileUpload control. Example (simplified):

<asp:FileUpload runat="server" />

<asp:UpdatePanel runat="server">
    <asp:dropdownlist runat="server" autopostback="true" />
</asp:UpdatePanel>

<asp:button runat="server" text="Submit" />

Additional note: it seems like you are storing the FileUpload control in your session. It's not really a good idea and could bring you some problem, e.g. when your users open the same page using multiple browser tabs/windows. And, I think what you might want to do is to save the filename/filebyte/other attributes of the fileupload control, instead of storing the whole control into session which will eat more of your server resources.