Reputation: 47
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
Upvotes: 3
Views: 6298
Reputation: 6075
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.
Upvotes: 3