Skip to content

Commit

Permalink
Redesign upload file for student
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehul-m-prajapati
mehul-m-prajapati committed Nov 3, 2024
1 parent 5389e5a commit 694f09e
Showing 1 changed file with 45 additions and 40 deletions.
85 changes: 45 additions & 40 deletions public/upload_file.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,70 @@
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/uploadfile.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<title>Paper Upload</title>
<style>
.upload-section {
margin: 50px 0;
text-align: center;
}
.upload-icon {
font-size: 50px;
color: #007bff;
}
.status-message {
margin: 20px 0;
font-size: 18px;
color: rgb(242, 16, 16);
}
#uploadedFilesContainer {
margin-top: 40px;
}
</style>
</head>

<body>
<div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
<script>
window.gtranslateSettings = {
default_language: "en",
detect_browser_language: true,
wrapper_selector: ".gtranslate_wrapper",
font_size: 100,
};
</script>
<script
src="https://cdn.gtranslate.net/widgets/latest/popup.js"
defer
></script>
<section>
<h2>Upload Research files</h2>
<div class="first-div">
<div class="container">
<h2 class="mt-5 text-center">Upload Research Files</h2>

<div class="upload-section">
<div class="form">
<form enctype="multipart/form-data" id="uploadForm">
<div class="form-group">
<p style="display: inline-block;">
<!--
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, repudiandae exercitationem inventore
veniam vel illum rerum laudantium itaque vero beatae dolor, quam illo commodi omnis quibusdam repellendus
expedita? Ab, mollitia!
</p>
<div id="status" style="display: none; margin: 0; padding: 0px; font-size: 21px;">
<b style="color: rgb(242, 16, 16);">File Uploaded successfully</b>
</p> -->
<div id="status" class="status-message" style="display: none;">
<b>File Uploaded successfully</b>
</div>
<label for="exampleFormControlFile1">Upload Files:</label>
<input type="file" name="file" required>
<button type="button" onclick="uploadFile()">Upload</button>
<label for="fileInput" class="form-label">Upload Files:</label>
<input type="file" name="file" id="fileInput" class="form-control" required>
<button type="button" class="btn btn-primary mt-3" onclick="uploadFile()">Upload</button>
</div>
</form>
</div>
<div class="img">
<i class="fa-solid fa-cloud-arrow-up"></i>
</div>
</div>
</section>

<div id="uploadedFilesContainer">
<h2>Uploaded Research Files</h2>
<button id="viewButton" class="view" onclick="fetchUploadedFiles()">View</button>
<div id="uploadedFilesList" style="display: none;"></div> <!-- Container for uploaded files -->
<div id="uploadedFilesContainer">
<h2>Uploaded Research Files</h2>
<button id="viewButton" class="btn btn-secondary" onclick="fetchUploadedFiles()">View</button>
<div id="uploadedFilesList" style="display: none;" class="mt-3"></div> <!-- Container for uploaded files -->
</div>
</div>

<script>
const token = localStorage.getItem('accessToken');
if (!token) {
window.location.href = '/';
}

async function uploadFile() {
const form = document.getElementById('uploadForm');
const status = document.getElementById('status');
const token = localStorage.getItem('accessToken');
const headers = new Headers();
headers.append('Authorization', `Bearer ${token}`);
const formData = new FormData(form);
Expand All @@ -80,12 +84,10 @@ <h2>Uploaded Research Files</h2>
setTimeout(() => {
status.style.display = 'none';
}, 2000);
}
else if (response.status === 401) {
} else if (response.status === 401) {
status.innerHTML = "You have already uploaded one Research Paper";
status.style.display = 'block'; // Show error message
}
else {
} else {
console.log("Failed to upload file");
}
} catch (error) {
Expand All @@ -95,7 +97,6 @@ <h2>Uploaded Research Files</h2>
}

async function fetchUploadedFiles() {
const token = localStorage.getItem('accessToken');
const headers = new Headers();
headers.append('Authorization', `Bearer ${token}`);
try {
Expand All @@ -108,16 +109,18 @@ <h2>Uploaded Research Files</h2>
const result = await response.json();
const uploadedFilesList = document.getElementById('uploadedFilesList');
const ul = document.createElement('ul');
ul.classList.add('list-group');

// Clear previous list items
ul.innerHTML = ''; // Clear previous list items
ul.innerHTML = '';

const files = result.filenames;
const filepaths = result.filepaths;

// Loop through the files and create list items
files.forEach((file, index) => {
const li = document.createElement('li');
li.classList.add('list-group-item');
const link = document.createElement('a');
link.href = filepaths[index];
link.target = "_blank";
Expand Down Expand Up @@ -151,6 +154,8 @@ <h2>Uploaded Research Files</h2>
viewButton.setAttribute('onclick', 'fetchUploadedFiles()'); // Reset the button's action
}
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
</html>

0 comments on commit 694f09e

Please sign in to comment.