-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
148 lines (134 loc) · 6.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File upload and download system</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">System to upload a file to GitHub</span>
</a>
<ul class="nav nav-pills">
<!-- <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">About Project</a></li> -->
<!-- <li class="nav-item"><a href="#" class="nav-link">How to use</a></li> -->
</ul>
</header>
</div>
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<!-- <div class="col-10 col-sm-8 col-lg-6">
<!-- <img src="./images/AI.jpg" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> -->
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Project Description</h1>
<p class="lead">A tool to upload files directly into the GitHub Repository </p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<!-- Upload File Button -->
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2" id="uploadFileButton">Upload File</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-4" id="downloadFileButton">Download File <img src="./images/download.svg" alt=""></button>
<!-- View GitHub Repo Button - Initially Hidden -->
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2" id="viewRepoButton" style="display: none;">View GitHub Repo</button>
</div>
<!-- Hidden Form for File Upload -->
<form id="uploadForm" style="display:none;">
<input type="file" id="fileInput" name="file" accept="*/*">
</form>
<!-- Message Div -->
<div id="message" class="mt-3"></div>
</div>
</div>
</div>
<div class="container px-4 py-5" id="featured-3">
<h2 class="pb-2 border-bottom">Project Features</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<img src="./images/upload.svg" height="30" alt="">
</div>
<h3 class="fs-2 text-body-emphasis">File Upload</h3>
<p>"Uploads file directly into the root of the repository of the GitHub account by using its API Token"</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<img src="./images/download.svg" height="30" alt="">
</div>
<h3 class="fs-2 text-body-emphasis">File Download</h3>
<p>"Downloads a file directly from the root of the repository of the GitHub account"</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<img src="./images/chat-square-heart.svg" height="30" alt="">
</div>
<h3 class="fs-2 text-body-emphasis">Future Scope</h3>
<p>"In the future, we aim to integrate this with an AI model to process the data from the file and obtain some useful results."</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
document.getElementById('uploadFileButton').addEventListener('click', function() {
document.getElementById('fileInput').click();
});
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file); // Name updated to 'file'
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById('message').textContent = data;
document.getElementById('message').classList.add('alert', 'alert-success');
// Show the "View GitHub Repo" button after a successful upload
const viewRepoButton = document.getElementById('viewRepoButton');
viewRepoButton.style.display = 'inline-block'; // Show the button
viewRepoButton.addEventListener('click', function() {
window.location.href = 'https://github.com/vismaywalde/File-Upload-and-Download-System';
});
})
.catch(error => {
console.error('Error:', error);
document.getElementById('message').textContent = 'File upload failed';
document.getElementById('message').classList.add('alert', 'alert-danger');
});
}
});
document.getElementById('downloadFileButton').addEventListener('click', function (event) {
event.preventDefault();
fetch('/download', {
method: 'GET'
})
.then(response => {
if (response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.');
})
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'file'; // This will be the name of the downloaded file
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('Error:', error);
alert('Download failed');
});
});
</script>
</body>
</html>