Visual change when drag n dropping a file to the file upload field

Get Help
1

Hey all,

I was wondering if it is possible for a visual change to happen when you are dragging a file to the drag n drop field. Some CSS change or anything.

Let me know :slight_smile:

Thanks in advance!

2

Here’s the javascript code I use to add a custom class to any inputs that have been given a value. This then lets me target each of those and style with CSS however I like. Replace typewheel-valued with whatever you like. Note that this will allow styling the input after drag-and-drop has occurred—not during.

// Checks whether form inputs are filled and adds a targetable class if they have value
add_action( 'wp_footer', function () { ?>

   <script type="text/javascript">
      jQuery(document).ready( function() {
         function checkFilledInputs() {
            jQuery('textarea,input').each( function() { toggleFilledInputs(this); });
            jQuery('textarea,input').change( function() { toggleFilledInputs(this); });
         }

         function toggleFilledInputs(e) {
            if ( jQuery(e).val().trim().length > 0 ) {
               jQuery(e).addClass('typewheel-valued');
            } else {
               jQuery(e).removeClass('typewheel-valued');
            }
         }

         jQuery(document).bind('gform_post_render', function() { checkFilledInputs(); });
         
         checkFilledInputs();
      });
   </script>

<?php } );
1 Like