diff --git a/src/components/FileDropComponent.jsx b/src/components/FileDropComponent.jsx
new file mode 100644
index 00000000..4a4c0b17
--- /dev/null
+++ b/src/components/FileDropComponent.jsx
@@ -0,0 +1,49 @@
+// FileDropComponent.js
+import React, { useEffect, useState } from 'react';
+import styles from './FileDropComponent.module.css';
+
+export default function FileDropComponent ({onFileDrop}){
+ const [isDragging, setIsDragging] = useState(false);
+
+ useEffect(() => {
+ const handleDrop = (event) => {
+ event.preventDefault();
+ setIsDragging(false);
+ console.log(onFileDrop);
+ const file = event.dataTransfer.files[0];
+ console.log('Dropped file:', file);
+ if (onFileDrop) {
+ onFileDrop(file);
+ }
+ };
+
+ const handleDragOver = (event) => {
+ event.preventDefault();
+ setIsDragging(true);
+ };
+
+ // Attach event listeners to the window
+ window.addEventListener('drop', handleDrop);
+ window.addEventListener('dragover', handleDragOver);
+
+ // Clean up event listeners on component unmount
+ return () => {
+ window.removeEventListener('drop', handleDrop);
+ window.removeEventListener('dragover', handleDragOver);
+ };
+ }, []);
+
+ const handleDragLeave = () => {
+ setIsDragging(false);
+ };
+
+ return (
+
+
+ );
+};
+
diff --git a/src/components/FileDropComponent.module.css b/src/components/FileDropComponent.module.css
new file mode 100644
index 00000000..26db7856
--- /dev/null
+++ b/src/components/FileDropComponent.module.css
@@ -0,0 +1,13 @@
+.dropArea {
+ height: 100vh;
+ width: 100vw;
+ border: '2px dashed #aaa';
+ background-size: cover;
+ text-align: 'center';
+ display: fixed;
+ flex-direction: column;
+ align-items: center;
+ overflow: hidden;
+ position: absolute;
+ z-index: 10000;
+}
\ No newline at end of file
diff --git a/src/pages/Appearance.jsx b/src/pages/Appearance.jsx
index 8691a159..0ed72b4e 100644
--- a/src/pages/Appearance.jsx
+++ b/src/pages/Appearance.jsx
@@ -7,6 +7,7 @@ import CustomButton from "../components/custom-button"
import { LanguageContext } from "../context/LanguageContext"
import { SoundContext } from "../context/SoundContext"
import { AudioContext } from "../context/AudioContext"
+import FileDropComponent from "../components/FileDropComponent"
function Appearance({
animationManager,
@@ -75,12 +76,20 @@ function Appearance({
// Translate hook
const { t } = useContext(LanguageContext)
+ const handleFileDrop = (file) => {
+ // Handle the dropped file as needed
+ console.log('Handling dropped file:', file);
+ };
+
return (
{t("pageTitles.chooseAppearance")}
+