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?
With the fileexplorer, is there a way the async upload dialog can be customized to add a drag and drop zone?
3 Answers, 1 is accepted
0
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:
Regards,
Vessy
Telerik
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>
.DropZone
1
{
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.
0

Loy
Top achievements
Rank 1
answered on 29 May 2014, 03:43 PM
Works great. Thanks for the great support.
0
Hi,
You are welcome, Loy. Do not hesitate to contact us in case we can be of any further assistance.
Kind regards,
Vessy
Telerik
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.