skeleton for home, upload, download page
skeleton for home, upload, download page
This commit is contained in:
Benjamin Loh
parent
fc4979e13f
commit
61f51f9e1e
|
|
@ -4,7 +4,9 @@ import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
|
|||
import './index.css';
|
||||
//import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import ShareFile from "./pages/shareFile";
|
||||
import HomePage from "./pages/home";
|
||||
import DownloadFile from "./pages/downloadFile";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
|
|
@ -14,6 +16,8 @@ root.render(
|
|||
<Router>
|
||||
<Routes>
|
||||
<Route path='*' element={<HomePage/>}/>
|
||||
<Route path='/upload' element={<ShareFile/>}/>
|
||||
<Route path='/download' element={<DownloadFile/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function DownloadFile() {
|
||||
const [passcode, setPasscode] = useState('');
|
||||
const [fileData, setFileData] = useState(null);
|
||||
|
||||
const handlePasscodeChange = (e) => {
|
||||
setPasscode(e.target.value);
|
||||
};
|
||||
|
||||
const handleDownloadFile = () => {
|
||||
if (passcode) {
|
||||
// Send an API request to your backend with the passcode
|
||||
axios.get(`http://127.0.0.1:8000/api/files/${passcode}`, { responseType: 'blob' })
|
||||
.then((response) => {
|
||||
// Create a blob from the response data
|
||||
const blob = new Blob([response.data], { type: response.headers['content-type'] });
|
||||
|
||||
// Create a URL for the blob
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
// Create a temporary anchor element for downloading the file
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'downloaded-file.txt'; // Specify the filename
|
||||
a.click();
|
||||
|
||||
// Revoke the URL to release resources
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch((error) => {
|
||||
// Handle errors, e.g., show an error message
|
||||
console.error('File download failed', error);
|
||||
});
|
||||
} else {
|
||||
// Handle the case when passcode is null or empty
|
||||
console.error('Passcode is required.');
|
||||
// You can show an error message or take other actions as needed.
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
<Link to="/" className="absolute top-2 right-2 text-gray-600 text-sm hover:text-blue-600">
|
||||
Back
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold mb-4">Download File</h1>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Enter Passcode:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={passcode}
|
||||
onChange={handlePasscodeChange}
|
||||
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
|
||||
/>
|
||||
</div>
|
||||
<button onClick={handleDownloadFile} className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg w-full">
|
||||
Download File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DownloadFile;
|
||||
|
|
@ -1,31 +1,24 @@
|
|||
import React, {useState} from 'react';
|
||||
import {FileUploader} from "react-drag-drop-files";
|
||||
import axios from "axios";
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom'; // Assuming you're using React Router for navigation
|
||||
|
||||
function HomePage() {
|
||||
const [file, setFile] = useState(null);
|
||||
const handleChange = (file) => {
|
||||
setFile(file);
|
||||
console.log(file);
|
||||
if (file) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// Send POST request to backend API using Axios
|
||||
axios.post('http://127.0.0.1:8000/api/files/', formData)
|
||||
.then(response => {
|
||||
// Handle a successful response from the server
|
||||
console.log('File uploaded successfully');
|
||||
})
|
||||
.catch(error => {
|
||||
// Handle errors here
|
||||
console.error('File upload failed', error);
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
return (
|
||||
<FileUploader handleChange={handleChange} name="file"/>
|
||||
<div className="h-screen flex flex-col items-center justify-center bg-gray-100">
|
||||
<div className="text-3xl text-gray-800 text-center my-10">SafeShare</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<Link to="/upload" className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 mx-2 rounded-lg w-48">
|
||||
Upload a File
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/download" className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 mx-2 rounded-lg w-48">
|
||||
Download a File
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FileUploader } from 'react-drag-drop-files';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function ShareFile() {
|
||||
const [file, setFile] = useState(null);
|
||||
const [passcode, setPasscode] = useState('');
|
||||
|
||||
const handleFileUpload = (file) => {
|
||||
setFile(file);
|
||||
setPasscode('1234');
|
||||
if (file) {
|
||||
const formData = new FormData();
|
||||
formData.append('files', file);
|
||||
|
||||
// Send POST request to the backend API using Axios
|
||||
axios.post('http://127.0.0.1:8000/api/files/', formData)
|
||||
.then(response => {
|
||||
// Handle a successful response from the server
|
||||
setPasscode(response.data.passcode);
|
||||
})
|
||||
.catch(error => {
|
||||
// Handle errors here
|
||||
console.error('File upload failed', error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 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>
|
||||
// );
|
||||
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">
|
||||
<Link to="/" className="absolute top-2 right-2 text-gray-600 text-sm hover:text-blue-600">
|
||||
Back
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold mb-4">Share a file with others!</h1>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShareFile;
|
||||
Loading…
Reference in New Issue