Unplanned
Last Updated: 16 Aug 2021 08:25 by ADMIN

RadAsyncUpload "Drop Files here" element remains visible when dragging a file quickly over and out of the DragZone

Replicable in File Upload with Drag and Drop live demo.

Drag a file quickly through the DragZone without dropping it. The "Drop Files Here" element is shown but doesn't get hidden when the mouse leaves the DragZone (ondragleave).

Unplanned
Last Updated: 02 Nov 2016 00:47 by Polymorphic Solutions
Unplanned
Last Updated: 17 Oct 2016 08:02 by ADMIN
Workaround - Toggle drop zone visibility or enable/disable it, using AsyncUpload OnClientFileUploaded and OnClientFileUploadRemoved events:

<div class="dropfile" style="height: 20px; width: 120px; background-color: red; display: block">
</div>
<telerik:RadAsyncUpload ID="fimFileImport" runat="server" DropZones=".dropfile" MaxFileInputsCount="1"
	RenderMode="Lightweight" OnClientFileUploaded="OnClientFileUploaded" OnClientFileUploadRemoved="OnClientFileUploadRemoved" >
</telerik:RadAsyncUpload>

<script type="text/javascript">
	function OnClientFileUploaded(sender, args) {

		var maxFileCount = sender.get_maxFileCount();
		var uploadedFilesLength = sender.getUploadedFiles().length;
		
		if (maxFileCount === uploadedFilesLength) {
			$telerik.$('.dropfile').hide();
		}
	}

	function OnClientFileUploadRemoved(sender, args) {

		var maxFileCount = sender.get_maxFileCount();
		var uploadedFilesLength = sender.getUploadedFiles().length;

		if (maxFileCount > uploadedFilesLength) {
			$telerik.$('.dropfile').show();
		}
	}
</script>