ajax control toolkit fileupload

Question

I am trying to get the fileupload control from the ajax control toolkit to work.

I need to use the uploaded files in my code behind (I use asp.net), This includes unzipping, resizing and putting some data in a database.

The problem I have is that when I use ajaxUpload1_OnUploadComplete, i can't get the text from a textbox on the same page.

When I use a breakpoint, I noticed that the value of the textbox is just "". I have searched a lot and I really can't find a solution for this, so I hoped that someone here might be able to help.

I have pasted my code below, thanks in advance!

.aspx code:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
    CodeFile="Upload.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:Label ID="LblUploadError" runat="server" Text="Please login first" Visible="false"></asp:Label>
    <asp:Panel ID="PnlUpload" runat="server" Visible="false">

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>

        <span>Album name:</span><br />

        <asp:TextBox ID="txtAlbumNaam" runat="server" ViewStateMode="Disabled"></asp:TextBox><br />

        <span>Private album</span> <asp:CheckBox ID="chkPrivate" runat="server" /><br />

        <span>Upload files (.zip, .jpg, .jpeg or .png)</span><br />

        <asp:AjaxFileUpload id="ajaxUpload1" OnUploadComplete="ajaxUpload1_OnUploadComplete" ThrobberID="MyThrobber" runat="server" AllowedFileTypes="jpg,jpeg,zip,png"  /><br />

       <asp:Label ID="lblError" runat="server"/><br />

    </asp:Panel>
</asp:Content>

code behind:

Imports Ionic.Zip
Imports System.IO
Imports System.Data.OleDb


Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

            If Session("LoggedIn") = True Then
                PnlUpload.Visible = True

            Else
                LblUploadError.Visible = True
            End If

    End Sub

    Protected Sub ajaxUpload1_OnUploadComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AjaxFileUploadEventArgs)
        'indien zip:
        Dim ziperror As Boolean = False
            If System.IO.Path.GetExtension(e.FileName) = ".zip" Then
                ajaxUpload1.SaveAs(Server.MapPath("./TempZips/" & e.FileName.ToString))

                Dim ZipToUnpack As String = Server.MapPath("./TempZips/" & e.FileName.ToString)
                Dim UnpackDirectory As String = Server.MapPath("./TempFotos")

                Using zip1 As ZipFile = ZipFile.Read(ZipToUnpack)

                    Dim file As ZipEntry


                    For Each file In zip1
                        Dim strExtensie As String = System.IO.Path.GetExtension(file.ToString)
                        If Not (strExtensie = ".jpeg" Or strExtensie = ".jpg" Or strExtensie = ".png") Then
                            ziperror = True
                            lblError.Text = "The .zip structure is incorrect, please make sure that you only have compatible pictures inside the zip file."
                        End If
                    Next

                    If ziperror = False Then
                        For Each file In zip1
                            file.Extract(UnpackDirectory, ExtractExistingFileAction.OverwriteSilently)
                        Next
                    End If

                End Using
                'indien foto:
            ElseIf System.IO.Path.GetExtension(e.FileName) = ".jpeg" Or System.IO.Path.GetExtension(e.FileName) = ".jpg" Or System.IO.Path.GetExtension(e.FileName) = ".png" Then

                ajaxUpload1.SaveAs(Server.MapPath("./TempFotos/" & e.FileName.ToString))

            Else
                'indien geen van beide
                lblError.Text = "Invalid filetype on one of the files, please use other files."

            End If

            'tempzips leegmaken
        If ziperror = False Then
            For Each foundFile As String In My.Computer.FileSystem.GetFiles(Server.MapPath("TempZips"))
                File.Delete(foundFile)
            Next

            'verkleinen en album toevoegen aan database:
            Dim strFolderDirectory As String = Server.MapPath("users/" & Session("UserNickName") & "/" & txtAlbumNaam.Text)
            System.IO.Directory.CreateDirectory(strFolderDirectory)

            Dim strDirectory As String = Server.MapPath("TempFotos")
            Dim intAantalFotos As Integer = 0

            For Each foundFile As String In My.Computer.FileSystem.GetFiles(strDirectory)

                Using Afbeelding As System.Drawing.Image = System.Drawing.Image.FromFile(foundFile)

                    Dim resizedimage As System.Drawing.Image
                    Dim resizedwidth As Integer

                    resizedwidth = (300 / Afbeelding.Height) * Afbeelding.Width

                    resizedimage = Afbeelding.GetThumbnailImage(resizedwidth, 300, Nothing, New IntPtr)

                    resizedimage.Save(strFolderDirectory & "/" & Path.GetFileName(foundFile))

                End Using

                intAantalFotos += 1

            Next

            Dim CmdInsert As New OleDbCommand
            Dim Sqlstatement As String = "INSERT INTO tblAlbums (userID, createdDate, pictures, private, albumName) VALUES (@userID, Now(), @pictures, @private, @albumName);"
            CmdInsert.Connection = dbConn.cn
            CmdInsert.CommandText = Sqlstatement

            CmdInsert.Parameters.AddWithValue("userID", CInt(Session("userID")))
            CmdInsert.Parameters.AddWithValue("pictures", intAantalFotos)
            CmdInsert.Parameters.AddWithValue("private", chkPrivate.Checked)
            CmdInsert.Parameters.AddWithValue("albumName", txtAlbumNaam.Text)

            dbConn.cn.Close()
            dbConn.cn.Open()
            CmdInsert.ExecuteNonQuery()
            dbConn.cn.Close()

            'TempFotos leegmaken

            For Each foundFile As String In My.Computer.FileSystem.GetFiles(strDirectory)
                File.Delete(foundFile)
            Next

            'pagina herladen

            LblUploadError.Visible = True
            LblUploadError.Text = "Your pictures have been successfully uploaded!"
        End If

    End Sub

End Class

Answer 1

The problem is that ajax control toolkit file upload control can upload files to server using hidden iFrame (depending on what HTML5 features browser supports). Hidden iFrame references to the same url as you page and that's why you page loaded once more but only to hidden iframe. That's why on server side during handling UploadComplete event you get that the text box has empty value (because it is really have empty value because this is the state of the page which was loaded in iframe).

One of the solution to your problem is performing additional logic (which depends on entered data) after uploading is complete. To do this you can handle client side upload complete event and perform postback (or ajax request) manually.

Other solution can be setting content of the hidden iFrame elements manually before upload will start. In this case you can get hidden iframe, found necessary HTML elements (like text input in your case) and set it value the same as it was entered by user. But this approach can required extending logic of the ajax control toolkit upload control on client side.