AsyncUpload lost its state on server-side validation

21 posts, 1 answers
  1. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 27 Oct 2014 Link to this post

    Hi Telerik,

    I have AsyncUpload on my page, and I have a very complex validation on the page - this is where server-side validation is used.

    When the user does not fill in all mandatory fields / fulfil the submission criteria, error messages will be shown on the page.
    At this time, the AsyncUpload control do not keep the earlier uploaded document anymore. 
    I believe it was because the PostbackTriggers set to btnSubmit, and the client state is lost.

    <telerik:RadAsyncUpload id="RadUpload1" runat="server" PostbackTriggers="btnSubmit" />

    Is there anyway for me to preserve the AsyncUpload client state in the server-side?
    For example, in the below code, as soon as I have detected that the "IsIdeaValid" is false, I will preserve the AsyncUpload client state.
    Please advice.

    protected void btnSubmit_Click(object sender, EventArgs e)
            {         
                ErrorMessage = "";
                if(!IsIdeaValid())
                    return;
  2. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 27 Oct 2014 Link to this post

    Hi Andy

    To the best of my understanding, you should call the validation function bu a button which is not the postbacktrigger button. If the validation passes then call the postback button programmatically


    Regards


    Sanjay Gupta
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 27 Oct 2014 in reply to SANJAY Link to this post

    Thank you for your reply Sanjay. Are you referring to calling the validation button through javascript?
    Do you have any page to refer me to for any demo code on what you have explained to me?
  5. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 27 Oct 2014 in reply to Andy Link to this post

    Hi Andy

    I donot have a demo page. Please give me a idea of your code. I donot need all the validation I would just need the javascript that you call after successfull validation and after failed validation

    Regards


    Sanjay Gupta
  6. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 27 Oct 2014 in reply to SANJAY Link to this post

    Hi Sanjay.

    Basically, i did not call anything from javascript. The validation is on server-side, that is where the client state is lost.
    I am looking for an approach to retain the client state during the server-side validation. 

    If you see the code on my first post, you will see that the PostbackTriggers has "btnSubmit" as the value.
    In the btnSubmit_click, it will do user input validation first before saving the form.
    If there is something invalid entered by user input, it will return the whole function without saving the form. And this is where the AsyncUpload client state lost.
  7. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 27 Oct 2014 in reply to Andy Link to this post

    Hi Andy

    On Button_Click


    if validation success then
        if len(me.session("tfile") ) > 0 then
            system.io.file.move(me.session("tfile"), finaldestination)
            me.session("tfile") = ""
        endif
    else
        e.filesaveas = "~/myfolder/" & e.filename
        me.session("tfile") = "~/myfolder/" & e.filename
       'Give the message of failed validation to the user

    endif


    On Page load
    if not ispostback then me.session.remove("tfile")

    Hope this help
  8. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 11 Nov 2014 Link to this post

    Hi Sanjay,

    Thank you for the reply. Unfortunately, it does not work for me. The Session["tfile"] is always NULL.

    Any other method to preserve the AsyncUpload client state for buttons that are not specified in PostbackTriggers?

    Thank you.
  9. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 13 Nov 2014 Link to this post

    Can anyone help me? I am totally stuck. Thank you.
  10. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 13 Nov 2014 in reply to Andy Link to this post

    Hi Andy

    I am sorry I did not see your post 2 days back

    Enclosed a small test project.

    The checkbox is used as validation process. If the checkbox is checked then I am treating the same in the code that validation has passeed

    I have tested by uploading a file with check box unchecked. then check the check box and press the button "save Images" I am treating this has the changes for passing the validation have been made. the file is accessed and reached the location.

    I noticed that you are coding in C#, I am more comfortable with vb. Hence the code is in VB. It would be kind of you to change the same to c#

    Telerik Dll are not enclosed in the bin directory.

    It is not allowing me to upload zip file so I have changed the extension to jpg, kindly rename to a.zip and then unzip.

    Regards


    Sanjay
  11. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 13 Nov 2014 in reply to SANJAY Link to this post

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test-upload.aspx.vb" Inherits="test_upload" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head id="Head1" runat="server">
            <title>Staff Members</title>
            <link href="css/drpd/style.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                </telerik:RadScriptManager>
                <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
                    <Windows>
                        <telerik:RadWindow ID="wndPdfPreview" runat ="server" VisibleOnPageLoad="false" VisibleStatusbar="true"
                                           ShowContentDuringLoad= "false" KeepInScreenBounds ="true" VisibleTitlebar="true" ></telerik:RadWindow>
                    </Windows>
                </telerik:RadWindowManager>
                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                    <script type="text/javascript">
                        //<![CDATA[
                        var $ = $telerik.$;

                        function pageLoad() {
                            if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                                $(".qsf-demo-canvas").html("<strong>Your browser does not support Drag and Drop.</strong>");
                            } else {
                                $(document).bind({
                                                     "drop": function (e) {
                                                         e.preventDefault();
                                                     }
                                                 });
                                var dropZone1 = $(document).find(".DropZone1");
                                dropZone1.bind({
                                                   "dragenter": function (e) {
                                                       dragEnterHandler(e, dropZone1);
                                                   }
                                               })
                                    .bind({
                                              "dragleave": function (e) {
                                                  dragLeaveHandler(e, dropZone1);
                                              }
                                          })
                                    .bind({
                                              "drop": function (e) {
                                                  dropHandler(e, dropZone1);
                                              }
                                          });
                                var dropZone2 = $(document).find("#DropZone2");
                                dropZone2.bind({
                                                   "dragenter": function (e) {
                                                       dragEnterHandler(e, dropZone2);
                                                   }
                                               })
                                    .bind({
                                              "dragleave": function (e) {
                                                  dragLeaveHandler(e, dropZone2);
                                              }
                                          })
                                    .bind({
                                              "drop": function (e) {
                                                  dropHandler(e, dropZone2);
                                              }
                                          });
                            }
                        }
                        function dropHandler(e, dropZone) {
                            dropZone[0].style.backgroundColor = "#357A2B";
                        }
                        function dragEnterHandler(e, dropZone) {
                            var dt = e.originalEvent.dataTransfer;
                            var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf(`Files`) != -1 :
                                                               dt.types.contains(`application / x - moz - file`)));
                            if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
                                dropZone[0].style.backgroundColor = "#000000";
                        }
                        function dragLeaveHandler(e, dropZone) {
                            if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
                                dropZone[0].style.backgroundColor = "#357A2B";
                        }
                        //]]>
                    </script>
                </telerik:RadScriptBlock>
                <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" OutputCompression="AutoDetect"></telerik:RadStyleSheetManager>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="3000"  Transparency="25"></telerik:RadAjaxLoadingPanel>
                <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="false" />
                <telerik:RadFormDecorator runat="server" id="RadFormDecorator1" DecoratedControls="All" EnableRoundedCorners="true"
                                          EnableEmbeddedSkins="true" RenderMode="Lightweight" />
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="timer1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="tml" LoadingPanelID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
                <telerik:RadNotification ID="RadNotification1" runat="server" LoadContentOn="TimeInterval"
                                         Width="300" Animation="Fade" EnableRoundedCorners="true" EnableShadow="true" Height="70"
                                         Title="Status" OffsetX="-200" OffsetY="-200" BackColor= "Red" ForeColor="Black" TitleIcon="none" AutoCloseDelay="30000">
                    <ContentTemplate>
                        <asp:Label ID="lblr" runat="server" Text=""></asp:Label>
                    </ContentTemplate>
                </telerik:RadNotification>
                <asp:Timer ID="timer1" runat="server" Interval="300000"></asp:Timer>
                <asp:Label ID="tml" runat="server"
                           Visible="false"></asp:Label>
                <telerik:RadPageLayout ID="pgl" runat="server" GridType="Fluid">
                    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn Span="2">

                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="10">
                                <asp:CheckBox ID="vald" Text="Process of Validation" runat="server" />
                            </telerik:LayoutColumn>

                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn Span="2">

                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="10">
                                <div class="qsf-demo-canvas" style="height:400px;">
                                    <h2>Upload Images</h2>
                                    <div class=".qsf-fb">
                                        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="jpg,jpeg,png,gif"
                                                                MaxFileSize="1524288"  skin="Sunset" DropZones=".DropZone1"  MultipleFileSelection="Automatic" PostbackTriggers="btnsvi">
                                        </telerik:RadAsyncUpload>
                                        <telerik:RadButton ID="btnsvi" runat="server" Text="Save Images"  SingleClick="true" SingleClickText="Saving Images"></telerik:RadButton>
                                        <div class="DropZone1">
                                            <p>Drop Your Images Here for Upload</p>
                                            <p>Drop Files Here</p>
                                        </div>
                                    </div>
                                </div>
                            
                            </telerik:LayoutColumn>

                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn Span="2">

                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="10">

                            </telerik:LayoutColumn>

                        </Columns>
                    </telerik:LayoutRow>

                </telerik:RadPageLayout>
            </form>
        </body>
    </html>


    ==============================================



    Partial Class test_upload
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            Try
                If Not IsPostBack Then 'IMportant to ensure that variables are cleared on page onload only
                    Me.Session("tfile") = ""
                Else ' it is post back again then

                   


                    'if required you can check that validation was caused by which button



                    If Len(Me.Session("tfile")) > 0 Then
                        If vald.Checked Then 'rund the validation code and check if passes the n
                            'Do whatever else has to be doen
                            Dim finalP As String
                            Dim flName As String
                            'process to set the final name of the filename
                            flName = "abc.jpg" ' I have set this explictily you might need some code to set the name
                            finalP = Me.Server.MapPath("~/final/") & flName
                            System.IO.File.Move(Me.Session("tfile"), finalP)
                            Me.Session("tfile") = ""

                            'I wouldprefer a clean up code to delete the temporary directory here

                        End If
                    End If
                End If
            Catch ex As Exception

            End Try
        End Sub

        Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As Telerik.Web.UI.FileUploadedEventArgs) Handles RadAsyncUpload1.FileUploaded
            Try
                Dim path As String
                path = Me.Server.MapPath("~/temp/") & Me.Session.SessionID 'Session id will ensure that multiple sessions donot mix
                If Not System.IO.Directory.Exists(path) Then System.IO.Directory.CreateDirectory(path)

                e.File.SaveAs(path & "\" & e.File.GetName)
                Me.Session("tfile") = path & "\" & e.File.GetName
                Me.Session("lclfile") = e.File.FileName

                'Now run the validation code
                'if the validation check passes
                If vald.Checked = True Then
                    Dim finalP As String
                    finalP = Me.Server.MapPath("~/final/") & e.File.GetName
                    System.IO.File.Move(path, finalP)
                    Me.Session("tfile") = ""
                Else 'validation has failed exit sub

                End If

            Catch ex As Exception

            End Try
        End Sub
    End Class

  12. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 13 Nov 2014 in reply to SANJAY Link to this post

    Hi Andy

    If you are able to achieve the target with the code, then

    Add a label just above the Upload control. On post back if the Lenght of the me.session("Tfile") > 0 then in the label show the text eg

    1 file has been uploaded to temporary directory


    Regards     
  13. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 16 Nov 2014 in reply to SANJAY Link to this post

    Hi Sanjay,

    Thank you so much for getting back to me.
    I have created a C# solution on the code that you gave me. To make it less complicated, I have removed the styling and javascript to drag & drop files. https://onedrive.live.com/redir?resid=37227F77B1ACDDA8%21164 

    I am still getting blank for session["tfile"]. I enclosed the solution that i have converted into c#.
    Please advice whether I have done something wrong there.

    FYI. I am using Telerik version 2012.3.1205.35


  14. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 16 Nov 2014 in reply to Andy Link to this post

    Hi Andy

    I have executed your code with telerik 2014.2.724.40 , I guess that would not make a difference.

    You need to change the following in your code

    You need to add the parameter OnFileUploaded="RadAsyncUpload1_FileUploaded" in <telerik:RadAsyncUpload

    This is because in C# you need to explicitly mention the code to be called on post back. Without this parameter it is never entering the FileUploaded code and hence the session object doesnot get a value.

    I have successfully executed the code.

    Hope this helps


    Regards



    Sanjay Gupta
  15. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 17 Nov 2014 in reply to SANJAY Link to this post

    Hi Sanjay,

    Sorry for missing that bit, yes, it is required by C#.
    I am able to upload a file now. 

    1. I wonder, why do we need to have the file upload code in the Page_Load?
    2. The file is still missing after failed in page validation.
        I unchecked "Process of Validation", upload a file, and click "Save Images" - but the uploaded file is still missing.
        What I expect is as per the attach screenshot. Before upload, and after upload (failed on page validation), it should show the same thing. Is this achievable? And this was my original question :)

  16. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 17 Nov 2014 in reply to Andy Link to this post

    Hi Andy

    Pardon me if I am wrong

    Telerik control starts uploading the file as soon as you select the file. On the trigger file as soon as trigger happens the file moves from the temp folder to new location. Even if you do exit sub before calling e.saveAs the file is lost

    Experience taught me make many such turnarounds. I faced the simillar problem when I upload files and primary record is not yet updated saved( so the id is not available comparable to your case of validation failure)

    I hope alteast you are able to tide over the crisis if any

    You can put a label above the file upload. If your varialble tmp.lenght > 0 then you can label the text with name of file or hide the label


    Regards


    Sanjay Gupta
  17. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 17 Nov 2014 in reply to SANJAY Link to this post

    Hi Sanjay,

    Thank you for the explanation.
    So, what you are suggesting is to control the listing of uploaded file myself, instead of using the one provided by Telerik. Because I like the file listing provided by Telerik, where it has the uploaded file status "green" or "orange" - which is very intuitive.

    Is this the only way to do it for this scenario?
  18. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 17 Nov 2014 in reply to Andy Link to this post

    Hi Andy

    NO, I am recommedning that you use the telerik control.  Save the file in session object and if the validation fails show the label with then name of file ( the file is already uploaded). After the completion of validation hide the label and show the telerik control for new upload

    In the mean time I will try hard to help reach a code that the file persists


    Regards

    Sanjay Gupta
  19. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 17 Nov 2014 in reply to SANJAY Link to this post

    Hi Sanjay,

    Yes, that will be really appreciated if you can find out on how to persist the file - without doing the suggested workarounds. 
    Hope to hear from you.

    Regards,
    Andy Taslim
  20. Answer
    SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 17 Nov 2014 in reply to Andy Link to this post

    Hi Andy

    Hope this would resolve your issue

    1) Put a new button : <asp:Button ID="btnupl" runat="server" Text="Upload" />
    2) Change the post back trigger control to : PostbackTriggers="btnupl"
    3) Javascript code on
    <script type="text/javascript">

                 function upload_fls()

                 {
                     alert("a");
                     document.getElementById("<%=btnupl.ClientID%>").click();
                    }

    </script>

    4) Server side code
     Protected Sub btnsvi_Click(sender As Object, e As EventArgs) Handles btnsvi.Click
            Try
                If vald.Checked Then
                    Dim ScriptString As String = "function f(){upload_fls();Sys.Application.remove_load(f);};Sys.Application.add_load(f);"

                    ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "pdfOpener", ScriptString, True)
                End If
            Catch ex As Exception

            End Try
        End Sub


    Logic

    The server side code button executes to call the validation check. If validation fails then the files will persist in Upload control
    If validation clears then it will call the java script which in turn will call the upload code

    the working vb code (Tested successfully) on link
    www.thetaskmate.com/app/telerik/asyntest.zip


    Regards


    Sanjay Gupta
  21. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 19 Nov 2014 Link to this post

    Hi Andy

    I am eagerly waiting for you to evaluate

    Regards
  22. Andy
    Andy avatar
    10 posts
    Member since:
    Oct 2014

    Posted 19 Nov 2014 in reply to SANJAY Link to this post

    Hi Sanjay,
     
    I have just implemented it into my code today, it worked like charm. You saved my life. Thank you so much for your help. Really appreciate it.
     
    Regards 
    Andy Taslim 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017