devoalda
/
Safe_Share
mirror of https://github.com/Devoalda/Safe_Share.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Devoalda 2023-10-23 19:24:00 +08:00
parent d51f3725dd
commit a22fea30df
3 changed files with 51 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
safeshare/safeshare-frontend/src/pages/downloadFile.js
View File

@ -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.name;
a.download = response.data.filename;
// Trigger a click event on the anchor element to simulate a download
a.click();

62
safeshare/safeshare-frontend/src/pages/shareFile.js
View File

@ -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)
.then(response => {
axios
.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 (
// <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">
// <h1 className="text-2xl font-bold mb-4">Safe-Share</h1>
// <label className="block text-sm font-medium text-gray-700 mb-2">
// Upload a File
// </label>
// <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>
// );
const showNotification = (message) => {
setNotification(message);
// Automatically close the notification after 2 seconds
setTimeout(() => {
setNotification('');
}, 2000);
};
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>
);

14
safeshare/safeshare_app/views/file.py
View File

@ -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)