Aditish11/file-share
1
0
Fork 0
forked from Blaster4385/file-share
Code Pull requests Activity

feat: added initial frontend

Browse source
This commit is contained in:
Aditish51 2024-07-22 22:54:12 +05:30 committed by Blaster4385
parent 4016aa5800
commit 26cf8aa1cb
10 changed files with 538 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
client/Poppins-Light.ttf Normal file
View file

Binary file not shown.

BIN
client/Poppins-Medium.ttf Normal file
View file

Binary file not shown.

134
client/fileinfo.css Normal file
View file

@ -0,0 +1,134 @@
@font-face {
font-family: Poppins-Light ;
src: url(Poppins-Light.ttf);
}
@font-face {
font-family: Poppins-Medium;
src: url(Poppins-Medium.ttf);
}
*{
margin: 0px;
}
#navbar{
width: 2000px;
height: 100px;
background-color: #5bc703;
margin-top: 0px;
}
h1{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: rgb(253, 253, 253);
font-size: 50px;
margin-left: 50px;
margin-top: -80px;
}
body{
background-color: #383836;
}
#main{
background-color: #5bc703;
height: 400px;
width: 800px;
padding: 100px;
margin-left: 400px;
margin-top: 5%;
border-radius: 30px;
border: 4px dashed white;
}
#undiv1{
height: 200px;
width: 500px;
padding: 50px;
margin-left: 10px;
}
#undiv2{
height: 200px;
width: 600px;
padding: 20px;
margin-left: 70px;
margin-top: -70px;
}
#idInput{
font-size: 30px;
font-family: Poppins-Medium;
background-color: #f3f5f7;
border-radius: 10px;
border-color: #294F6A;
}
#lab1{
font-size: 30px;
color: white;
}
#keyInput{
font-size: 30px;
font-family: Poppins-Medium;
background-color: #f7f9fa;
border-radius: 10px;
border-color: #294F6A;
}
#lab2{
font-size: 30px;
color: white;
}
#btn1{
font-size: 20px;
border-radius: 10px;
padding: 10px 10px 10px 10px;
cursor: pointer;
background-color: #294F6A;
border-color: #294F6A;
margin-left: 100px;
}
#link{
color: antiquewhite;
text-decoration: solid;
}
#btn2{
font-size: 20px;
border-radius: 10px;
padding: 10px 10px 10px 10px;
cursor: pointer;
background-color: #294F6A;
border-color: #294F6A;
margin-left: -30px;
color: antiquewhite;
}
#fileInfo{
color: #5bc703;
height: 150px;
width: 800px;
background-color: #ffffff;
margin-top: 100px;
border-radius: 20px;
justify-content: center;
border: 3px dashed #5bc703;
font-size: 30px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: left;
padding: 40px 40px 40px 40px;
display: none;
}
#footer{
height: 100px;
background-color: #5bc703;
margin-top: 20%;
text-align: center;
color: rgb(247, 245, 242);
padding: 40px 40px 40px 40px;
}

43
client/fileinfo.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FILE SHARE</title>
<link rel="stylesheet" href="fileinfo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="navbar">
</div>
<h1> FILE SHARE </h1>
<div id="main">
<div id="undiv1">
<label for="idInput" id="lab1">Enter ID:</label>
<input type="text" id="idInput"><br><br>
<label for="keyInput" id="lab2">Enter Key:</label>
<input type="text" id="keyInput"><br><br>
</div>
<div id="undiv2">
<button id= "btn2" onclick="getID()">Fetch Data</button>
<button id="btn1"><a id="link"> Download</a></button>
</div>
<div id="fileInfo"> </div>
</div>
<footer id="footer"> @Fileshare</footer>
<script src="fileinfo.js"></script>
</body>
</html>

36
client/fileinfo.js Normal file
View file

@ -0,0 +1,36 @@
const fileInfo = document.querySelector("#fileInfo");
let link = document.getElementById('link')
async function getID() {
const id = document.getElementById('idInput').value;
const apiKey = document.getElementById('keyInput').value;
const baseURL1 = 'http://localhost:8080/get';
const baseURL2 = 'http://localhost:8080/download';
const url = `${baseURL1}/${id}?key=${apiKey}`;
link.href =`${baseURL2}/${id}?key=${apiKey}` ;
try {
let response = await fetch(url);
let data = await response.json();
fileName = data.fileName;
fileSize = data.fileSize;
fileInfo.innerHTML = `<b>File Name:</b> ${fileName}<br><br></b><b>File Size:</> </b>${fileSize}`;
fileInfo.style.display = 'block';
}
catch (error) {
console.error('Error fetching data:', error);
}
}

BIN
client/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.6 KiB

226
client/upload.css Normal file
View file

@ -0,0 +1,226 @@
@font-face {
font-family: Poppins-Light ;
src: url(Poppins-Light.ttf);
}
@font-face {
font-family: Poppins-Medium;
src: url(Poppins-Medium.ttf);
}
*{
margin-left: 0px;
margin-bottom: 100px;
margin-top: 0px;
}
body{
background-color:#383836;
display: flex;
}
#navbar{
width: 2000px;
height: 100px;
background-color: #5bc703;
margin-top: 0px;
}
#logo{
height: 90px;
width: 90px;
margin-top: 50px;
margin-left: 20px;
}
#uploader-title{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: rgb(249, 250, 253);
margin-left: -1950px;
margin-top: 20px;
font-size: 50px;
padding-left: 0px;
}
.file-uploader{
height: 550px;
width: 800px;
margin-top: 30%;
margin-left: 15%;
background-color:#5bc703;
border-radius: 30px;
padding: 2px;
border: 4px dashed white;
}
.file-instruction{
color: rgb(232, 241, 241);
margin-left: 50px;
font-family: "Poppins-Light";
font-size: 15px;
font-weight: lighter;
margin-top: 100px;
}
.file-upload-box{
height: 200px;
width: 300px;
margin-left: 230px;
margin-top: 100px;
margin-right: 500px;
background-color:#5bc703;
border: 2px dashed rgb(209, 209, 209);
border-radius: 30px;
padding: 20px;
}
.uploadsec{
margin-left: 100px;
margin-top: 30%;
}
#uploadbtn{
font-size: 25px;
min-width: max-content;
padding: 5px 30px 5px 30px ;
margin-left: -30px;
margin-top: 100px;
background-color:#294F6A;
border-radius: 20px;
color: white;
border-color:#294F6A ;
cursor: pointer;
}
#fileInput{
padding: 5px 30px 5px 30px ;
font-size: 17px;
margin-left: -70px;
margin-top: 30px;
color: white;
}
#i2{
margin-top: 500px;
padding-right: 50px;
margin-left: 200px;
color: blueviolet;
}
#i3{
margin-top: 600px;
padding-right: 50px;
margin-left: 300px;
color: blueviolet;
}
#boxmain{
margin-left: 400px;
font-size: 50px;
margin-top: 100px;
color: aliceblue;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-shadow: 3px 3px 4px rgb(73, 50, 73);
}
#pdnd{
color: #475c5a;
margin-left: 90px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#footer{
margin-top: 500px;
}
#myDropzone{
background-color: #294F6A;
border: #294F6A;
color: white;
font-size: 20px;
font-family: Poppins-Light;
}
.info1{
height: 50px;
width: 700px;
background-color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
padding-bottom: 20px;
margin-left: -600px;
border-radius: 25px;
text-align: center;
justify-content: center; /* Aligns horizontally */
align-items: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
display: none;
color: #437718;
padding: 10px 10px 10px 10px;
}
.info1v{
height: 50px;
width: 700px;
background-color: #ffffff;
margin-top: -100px;
margin-bottom: 100px;
padding-bottom: 20px;
margin-left: -600px;
border-radius: 25px;
text-align: center;
justify-content: center; /* Aligns horizontally */
align-items: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
display: block;
border: 3px dashed #5bc703;
text-align: left;
padding: 10px 10px 10px 10px;
color: #437718;
}
.info2{
height: 50px;
width: 700px;
background-color: #ffffff;
margin-top: -100px;
margin-left: 150px;
border-radius: 25px;
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
display: none;
color:#437718;
padding: 10px 10px 10px 10px;
}
.info2v{
height: 50px;
width: 700px;
background-color: #ffffff;
margin-top: -180px;
margin-left: 150px;
border-radius: 25px;
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
display: block;
border: 3px dashed #5bc703;
text-align: left;
padding: 10px 10px 10px 10px;
color: #437718;
}
#footer{
height: 100px;
background-color: #5bc703;
margin-top: 20%;
text-align: center;
color: rgb(252, 250, 247);
padding: 40px 40px 40px 40px;
}

38
client/upload.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
<link rel="stylesheet" href="upload.css">
<body>
<div id="navbar"></div>
<h2 id="uploader-title">FILE SHARE</h2>
<div id="main">
<div class="file-uploader">
<div class="uploader-header">
<h4 id="file-completed-status"></h4>
</div>
<ul class="file-list"></ul>
<div class="file-upload-box">
<h2 class="box-title">
</h2>
<div class="uploadsec">
<form id="uploadForm">
<input type="file" id="fileInput" name="file">
<button type="submit" id="uploadbtn" >Upload</button>
</form>
</div>
<div class="info1" id="info1h"></div>
<div class="info2" id="info2h"></div>
</div>
</div>
</div>
<script src="upload.js"></script>
</body>
</html>

51
client/upload.js Normal file
View file

@ -0,0 +1,51 @@
document.getElementById('uploadForm').addEventListener('submit', async (event) => {
event.preventDefault();
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
console.log('No file selected.');
return;
}
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('http://localhost:8080/upload', {
method: 'POST',
body: formData
});
const info1h = document.getElementById('info1h');
const info2h = document.getElementById('info2h');
if (response.ok) {
const contentType = response.headers.get('Content-Type');
if (contentType && contentType.includes('application/json')) {
const result = await response.json();
info1h.innerText = "id=" + result.id;
info2h.innerText = "key=" + result.key;
} else {
const result = await response.text();
info1h.innerText = result;
info2h.innerText = "";
}
info1h.classList.remove('info1');
info1h.classList.add('info1v');
info2h.classList.remove('info2');
info2h.classList.add('info2v');
} else {
info1h.innerText = response.statusText;
info1h.classList.remove('info1');
info1h.classList.add('info1v');
}
} catch (error) {
console.error('Error:', error);
}
});

10
server/main.go
View file

@ -6,6 +6,7 @@ import (
"crypto/cipher"
"crypto/rand"
"database/sql"
"embed"
"encoding/hex"
"errors"
"fmt"
@ -26,7 +27,16 @@ const (
var db *sql.DB
//go:embed all:dist
var dist embed.FS
func registerHandlers(e *echo.Echo) {
e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
Root: "dist",
Index: "upload.html",
HTML5: true,
Filesystem: http.FS(dist),
}))
e.Use(middleware.Logger())
e.Use(middleware.Recover())
e.Use(middleware.CORS())