RadProgressManager and RadProgressArea causes FileUpload to malfunction

[Beryl]

We have a page in our application that allows user to upload CSV data to our database.  The actual import portion (not the upload) can be quite lengthy depending on the number of records so I am trying to use a RadProgressArea to show progress.  However, when I added the RadProgressArea and RadProgressManager to my page, the FileUpload codebehind no longer runs.  The dialog box opens for the user to select a file, but then the Upload() method in the code behind no longer runs:

 

<button type="button" class="btn btn-alt3" id="btnOpen" visible="true" onclick="javascript:OpenFileDialog();" > <i class="icon s7-upload"></i> Upload</button>

    <button type="button" runat="server" class="btn btn-alt3" id="btnUpload" onclick="javascript:ShowLoadingPanel();" onserverclick="Upload" style="visibility:hidden" ></button>

         <asp:FileUpload id="FileUpload1" runat="server" style="visibility:hidden" />

    <asp:HiddenField runat="server" ID="importType" ClientIDMode="Static" />
    <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
     <telerik:RadProgressArea RenderMode="Lightweight" ID="RadProgressArea1" runat="server" Width="500px" />
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageScripts_Footer" runat="server">
    <script>
        $(document).ready(function () {
            var grid = $find("<%= grdImportData.ClientID %>");
            var columns = grid.get_masterTableView().get_columns();

            for (var i = 0; i < columns.length; i++) {
                columns[i].resizeToFit();
            }

        });
        function OpenFileDialog(fileUpload) {
            document.getElementById('<%=FileUpload1.ClientID%>').click();
        }
        function UploadFile(fileUpload) {
            if (fileUpload.value != '') {
                document.getElementById("<%=btnUpload.ClientID %>").click();
            }
        }

 

It its the btnUpload.Client click call, but it never runs the code behind.  If I remove the RadProgressArea and the RadProgressManager, the Upload code runs as expected.

[Eyup]

Hi Beryl,

 

Generally, the upload control provides built-in progress indicators so actually you don't need the progress area control to achieve this requirement:
https://demos.telerik.com/aspnet-ajax/asyncupload/examples/monitorprogress/defaultcs.aspx

Another key point is that AJAX is not supported with upload, download and export operations so you will need to temporarily disable it:
 - https://www.telerik.com/support/kb/aspnet-ajax/ajaxmanager/details/get-more-descriptive-errors-by-disabling-ajax

Similar to this:
 - https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/Exporting/export-from-ajaxified-grid

If you prefer to use the progress area after all, you can find a fully working live sample here:
https://demos.telerik.com/aspnet-ajax/progressarea/examples/asyncuploadintegration/defaultcs.aspx?product=asyncupload

I hope this will prove helpful. Feel free to give these suggestions a try and let me know how it goes.

 

Regards,
Eyup
Progress Telerik

[Beryl]

I don't believe you understood my issue.  I am NOT trying to use the Progress Area for or with the upload.  The upload is merely a .csv file that I get and display in a grid on the page.  I am trying to use the ProgressArea for my import code which uses a foreach() statement to import the records into our database.  It can be extremely lengthy and I am trying to use progress for it.

[Eyup]

Hello Beryl,

 

In this case, could you open a formal support thread and provide us a sample runnable isolated web site or at least your code files demonstrating this specific scenario? This will enable us to reproduce the issue locally and provide more accurate and precise suggestions.

 

Regards,
Eyup
Progress Telerik