This is a migrated thread and some comments may be shown as answers.

Can't add drop zones programatically

4 Answers 266 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Kristopher
Top achievements
Rank 1
Kristopher asked on 03 Mar 2014, 06:22 PM
I'm dynamically adding the RadAsyncUpload control in the code behind a master page during the page_load event.  I then try and set some properties about the RadAsyncUpload control in the code behind during the on_prerender event:

 private void Settings()
        {
            this.OnClientFileUploaded = ClientFileUploaded;
            this.OnClientFileDropped = ClientFileDropped;
            this.OnClientProgressUpdating = ClientProgressUpdated;
            this.HttpHandlerUrl = HttpHandler;
            this.DropZones = DropZoneList;
            this.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;
            this.TemporaryFolder = GetTemporaryFolder;
            this.Style.Add("display", "none");
        }

protected override void OnPreRender(EventArgs e)
        {
Settings();
base.OnPreRender(e);
}

The control doesn't seem to be registering the dropzones I specify (which are specified as string[] = {"#zone1", "#zone2"...}).  If  I set this list in the aspx page, it seems to work fine, but I'd like to do this in the code behind in a control which inherits from RadAsyncUpload.  Any ideas why these zones aren't being set?  

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 04 Mar 2014, 11:45 AM
Hi Kristopher,

Please have a look into the sample code snippet which works fine at my end.

ASPX:
<div id="DropZone2" runat="server">
    <p>
        Custom Drop Zone</p>
    <p>
        Drop Files Here</p>
</div>

C#:
RadAsyncUpload upload = new RadAsyncUpload();
protected void Page_Load(object sender, EventArgs e)
{
    upload.ID = "Upload1";
    upload.PreRender += new EventHandler(upload_PreRender);
    this.form1.Controls.Add(upload);
}
void upload_PreRender(object sender, EventArgs e)
{
    string[] dropzone = new string[] {"#DropZone2" };
    upload.DropZones = dropzone;
}

JavaScript:
<script type="text/javascript">
    var $ = $telerik.$;
    function pageLoad() {
        $(document).bind({ "drop": function (e) { e.preventDefault(); } });
        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;
        dropZone[0].style.backgroundColor = "#000000";
    }
    function dragLeaveHandler(e, dropZone) {
        if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
            dropZone[0].style.backgroundColor = "#357A2B";
    }
</script>

Thanks,
Shinu.
0
Kristopher
Top achievements
Rank 1
answered on 04 Mar 2014, 03:14 PM
Hey, thanks for responding.  

I've written everything you've written exactly, and it is still not working.  When I drag a file in the dropzone, the corresponding javascript event does not fire.  I have my js in a separate web resource that is embedded in the project.  Here is the js file's relevant functions (page_Load does fire during page load):

function pageLoad() {
  
        $telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });

        //the dropzone returned is returned as a "b.fn.b.init[0]." 
        var dropZone = $telerik.$(document).find('#DropZone');
       
         //No javascript errors on the following
            dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone[0]); } }).
            bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone[0]); } })
            .bind({ "drop": function (e) { dropHandler(e, dropZone[0]); } });
       
}
//Never gets executed
function dropHandler(e, dropZone) {
    dropZone[0].style.backgroundColor = "#357A2B";
}
//Never gets Executed
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";
}
//Never Gets Executed
function dragLeaveHandler(e, dropZone) {
    if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
        dropZone[0].style.backgroundColor = "#357A2B";


Here is hte div file.  Notice I have runat="server" like you do.  In the past when I've put runat=server, the DropZones stop working, but i've tried both ways and still no dropzone functionality.  

 <div id="DropZone" style="position:absolute" runat="server">


  Here is my class (which wraps RadAsyncUpload):
  protected override void OnLoad(EventArgs e)
        {
          //This sets this.DropZones = to a static string[] that i've hard coded
            this.Settings();
            base.OnLoad(e);
        }

      
        protected override void OnPreRender(EventArgs e)
        {

            
            Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);

           
            base.OnPreRender(e);
      
        }
   //Register js external file
        void Page_PreRenderComplete(object sender,EventArgs e)
        {
            if (!Page.ClientScript.IsClientScriptIncludeRegistered("AsyncUpload"))
            {
                Page.ClientScript.RegisterClientScriptInclude("AsyncUpload", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Resources.Scripts.AsyncUpload.js"));
            }

        }

And here is my master page which I want the user control to be added to:
private AsyncUpload AsyncUploadControl = new AsyncUpload();
 private void async_PreRender(object sender, EventArgs e)
        {
//Static list of DropZones
            string[] dropzones = AsyncUpload.DropZoneList;
            AsyncUploadControl.DropZones = dropzones;
        }

protected void Page_Load(object sender, EventArgs e)
        {
            AsyncUploadControl.ID = "AsyncUpload";
            AsyncUploadControl.PreRender += new EventHandler(async_PreRender);
            this.Controls.Add(AsyncUploadControl); 

 }
 While the above doesn't work, if I set the dropzones in an aspx page manually as strings, the drop zones work if all the dropzone divs are not runat=server.  If I change runat=server and hardcode the dropzones in the aspx page, the dropzones work again.  Ideally, I don't want the async upload control on the aspx pages at all, but rather added to the pages programatically like above.  

Thanks
















0
Kristopher
Top achievements
Rank 1
answered on 04 Mar 2014, 03:17 PM
edit:
//Tried pageLoad like this as well
function pageLoad() {
  
        $telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });

        //the dropzone returned is returned as a "b.fn.b.init[0]." 
        var dropZone = $telerik.$(document).find('#DropZone');
       
         //No javascript errors on the following
            dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone); } }).
            bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone); } })
            .bind({ "drop": function (e) { dropHandler(e, dropZone); } });
       
}
0
Hristo Valyavicharski
Telerik team
answered on 07 Mar 2014, 02:52 PM
Hi Kristopher,

How do you set DropZones property? Note that it should contain valid jQuery selector:

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    RadAsyncUpload upload = new RadAsyncUpload();
    upload.ID = "AsyncUpload1";
    upload.DropZones = new string[] { ".DropZone1", "#DropZone2" };
    upload.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;
    upload.OnClientFileUploaded = "ClientFileUploaded";
    upload.OnClientFileDropped = "OnClientFileDropped";
    upload.Style.Add("display","none");
 
    this.form1.Controls.Add(upload);
}

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        function pageLoad() {
            if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                $(".qsf-demo-canvas").html("<strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</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";
        }
 
        function ClientFileUploaded(sender, args) {
            console.log('ClientFileUploaded');
        }
 
        function OnClientFileDropped(sender, args) {
            console.log('OnClientFileDropped');
        }
    </script>
 
 
    <div class="qsf-demo-canvas">
        <div class="DropZone1" runat="server">
            <p>Custom Drop Zone</p>
            <p>Drop Files Here</p>
        </div>
        <div id="DropZone2" runat="server">
            <p>Custom Drop Zone</p>
            <p>Drop Files Here</p>
        </div>
    </div>
</form>

Sample is attached.

Regards,
Hristo Valyavicharski
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

Tags
AsyncUpload
Asked by
Kristopher
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Kristopher
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Share this question
or