AsycUpload using DropZone in usercontrol fires OnClientFileUploaded for each control

5 posts, 0 answers
  1. Tony
    Tony avatar
    22 posts
    Member since:
    Jun 2005

    Posted 15 Feb 2013 Link to this post

    So, a bit complicated and I'm guessing there's an issue with my JavaScript so any help would be appreciated.

    Here's my code:

    Master Page
    function pageLoad() {
        if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
            $(".dropzone h5").hide();
            $(".dropzone p").hide();
            $(".dropzone").removeClass("dropzone");
        }
        else {
            $(document).bind({ "drop": function (e) { e.preventDefault(); } });
            $(".dropzone").each(function (index) {
                $(this).bind({ "dragenter": function (e) { dragEnterHandler(e, $(this)); } })
                    .bind({ "dragleave": function (e) { dragLeaveHandler(e, $(this)); } })
                    .bind({ "drop": function (e) { dropHandler(e, $(this)); } });
            });
        }
    }

    ASPX
    <%@ Register Src="~/admin/widgets/assetmanager.ascx" TagPrefix="uc" TagName="AssetManager" %>
     
    <uc:AssetManager runat="server" ID="Slides" />
    <uc:AssetManager runat="server" ID="Boxes" />

    ASCX
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script type="text/javascript">
                //.Master file needs: function pageLoad() { loadAsync() }
                //Utils.js - loadAsync(), dropHandler(), dragEnterHandler(), dragLeaveHandler()
                 
                function fileUploaded<%= AsyncUpload1.ClientID %>(sender, args) {
                    alert("fileUploaded<%= AsyncUpload1.ClientID %>");
                    $(".invalid.msg" + <%= AsyncUpload1.ClientID %>).hide();
                    $find("<%=RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindAssets<%= AsyncUpload1.ClientID %>");
                    $telerik.$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).html("");
                    sender.deleteFileInputAt(0);
                }
     
                function validationFailed<%= AsyncUpload1.ClientID %>(sender, args) {
                    alert("validationFailed<%= AsyncUpload1.ClientID %>");
                    $(".invalid.msg" + <%= AsyncUpload1.ClientID %>).show();
                    $(".invalid.msg" + <%= AsyncUpload1.ClientID %>).html("Sorry, you are trying to upload an invalid type of file.");
                    if ($(".filetypes").text() != "") {
                        var types = $(".filetypes").text().replace("(", "").replace(")", "");
                        $(".invalid.msg" + <%= AsyncUpload1.ClientID %>).append(" You can upload the following types of file: " + types + ".");
                    }
                    sender.deleteFileInputAt(0);
                }
        </script>
        <script type="text/javascript">
            //Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; };
            Telerik.Web.UI.RadAsyncUpload.Modules.Silverlight.isAvailable = function () { return false; };
        </script>
    </telerik:RadScriptBlock>
     
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <span class="msg error invalid msg<%= AsyncUpload1.ClientID %>" style="display:none;"></span>
    </telerik:RadCodeBlock>
    <div id="pnlDropZone" runat="server" class="dropzone dr{0}">
        <h5>To upload, drop files here</h5>
        <p>or</p>
        <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MultipleFileSelection="Automatic" MaxFileSize="52428800" Localization-Select="Select Files" DropZones=".dropzone" /> 
    </div>

    ASCX.VB
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
     Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)
     AddHandler manager.AjaxRequest, AddressOf assets_AjaxRequest
     manager.AjaxSettings.AddAjaxSetting(manager, AsyncUpload1)
     manager.AjaxSettings.AddAjaxSetting(manager, ddlMoveTo)
     
     If Not IsPostBack Then
      AsyncUpload1.TargetFolder = "~/Images"
      AsyncUpload1.OnClientFileUploaded = "fileUploaded" & AsyncUpload1.ClientID
      AsyncUpload1.OnClientValidationFailed = "validationFailed" & AsyncUpload1.ClientID
     
      pnlDropZone.Attributes("class") = pnlDropZone.Attributes("class").Replace("{0}", AsyncUpload1.ClientID)
     End If
    End Sub
     
    Protected Sub AsyncUpload1_FileUploaded(sender As Object, e As Telerik.Web.UI.FileUploadedEventArgs) Handles AsyncUpload1.FileUploaded
     e.File.SaveAs(HttpContext.Current.Server.MapPath("~/images/" & e.File.FileName))
     'Add to database
    End Sub

    CSS
    .dropzone
    {
        text-align:center;
        padding:15px;
        border:dashed 5px #c0c0c0;
    }
    .dropzone h5
    {
        margin:0;
    }
    .dropzone .RadUpload
    {
        margin:5px auto 0;
        text-align:center;
    }
    .dropzone .RadUpload li
    {
        list-style:none;
    }
    .dropzone .RadUpload input.ruFakeInput
    {
        display: none;
    }

    My problem is that when I drag a file to the DropZone for either of the controls, both 'fileUploaded' functions are called and the file is uploaded twice.  If I drag to the actual AsyncControl itself, everything works fine and the file is only uploaded once.

    Help!?

    Tony.
  2.
  3. Plamen
    Admin
    Plamen avatar
    3040 posts

    Posted 20 Feb 2013 Link to this post

    Hi Tony,

     
    I have tested the issue described in a sample code similar to the one on-our demo and it worked properly at my side.I am attaching my test project. Would you lease review it and elaborate what else should be done or changed it in order to reproduce the described behavior?

    Greetings,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Tony
    Tony avatar
    22 posts
    Member since:
    Jun 2005

    Posted 20 Feb 2013 Link to this post

    Okay, either you missed the point entirely or I did not explain it sufficiently, but either way I have submitted a project via support ticket 661557 using my original code above (with a few unnecessary bits removed).

    If you drag a file over the actual control (where it says "select") things work fine with the 'file uploaded' JavaScript firing only once.  If you drag over the drop zone area (avoiding the "select" dialogue) the JavaScript fires twice, once for each usercontrol, hence a file would be uploaded twice.

    My belief is that my JavaScript in the pageLoad function is incorrect, but I cannot see where.

    Thanks in advance,

    Tony.
  7. Plamen
    Admin
    Plamen avatar
    3040 posts

    Posted 22 Feb 2013 Link to this post

    Hello Tony,

     
    We have inspected your project and found out what is causing that behavior. It appeared to be because both RadAsyncUpload controls have the same drop zone - ".dropzone" and this was causing the unusual behavior. 

    Hope this will be helpful.

    Greetings,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Tony
    Tony avatar
    22 posts
    Member since:
    Jun 2005

    Posted 25 Feb 2013 Link to this post

    Perfect! Thank you.
Back to Top