Various issues with uploader inside a form view a inside update panel

  •  01-11-2010, 7:35 PM

    Various issues with uploader inside a form view a inside update panel

    Hi,
     
    After trying both the MS FileUpload and AsyncFileUpload controls and not getting my scenario working I though I'd try this control.  I have got further but there are still issues.
     
    I am using ASP.NET 4.0 Beta 2 webforms (I have repro'ed all the below on ASP.NET 3.5) and IE8 and Firefox 3.7.
     
    1.  In AJAX mode I get an unknown script error in IE.  In Firefox I get a second browse button appearing after I click upload file, when I click that it works.
     
    2.  In Silverlight mode in IE after the first picture has been uploaded subsequent pictures require two clicks of the upload file button in IE.  Works fine in Firefox.
     
    3.  Flash mode is the same as silverlight mode.
     
    I'm a bit disappointed and could do with some help!
     
    Source code below:-

    View:-
     
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadTest.aspx.vb" Inherits="VillasWeCareV3.UploadTest" %>
    <%@ Register Assembly="CuteWebUI.AjaxUploader" Namespace="CuteWebUI" TagPrefix="cc1" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanelEdit" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
        
        <asp:FormView ID="FormViewProperty" DataSourceID="LinqDataSourceProperty" DataKeyNames="PropertyID" runat="server">

        <ItemTemplate>
        <asp:LinkButton ID="Edit" Text="Edit" CommandName="Edit" runat="server" /><br />
        <asp:Label ID="LabelPropertyTitle" Text="Property Title" runat="server" /><%# Eval("PropertyTitle")%><br />
        
            <asp:ListView ID="ListViewImages" DataSourceID="LinqDataSourcePropertyImages" runat="server">
                <LayoutTemplate>
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                </LayoutTemplate>
                <ItemTemplate>
                    <asp:Image ID="ImageButtonProperty" ImageUrl='<%# String.Format("DisplayImage.ashx?ImageID={0}&Width=80&Height=60", Eval("ImageID")) %>' AlternateText="Thumbnail" runat="server" />             
                </ItemTemplate>
            </asp:ListView>
        
        </ItemTemplate>
        <EditItemTemplate>
        
        <asp:LinkButton ID="Save" Text="Save" CommandName="Update" runat="server" /> <asp:LinkButton ID="Cancel" Text="Cancel" CommandName="Cancel" runat="server" /><br />
        <asp:Label ID="LabelPropertyTitle" Text="Property Title" runat="server" /><asp:TextBox ID="PropertyTitle" Text='<%#Bind("PropertyTitle")%>' runat="server" /><br />
        
            <asp:ListView ID="ListViewImages" DataSourceID="LinqDataSourcePropertyImages" runat="server">
                <LayoutTemplate>
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                </LayoutTemplate>
                <ItemTemplate>
                    <asp:Image ID="ImageButtonProperty" ImageUrl='<%# String.Format("DisplayImage.ashx?ImageID={0}&Width=80&Height=60", Eval("ImageID")) %>' AlternateText="Thumbnail" runat="server" />             
                </ItemTemplate>
            </asp:ListView>
            
            <cc1:Uploader ID="UploaderImage" UploadType="Silverlight" OnFileUploaded="UploadImageEdit" TempDirectory="~/" ShowProgressBar="true" ShowProgressInfo="false" ProgressBarStyle="Blocks" runat="server" />
        
        </EditItemTemplate>
        </asp:FormView>
        
        <asp:LinqDataSource ID="LinqDataSourceProperty" 
        ContextTypeName="VillasWeCareV3.DataClassesDataContext" TableName="tblProperties" EnableUpdate="true" EnableInsert="true" Where="PropertyID = @PropertyID" runat="server">
        <WhereParameters>
            <asp:QueryStringParameter Name="PropertyID" QueryStringField="id" Type="Int32" />
        </WhereParameters>
    </asp:LinqDataSource>
    <asp:LinqDataSource ID="LinqDataSourcePropertyImages" 
        ContextTypeName="VillasWeCareV3.DataClassesDataContext" TableName="Images" EnableUpdate="true" EnableInsert="true" Where="PropertyID = @PropertyID" OrderBy="Ordinal" runat="server">
        <WhereParameters>
            <asp:QueryStringParameter Name="PropertyID" QueryStringField="id" Type="Int32" />
        </WhereParameters>
    </asp:LinqDataSource>

        </ContentTemplate>
        </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>
     
    Code Behind:-
     
    Imports CuteWebUI

    Public Class UploadTest
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        End Sub

        Private _db As DataClassesDataContext

        Protected ReadOnly Property db As DataClassesDataContext
            Get
                If _db Is Nothing Then
                    _db = New DataClassesDataContext
                End If
                Return _db
            End Get
        End Property

        Protected ReadOnly Property PropertyID As Integer
            Get
                Return Request.QueryString("id")
            End Get
        End Property

        Protected ReadOnly Property currentProperty As tblProperty
            Get
                currentProperty = db.tblProperties.Where(Function(p) p.PropertyID = PropertyID).Single

            End Get
        End Property

        Public Sub UploadImageEdit(ByVal sender As Object, ByVal args As UploaderEventArgs)


            Dim extension As String = System.IO.Path.GetExtension(args.FileName).ToLower()
            Dim MIMEType As String = Nothing

            Select Case extension
                Case ".gif"
                    MIMEType = "image/gif"
                Case ".jpg", ".jpeg", ".jpe"
                    MIMEType = "image/jpeg"
                Case ".png"
                    MIMEType = "image/png"
                Case Else
                    'Invalid file type uploaded
                    Exit Sub
            End Select

            Dim imageBytes(args.FileSize) As Byte
            args.OpenStream.Read(imageBytes, 0, imageBytes.Length)

            Dim db As New DataClassesDataContext

            Dim img As New Image
            img.PropertyID = PropertyID
            img.Ordinal = currentProperty.Images.Count + 1
            img.FullPicture = imageBytes
            db.Images.InsertOnSubmit(img)
            db.SubmitChanges()

            Me.FindControlRecursive("ListViewImages").DataBind()

        End Sub

    End Class
View Complete Thread