conditional dropzone

[moegal]

Is there a "supports drag and drop" property?  I only want to show drop zone if the browser supports it.

Thanks,  Marty

[Shinu]

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>
</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.

[moegal]

Shinu,

thanks, I will try it this weekend.

Marty