You need to sign in to do that
Don't have an account?
Terminusbot
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.
When you want to change it to show the drag over blue highlight that line changes to the following:
My question is how do you know when a file is hovering over the dropzone to trigger the class swap?
Thanks for any guidance.
<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.