feat: add Drag-and-Drop File Upload Component (#1201)

[Pcmhacker-piro]

Closes #1201

Pull Request Description

Adds a drag-and-drop file upload component in submissions/examples/file-upload/ with 5 animated visual states: idle (dashed border), drag-over (scale + glow), uploading (indeterminate progress bar), success (pop-in checkmark), and error (shake). Includes file type/size validation via inline JavaScript.

---

Type of Change

• 🧩 New component

---

Submission Checklist

• All changes are inside submissions/examples/file-upload/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A styled drag-and-drop file upload zone with animated visual states for idle, drag-over, uploading, success, and error.

How does a developer use it?

<div class="ease-file-upload" role="button" tabindex="0">
  <svg class="ease-upload-icon">...</svg>
  <span class="ease-upload-text">Drag & drop files here or click to browse</span>
  <span class="ease-upload-hint">Supports PNG, JPG, WebP, PDF (max 5MB)</span>
  <div class="ease-upload-progress">
    <div class="ease-upload-progress-bar"></div>
  </div>
</div>
JS handles drag events, file validation, and state class toggling (see demo.html).
Why does it fit EaseMotion CSS?
Five distinct animated states with ease- prefixed keyframes: ease-kf-upload-float, ease-kf-upload-pulse, ease-kf-upload-pop-check, ease-kf-upload-shake, and ease-kf-upload-progress-indeterminate. Smooth transitions and respects prefers-reduced-motion.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
This component requires minimal JavaScript for drag events, file validation, and state transitions. The CSS is fully self-contained — the JS only adds/removes state classes. Supports multiple files and accept attribute filtering.

Closes #1201

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/file-upload

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[Pcmhacker-piro]

heyy @SAPTARSHI-coder
i fixed the assigned issue so pls check thsi