This is a migrated thread and some comments may be shown as answers.
conditional dropzone
2 Answers 33 Views
This is a migrated thread and some comments may be shown as answers.
moegal
Top achievements
Rank 1
moegal asked on 08 Aug 2013, 01:10 PM
Is there a "supports drag and drop" property?  I only want to show drop zone if the browser supports it.

Thanks,  Marty

2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
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>
</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.

0
moegal
Top achievements
Rank 1
answered on 09 Aug 2013, 11:05 AM
Shinu,

thanks, I will try it this weekend.

Marty
Asked by
moegal
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
moegal
Top achievements
Rank 1
Share this question
or