Ability to add drag and drop zone to upload dialog?

[Loy]

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?

[Vessy]

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

 

 

[Loy]

Works great. Thanks for the great support.

[Vessy]

Hi,

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

Kind regards,
Vessy
Telerik