function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
TerminusbotTerminusbot 

Lightning SLDS File Selector - Detect Drag and Drop States

I am trying to understand how to modify the state of the Lightning Design System File Selector. Here is the base variant below. See bold and underlined for the dropzone class. 
 
<lightning:layout horizontalAlign="center">
            <div class="slds-form-element">
                <span class="slds-form-element__label" id="file-selector-id"></span>
                <div class="slds-form-element__control">
                    <div class="slds-file-selector slds-file-selector_files">
                        <div class="slds-file-selector__dropzone">
                            <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id"/>
                            <label class="slds-file-selector__body" for="file-upload-input-01">
                                <span class="slds-file-selector__button slds-button slds-button_neutral">
                                    <lightning:icon iconName="utility:upload" variant="base" size="x-small"/>
                                </span>
                                <span class="slds-file-selector__text slds-medium-show">or Drop Files</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </lightning:layout>

When you want to change it to show the drag over blue highlight that line changes to the following: 
 
<div class="slds-file-selector__dropzone slds-has-drag-over">

My question is how do you know when a file is hovering over the dropzone to trigger the class swap? 

Thanks for any guidance.