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

Last post 01-13-2010, 8:52 PM by cutechat. 6 replies.
Sort Posts: Previous Next
  •  01-11-2010, 7:35 PM 58124

    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
  •  01-12-2010, 11:03 PM 58132 in reply to 58124

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

    Hi,
     
    It's possible to zip and upload the files ? or send it to me ? terry@cutesoft.net  , I will test it.
     
    Regards,
    Terry
  •  01-12-2010, 11:08 PM 58133 in reply to 58124

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

    Hi,
     
    By the way,
     
    do you get same problems in a very simple page ?
     
    Regards,
    Terry
  •  01-13-2010, 2:22 PM 58147 in reply to 58133

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

    I spoke to Eric yesterday evening (GMT) and he was going to email me about it, but he hasn't.

    I have emailed a source file changed from one of your demo files that displays the issue.  If you run the file, click the edit link, then try to upload you should get the error.

    If you change line 73 from

    <asp:FormView ID="FormView1" DefaultMode="ReadOnly" runat="server">

    to

    <asp:FormView ID="FormView1" DefaultMode="Edit" runat="server">

    it will then work, but not in the way I want. I need to be in readonly mode first.  It seems to be quite a subtle issue.

    Can you try and repro your end please??

  •  01-13-2010, 2:24 PM 58148 in reply to 58147

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

    Here is the code:-
     

    <%@ Page Language="VB" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">

        Private TestDataSource As New Dictionary(Of String, String)

        Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
           
            If Not IsPostBack Then
           
                TestDataSource.Add("FirstItem", "FirstItem")
           
                Dim FormView1 As FormView = DirectCast(UpdatePanel1.FindControl("FormView1"), FormView)
               
                FormView1.DataSource = TestDataSource
                FormView1.DataBind()
               
            End If
           
        End Sub

        Private Sub FormView1_ModeChanging(ByVal sender As Object, ByVal e As FormViewModeEventArgs) Handles FormView1.ModeChanging
            Dim FormView1 As FormView = DirectCast(sender, FormView)
           
            FormView1.ChangeMode(e.NewMode)
            TestDataSource.Add("FirstItem", "FirstItem")
            FormView1.DataSource = TestDataSource
            FormView1.DataBind()
           
        End Sub

        Private Sub InsertMsg(ByVal msg As String)
           
            'Get a handle to the now nested ListBoxEvents
            Dim FormView1 As FormView = DirectCast(UpdatePanel1.FindControl("FormView1"), FormView)
            Dim ListBoxEvents As ListBox = DirectCast(FormView1.FindControl("ListBoxEvents"), ListBox)
           
            ListBoxEvents.Items.Insert(0, msg)
            ListBoxEvents.SelectedIndex = 0
           
        End Sub

        Private Sub ButtonPostBack_Click(ByVal sender As Object, ByVal e As EventArgs)
            InsertMsg("You clicked a PostBack Button.")
        End Sub

        Private Sub Uploader_FileUploaded(ByVal sender As Object, ByVal args As UploaderEventArgs)
            InsertMsg("File uploaded! " & args.FileName & ", " & args.FileSize & " bytes.")
            'Copys the uploaded file to a new location.
            'args.CopyTo("c:\\temp\\"& args.FileName)
            'You can also open the uploaded file's data stream.
            'System.IO.Stream data = args.OpenStream();
        End Sub
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Simple Upload</title>
        <link rel="stylesheet" href="demo.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="content">
                <%= DateTime.Now%>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                    <%= DateTime.Now%>
                    <asp:FormView ID="FormView1" DefaultMode="ReadOnly" runat="server">
                    <ItemTemplate>
                    <asp:LinkButton ID="Edit" Text="Edit" CommandName="Edit" runat="server" />
                    <p>You are not in edit mode</p>
                    </ItemTemplate>
                   
                    <EditItemTemplate>
                        <%= DateTime.Now%>
                        <h2>
                            Simple Upload (Customizing the UI)
                        </h2>
                        <p>
                            A sample demonstrating how to customize the look and feel of file upload controls.
                            (Maximum file size: 10M).
                        </p>
                     
                        <asp:Image runat="server" ID="Uploader1Insert" AlternateText="Upload File" ImageUrl="~/sampleimages/upload.png" />
                        <asp:Panel runat="server" ID="Uploader1Progress" BorderColor="Orange" BorderStyle="dashed"
                            BorderWidth="2" Style="padding-right: 4px; padding-left: 4px; padding-bottom: 4px;
                            padding-top: 4px">
                            <asp:Label ID="Uploader1ProgressText" runat="server" ForeColor="Firebrick"></asp:Label>
                        </asp:Panel>
                        <asp:Image runat="server" ID="Uploader1Cancel" AlternateText="Cancel" ImageUrl="~/sampleimages/cancel_button.gif" />
                        <CuteWebUI:Uploader runat="server" UploadType="IFrame" ID="Uploader1" InsertButtonID='Uploader1Insert'
                            ProgressCtrlID='Uploader1Progress' ProgressTextID='Uploader1ProgressText' CancelButtonID='Uploader1Cancel'
                            OnFileUploaded="Uploader_FileUploaded">
                            <ValidateOption MaxSizeKB="10240" />
                        </CuteWebUI:Uploader>
                        <br />
                        <br />
                        <div>
                            Server Trace:
                            <br />
                            <br />
                            <asp:ListBox runat="server" ID="ListBoxEvents" Width="400"></asp:ListBox>
                        </div>
                        <br />
                        <br />
                       
                        <asp:Button ID="ButtonPostBack" Text="This is a PostBack button" runat="server" OnClick="ButtonPostBack_Click" />
                       
                    </EditItemTemplate>
                    </asp:FormView>
                       
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>

  •  01-13-2010, 7:45 PM 58151 in reply to 58124

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

    Hi,
      
    I can reproduce the issues. checking reason.
     
    Regards,
    Terry
     
  •  01-13-2010, 8:52 PM 58153 in reply to 58124

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

    We have fixed the issues. please download the control and try again.
     
    For Firefox + IFrame mode , it require the end user click the <input type=file> again, because the Firefox do not allow script use inputfile.click() to show that dialog directly.

     
    Regards,
    Terry
View as RSS news feed in XML