Ability to add drag and drop zone to upload dialog?

4 posts, 0 answers
  1. Loy
    Loy avatar
    4 posts
    Member since:
    Jan 2014

    Posted 26 May 2014 Link to this post

    I noticed the demo for the Asyncupload component that involves the drag and drop zone (http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx).

    With the fileexplorer, is there a way the async upload dialog can be customized to add a drag and drop zone?
  2. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 27 May 2014 Link to this post

    Hello Loy,

    Yes, you can modify the Upload window in order to add a custom drop zone. In order to do it you have to go through to following steps:
    • Attach a handler to the FileExplorer's Toolbar ClientButtonClick event in order to add the desired droppable elements in it.
    • Configure the desired DropZone elements to the AsyncUpload:
      protected void Page_Load(object sender, EventArgs e)
      {
          RadFileExplorer1.AsyncUpload.DropZones = new string[]{".DropZone1"};
          RadFileExplorer1.ToolBar.OnClientButtonClicked = "OnToolBarButtonClicked";
      }
    • Create the drop-zone-elements in the ClientButtonClick handler and attach the needed handlers to this element:
      <script type="text/javascript">
          function OnToolBarButtonClicked(toolbar, args) {
              if (args.get_item().get_value() == "Upload") {
                  var uploadEl = $find("<%= RadFileExplorer1.ClientID %>").get_asyncUpload().get_element();
       
                  if (!$telerik.$(".DropZone1").get(0)) {
                      var dropZoneEl = $telerik.$("<div class='DropZone1'>Drop Files Here</div>");
                      $telerik.$(uploadEl).prepend(dropZoneEl);
       
                      if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                          alert("<strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong>");
                      }
                      else {
                          $telerik.$(document).on("drop", function (e) { e.preventDefault(); });
       
                          var dropZone1 = $telerik.$(document).find(".DropZone1");
                          dropZone1.on("dragenter", function (e) { dragEnterHandler(e, dropZone1); })
                                   .on("dragleave", function (e) { dragLeaveHandler(e, dropZone1); })
                                   .on("drop", function (e) { dropHandler(e, dropZone1); });
                      }
                  }
              }
          }
       
          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>
    • Stylize the newly created div in the desired way:
      <style>
          .DropZone1
          {
              width: 300px;
              height: 90px;
              background-color: #357A2B;
              border-color: #CCCCCC;
              color: #767676;
              text-align: center;
              line-height: 50px;
              font-size: 16px;
              color: white;
              margin-bottom: 15px;
          }
      </style>

    For convenience I am attaching a sample page with the above approach implemented. I hope this would be helpful for you.


    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Loy
    Loy avatar
    4 posts
    Member since:
    Jan 2014

    Posted 29 May 2014 in reply to Vessy Link to this post

    Works great. Thanks for the great support.
  5. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 30 May 2014 Link to this post

    Hi,

    You are welcome, Loy. Do not hesitate to contact us in case we can be of any further assistance.

    Kind regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top