Dedicated Upload button

[Simon]

Hello,

I am working with the 2008 Q2 version of the Rad Controls and try to fix the problem, that only one special button starting the progress manager and therefore the update.
I have different other buttons on my page, doing a full postback. When I press any of them the progressmanager starts. I tried your solution at http://www.telerik.com/community/forums/aspnet-ajax/upload/create-a-dedicated-submit-button-for-rad-upload.aspx
but it does not work. So I checked the __EVENTARGUMENT so that only the link button is allowed. But even with setting the input boxes to cleared, It does not work. The progressmanager still starts.

function startUploadSubmit(sender, args, uploadID, labelID) {
            var upload = $find(uploadID);


            //make sure, that there will be no problem
            var eventTarget = document.getElementById('__EVENTTARGET');
            if (eventTarget.value == '<%= btnUploadFile.UniqueID %>') { }
            else {
                var fileInputs = upload.getFileInputs();
                for (var i = 0; i < fileInputs.length; i++) {
                    upload.clearFileInputAt(i);
                }
                return;
            }

            var lblMessageElement = $get(labelID);
            //is a file selected
            var files = upload.getFileInputs();
            if (files[0].files.length == 0) {
                args.set_cancel(true);
                lblMessageElement.innerHTML = '<%= Encoda.Web.Settings.GetLocalizedString("Dialog#NoFileSelected") %>';
                return;
            }
            var valid = upload.validateExtensions();
            if (!valid) {
                args.set_cancel(true);
                lblMessageElement.innerHTML = '<%= Encoda.Web.Settings.GetLocalizedString("Dialog#WrongFileExtension") %>';
                return; WrongFileExtension
            }
        }

I even tried to set the ProgressManager to RegisterForSubmit and then calling for the onclick event of the upload button the StartProgressPolling. Trying this the progressmanager does not start at all.

<telerik:RadScriptBlock runat="server">             <script language="javascript" type="text/javascript"> function startFileUpload() {

var progManager = getRadProgressManager();

RadProgressManager.StartProgressPolling();

}

</script> </telerik:RadScriptBlock>

<telerik:RadProgressManager ID="progressManager" runat="server" OnClientSubmitting="startUploadSubmit" RegisterForSubmit="false" />

<ucc:EncodaLinkButton Runat="server" ID="btnUploadFile" Caption="Dialog#StartUpload" OnClick="btnUploadFile_OnClick" OnClientClick="startFileUpload();" />

Any ideas, how to solve the problem, that the ProgressManager (and the upload) start only pn the specified button?

[Genady Sergeev]

Hello Simon,

Which version of the controls do you use the classic ones or the Ajax ones?

You have chosen the right approach when trying to manually start the progoress manager on click. However, you have syntax error. This what you function looks like:

function startFileUpload() {
            var progManager = getRadProgressManager();
            RadProgressManager.StartProgressPolling();

}

as you see you try to use undefined object RadProgressManager.

This is the correct function if using the classic controls:

function startFileUpload() {
            var progManager = GetRadProgressManager();
            progManager.StartProgressPolling();

}

When AJAX controls are used the following function should be used:

function startFileUpload() {
            var progManager = getRadProgressManager();
            progManager.startProgressPolling();

}

Sincerely yours,
Genady Sergeev
the Telerik team

[Simon]

Hello Genady,

thanks for your reply. I am using the AJAX controls.

The progress manager starts now polling.
But now the RadProgressArea is not updated and shown any more. When I use the RadProgressManager with RegisterForSubmit="true" (Standard behaviour) everything works fine. But with setting to false (what I want) the progress bar does not work anymore.

Here my aspx code

<telerik:RadProgressManager ID="progressManager" runat="server" OnClientSubmitting="startUploadSubmit" RegisterForSubmit="false" />

<telerik:RadProgressArea ID="progressArea" runat="server" EnableEmbeddedBaseStylesheet="false"
        ProgressIndicators="TotalProgressBar,TotalProgressPercent,TotalProgress,RequestSize,TransferSpeed,CurrentFileName" Skin="Web20" >
    </telerik:RadProgressArea>

and my Javascript code:

function startUploadSubmit(sender, args) {
 //do something
 ...
}
function startFileUpload() {
            var progManager = getRadProgressManager();
            progManager.startProgressPolling();
        }

[Genady Sergeev]

Hi Simon,

I am attaching sample project that shows how to start progress polling on clicking a specific button. It works fine on our side, could you please test in onto your machine?

Kind regards,
Genady Sergeev
the Telerik team

[Simon]

Hello Genady,

thanks for your help.
So your project as standalone worked very well. Then I adapted it to my project and it didn't work.
for more detail, I will show it in the default.aspx you had and how I changed it

the new default.aspx looks like (only form part)

<asp:ScriptManager runat="server" ID="ScriptManagerMain">
    </asp:ScriptManager>

    <script type="text/javascript">
        function startPolling() {
            getRadProgressManager().startProgressPolling();
        }

    </script>
    <div>
       <asp:UpdatePanel ID="updatePanelUpload" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                   <telerik:RadProgressManager runat="server" ID="RadProgressManager1"
                        RegisterForSubmit="False" />

                  <telerik:RadUpload ID="UploadElement" runat="server" InitialFileInputsCount="1" MaxFileInputsCount="1"
            ControlObjectsVisibility = "None" TargetFolder="~/" MaxFileSize="5000000" EnableFileInputSkinning="false"
            AllowedFileExtensions=".jpg,.jpeg,.gif,.png,.exe,.iso,.pdf,.zip" InputSize="50" Width="380px" EnableEmbeddedBaseStylesheet="false" />

                   <telerik:RadProgressArea ID="progressArea" runat="server" EnableEmbeddedBaseStylesheet="false"
                                            ProgressIndicators="TotalProgressBar,TotalProgressPercent,TotalProgress,RequestSize,TransferSpeed,CurrentFileName"
                                            Skin="Web20" >
                    </telerik:RadProgressArea>

                   <asp:Button runat="server" ID="Button1" Text="Text1" onclick="Button1_Click" OnClientClick="startPolling();" />
               </ContentTemplate>
        </asp:UpdatePanel>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server" >
            <ContentTemplate>
                <asp:Button runat="server" ID="Button2" Text="Knopf2" onclick="Button2_Click"/>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>

and the code behind:

using System;
using System.Collections.Generic;

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManagerMain.RegisterPostBackControl(Button1);
    }
    protected void Button1_Click(object sender, EventArgs e)
    {

    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        updatePanelUpload.Update();
    }
}

so far so good.
When I start the page and upload a file, everything works fine.
But when I press the second button, to update the first update panel and afterwards try to upload a file, the progressmanager starts the upload, but no events are send to the client for showing the progressarea.

This is what happened in my project. I had the radupload in an updatepanel, which is shown through a Ajax:ModalPopupExtender. Before showing the panel, file extensions and filesize + target folder can be set and therefore the updatepanel has to be updated.
When I then try to start the upload the panel was already updated and will not show anymore the progressbar.

Do you have any ideas about this problem?
Thanks Simon

[Genady Sergeev]

Hello Simon,

RadUpload and the submit button should not be inside UpdatePanel/RadAjaxPanel. RadUpload cannot upload files using AJAX calls. This is a limitation of the XmlHttpRequest component, used in all AJAX frameworks for asynchronous calls to the application. In order to upload a file your application must perform a full page postback. More information on the topic can be found here.

As for the RadProgressArea, it really does not need to be inside UpdatePanel. RadProgressArea implements its own mechanism for asynchronous requests so that it will not cause any screen flickering while being updated.


All the best,
Genady Sergeev
the Telerik team

[Simon]

Hello Genady,

yeah I understand the problem with the updatepanel. But I must have the radupload in an update panel, because I want to set the targetfolder and the filters dynamically, without a full postback. By reason the upload element and the progressbar are both in one ASP.Net control in my application, which is then in an update panel, I cannot exclude the progress bar from the update panel.
The difficulty with the full postback, to start the radupload, is not the problem. This works. The only problem is, that the progress bar is not working anymore, after you once updated the update panel. Can you check the code I posted before, when you have the progress bar in an update panel and then update it once from outside, before starting the upload? This creates the problem.

Greetings Simon

[Genady Sergeev]

Hi Simon,

How about moving the progress area outside of the UpdatePanel? I think this would fix the problem that you experience with it, as long as the submit button performs full page postback. You can safely leave the RadUpload inside the UpdatePanel for the sake of setting the filters and the target folder.

Sincerely yours,
Genady Sergeev
the Telerik team