uploading avatars functionality

src/pages/Home.js

@@ -84,6 +84,39 @@ const ThirdPartyConnections = ({user}) => {
 const Profile = () => {
 
     const [user] = useLoginContext();
+    const [file, setFile] = useState(null);
+    const fileSelector = useRef();
+    const [error, setError] = useState(null);
+
+    // For some reason this has to be done for onDrop to work
+    const onDragOver = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+
+    const onDrop = (event) => {
+        event.preventDefault();
+        const { dataTransfer } = event;
+        if (!dataTransfer.files.length) return;
+        
+        const [file] = dataTransfer.files;
+        fileSelector.value = file.name;
+        setFile(file);
+    };
+
+    const submit = async ({target: button}) => {
+        button.disabled = true;
+        if (!file) return;
+
+        const body = new FormData();
+        body.set('file', file, file.name);
+        // body.set('name', file.name);
+        
+        const response = await post('/api/user/avatar', body, { headers: null });
+        if (!response.success) setError(response.message);
+        else fileSelector.current.value = null;
+        button.disabled = false;
+    };
 
     return <div className="row">
         
@@ -97,12 +130,13 @@ const Profile = () => {
                 <div className="f-g">
                     <p><b>Change Profile Picture</b></p>
                     <form className="f-g">
-                        <label htmlFor="pfp_upload" className="drop-container">
+                        <label onDrop={onDrop} onDragOver={onDragOver} htmlFor="pfp_upload" className="drop-container">
                             <span className="drop-title">Drop your file here</span>
                             or
-                            <input type="file" id="pfp_upload" accept="image/*" required></input>
+                            <input ref={fileSelector} onChange={(event) => setFile(event.target.files[0])}
+                                type="file" id="pfp_upload" accept="image/*" required></input>
                         </label>
-                        <button className="button primary mt-3">Submit</button>
+                        <button onClick={submit} className="button primary mt-3">Submit</button>
                     </form>
                 </div>
             </div>

src/util/Util.js

@@ -55,14 +55,23 @@ const parseResponse = async (response) => {
     return { ...base, message: await response.text() };
 };
 
-export const post = async (url, body) => {
-    const response = await fetch(url, {
+export const post = async (url, body, opts = {}) => {
+    
+    const options = {
         method: 'post',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(body)
-    });
+        body
+    };
+
+    if (opts.headers !== null) {
+        options.headers = {
+            'Content-Type': 'application/json',
+            ...opts.headers || {}
+        };
+    }
+
+    if (options.headers && options.headers['Content-Type'] === 'application/json' && body) options.body = JSON.stringify(body);
+
+    const response = await fetch(url, options);
     return parseResponse(response);
 };