conditional dropzone in UI for ASP.NET AJAX

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

conditional dropzone

2 Answers 33 Views

AsyncUpload

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

2 Answers, 1 is accepted

answered on 09 Aug 2013, 04:20 AM

Hi moegal,

The Drag and Drop functionality relies on the HTML5 File API and Drag-And-Drop modules, which means that it works in modern browsers only: Firefox 4+, Google Chrome, IE10, Safari 5+. So one option is you can check whether the File Api is available in your browser and if it is not available you can hide the drop zone and display a custom message. Please check the following code I tried which works fine at my end.

ASPX:

<div class="async-drop-zone">

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" DropZones=".DropZone1"

MultipleFileSelection="Automatic" />

<div class="DropZone1">

<p>

Custom Drop Zone</p>

<p>

Drop Files Here</p>

</div>

JavaScript:

<script type="text/javascript">

//<![CDATA[

var $ = $telerik.$;

function pageLoad() {

if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {

$(".async-drop-zone").html(

"<strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong>"

);

}

//]]>

</script>

CSS:

<style type="text/css">

.DropZone1

{

width: 300px;

height: 90px;

background-color: #357A2B;

border-color: #CCCCCC;

color: #767676;

text-align: center;

font-size: 16px;

color: white;

}

</style>

Thanks,
Shinu.