refactor(File Name + Qol Improvements):

Download file from frontend now downloads in correct file name + ext
Download link shows after successful upload
Key gets saved to clipboard automagically
alert to tell users of this feature

safeshare/safeshare-frontend/src/pages/downloadFile.js

@@ -27,8 +27,7 @@ function DownloadFile() {
                         // Create a dynamically generated anchor element
                         const a = document.createElement('a');
                         a.href = url;
-                        // TODO: Set the file name below
+                        a.download = response.data.filename;
-                        a.download = response.data.name;
 
                         // Trigger a click event on the anchor element to simulate a download
                         a.click();

safeshare/safeshare-frontend/src/pages/shareFile.js

@@ -6,6 +6,8 @@ import { Link } from 'react-router-dom';
 function ShareFile() {
     const [file, setFile] = useState(null);
     const [passcode, setPasscode] = useState('');
+    const [shareableLink, setShareableLink] = useState('');
+    const [notification, setNotification] = useState('');
 
     const handleFileUpload = (file) => {
         setFile(file);
@@ -17,42 +19,41 @@ function ShareFile() {
             //formData.append('ttl', "60");
 
             // Send POST request to the backend API using Axios
-            axios.post('http://127.0.0.1:8000/api/files/', formData)
+            axios
-                .then(response => {
+                .post('http://127.0.0.1:8000/api/files/', formData)
+                .then((response) => {
                     // Handle a successful response from the server, set passcode to "key" in the response body
                     const data = response.data;
 
                     // If data is an array, take the first item
                     if (Array.isArray(data)) {
-                        setPasscode(data[0].key);
+                        const passcode = data[0].key;
+                        setPasscode(passcode);
+                        // Copy the passcode to the clipboard
+                        navigator.clipboard.writeText(passcode).then(() => {
+                            // Show a notification
+                            showNotification('Copied to clipboard!');
+                        });
                     }
                 })
-                .catch(error => {
+                .catch((error) => {
                     // Handle errors here
                     console.error('File upload failed', error);
                 });
+            const baseUrl = 'http://localhost:3000/download/';
+            setShareableLink(baseUrl);
         }
     };
 
-    // return (
+    const showNotification = (message) => {
-    //     <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
+        setNotification(message);
-    //         <div className="border p-6 rounded-lg bg-white shadow-md w-96">
+
-    //             <h1 className="text-2xl font-bold mb-4">Safe-Share</h1>
+        // Automatically close the notification after 2 seconds
-    //             <label className="block text-sm font-medium text-gray-700 mb-2">
+        setTimeout(() => {
-    //                 Upload a File
+            setNotification('');
-    //             </label>
+        }, 2000);
-    //             <FileUploader handleChange={handleFileUpload} name="file" />
+    };
-    //             {passcode && (
+
-    //                 <div className="mt-4">
-    //                     <label className="block text-sm font-medium text-gray-700">
-    //                         Passcode:
-    //                     </label>
-    //                     <div className="text-lg font-bold text-blue-600">{passcode}</div>
-    //                 </div>
-    //             )}
-    //         </div>
-    //     </div>
-    // );
     return (
         <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
             <div className="border p-6 rounded-lg bg-white shadow-md w-96 relative">
@@ -69,6 +70,21 @@ function ShareFile() {
                         <div className="text-lg font-bold text-blue-600">{passcode}</div>
                     </div>
                 )}
+                {shareableLink && (
+                    <div className="mt-4">
+                        <label className="block text-sm font-medium text-gray-700">
+                            Download Here:
+                        </label>
+                        <a href={shareableLink} className="text-lg font-bold text-blue-600">{shareableLink}</a>
+                    </div>
+                )}
+                {notification && (
+                    <div className="mt-4">
+                        <div className="bg-blue-100 p-2 text-blue-800 rounded">
+                            {notification}
+                        </div>
+                    </div>
+                )}
             </div>
         </div>
     );

safeshare/safeshare_app/views/file.py

@@ -36,13 +36,19 @@ def manage_items(request, *args, **kwargs):
             filename = file.name
 
             # Convert file to bytes
-            file_content = file.read()
+            content = file.read()
 
             # Set with the provided TTL
-            cache.set(key, file_content, timeout=ttl)
+            cache.set(key,
+                      {
+                          'filename': filename,
+                          'content': content
+                      },
+                      timeout=ttl)
 
             response = {
                 'key': key,
+                'filename': filename,
                 'msg': f"{key} successfully set to {filename} with TTL {ttl} seconds"
             }
 
@@ -92,7 +98,8 @@ def manage_item(request, *args, **kwargs):
             if value:
                 response = {
                     'key': kwargs['key'],
-                    'file': value,
+                    'file': value['content'],
+                    'filename': value['filename'],
                     'msg': 'success'
                 }
                 return Response(response, status=200)
@@ -100,6 +107,7 @@ def manage_item(request, *args, **kwargs):
                 response = {
                     'key': kwargs['key'],
                     'file': None,
+                    'filename': None,
                     'msg': 'Not found'
                 }
                 return Response(response, status=404)