256 Kilobytes

Answers in Client-Side | By August R. Garcia


138 views, 1 RAM, and 0 comments

Tags: HTML, JavaScript, Forms, File Inputs

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Easiest solution I found was to add a custom attribute based on ondrag[something] events and to then use a CSS attribute selector:

  // ===== Drag-and-Drop Functionality ===== // 
  el = document.getElementById("some_id"); 
  el.ondragover  = function(e) { e.preventDefault(); this.setAttribute("data-drag-and-drop-state", "ondragover" );  }; 
  el.ondragenter = function(e) { e.preventDefault(); this.setAttribute("data-drag-and-drop-state", "ondragover" );  }; 
  el.ondragleave = function(e) { e.preventDefault(); this.setAttribute("data-drag-and-drop-state", ""           );  }; 
  el.ondrop      = function(e) { e.preventDefault(); this.setAttribute("data-drag-and-drop-state", ""           );  };

  .custom-file-input[data-drag-and-drop-state="ondragover" ] { background-color: green; }

This code is only an implementation for CSS effects; include other code where applicable to actually handle the file drop and so on.

Users Who Have Downloaded More RAM:
Hash Brown (7 months ago)
🐏 ⨉ 1
Posted by August R. Garcia 7 months ago 🕓 Posted at 26 November, 2019 11:27 AM PST

Sir, I can do you a nice SEO.

Post a New Comment

Do you like having a good time?

Register an Account

You can also login to an existing account or reset your password. All use of this site is subject to the terms of service and privacy policy.

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account

Answers— Read More

Find more related content below!