Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Redesign upload file for student/researcher #383

Closed
wants to merge 1 commit into from
Closed

Redesign upload file for student/researcher #383

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 45 additions & 40 deletions public/upload_file.html
View file
Open in desktop
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>