From b5090c02ead132d5e827cdf1ca5e8dd7865aa66c Mon Sep 17 00:00:00 2001
From: D3visionNL <dnwebdesignyt@gmail.com>
Date: Tue, 29 Nov 2022 22:16:11 +0100
Subject: [PATCH] Intense pain - Fixed pfp upload text

---
 src/css/index.css | 19 ++++++++++++++++---
 src/pages/Home.js | 19 ++++++++++++++-----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/css/index.css b/src/css/index.css
index 83650bf..5230c24 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -670,17 +670,18 @@ body:before{
 .drop-container {
   position: relative;
   display: flex;
-  gap: 10px;
+  gap: 2px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 200px;
+  min-height: 200px;
   padding: 20px;
   border-radius: 10px;
   border: 2px dashed #555;
   color: var(--font-color);
   cursor: pointer;
   transition: background .2s ease-in-out, border .2s ease-in-out;
+  flex-wrap: nowrap;
 }
 
 .drop-container:hover {
@@ -697,7 +698,7 @@ body:before{
 }
 
 .drop-title {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: bold;
   text-align: center;
   transition: color .2s ease-in-out;
@@ -708,6 +709,7 @@ input[type=file] {
   max-width: 100%;
   padding: 5px;
   border: none !important;
+  display: none !important;
 }
 
 input[type=file]::file-selector-button {
@@ -728,4 +730,15 @@ input[type=file]::file-selector-button {
 
 input[type=file]::file-selector-button:hover {
   opacity: .8;
+}
+
+.fileName:empty{
+  display: none;
+}
+.fileName{
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+.f-b0{
+  flex-basis: 0px !important;
 }
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 7697910..1fe1182 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -86,6 +86,7 @@ const Profile = () => {
     const [user] = useLoginContext();
     const [file, setFile] = useState(null);
     const fileSelector = useRef();
+    const [fileName, setFileName] = useState(null);
     const [error, setError] = useState(null);
 
     // For some reason this has to be done for onDrop to work
@@ -100,10 +101,16 @@ const Profile = () => {
         if (!dataTransfer.files.length) return;
         
         const [file] = dataTransfer.files;
-        fileSelector.value = file.name;
+        console.log(file.name);
+        setFileName(`Selected: ${file.name}`);
         setFile(file);
     };
 
+    const fileGarbage = (event) => {
+        setFile(event.target.files[0]);
+        setFileName(`Selected: ${event.target.files[0].name}`);
+    };
+
     const submit = async ({target: button}) => {
         button.disabled = true;
         if (!file) return;
@@ -127,13 +134,15 @@ const Profile = () => {
                     <p><b>Profile Picture</b></p>
                     <img width={256} height={256} src={`/api/users/${user.id}/avatar`} />
                 </div>
-                <div className="f-g">
+                <div className="f-g f-b0">
                     <p><b>Change Profile Picture</b></p>
-                    <form className="f-g">
+                    <form className="f-g f-b0">
                         <label onDrop={onDrop} onDragOver={onDragOver} htmlFor="pfp_upload" className="drop-container">
-                            <span className="drop-title">Drop your file here</span>
+                            <span className="drop-title">Drag &apos;n&apos; drop a file here</span>
                             or
-                            <input ref={fileSelector} onChange={(event) => setFile(event.target.files[0])}
+                            <span className="drop-title">Click to select a file</span>
+                            <p className="fileName m-0">{fileName}</p>
+                            <input ref={fileSelector} onChange={(event) => fileGarbage(event)}
                                 type="file" id="pfp_upload" accept="image/*" required></input>
                         </label>
                         <button onClick={submit} className="button primary mt-3">Submit</button>