Team_Website/Pages/upload.html
Unknown 373116f6ce a
2024-05-20 09:38:08 -07:00

176 lines
6.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="icon"
type="image/x-icon"
href="/Resources/Favicons/favicon.png"
/>
<link rel="stylesheet" href="/Pages/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
window.addEventListener("message", function (event) {
if (event.origin !== "http://localhost:5500") {
return;
}
const { accessToken } = event.data;
if (accessToken) {
// Store access token in local storage
localStorage.setItem("accessToken", accessToken);
updateAccessTokenDisplay();
}
});
// Function to update the access token display
function updateAccessTokenDisplay() {
// Retrieve access token from local storage
const accessToken = localStorage.getItem("accessToken");
// Update the access token display
document.getElementById("accessTokenDisplay").innerText =
accessToken || "Access token is not set.";
}
// Function to handle sign-in with Microsoft
function signInWithMicrosoft() {
window.open(
"https://login.microsoftonline.com/common/oauth2/v2.0/authorize?" +
"client_id=c91a3691-c800-4aed-9e85-1a2c896327de" + // Replace with your client ID
"&response_type=code" +
"&redirect_uri=http://localhost:5500/Pages/Callback.html" + // Replace with your redirect URI
"&scope=openid%20offline_access%20Files.ReadWrite.All",
"_blank"
);
}
// Function to handle logout
function logout() {
// Clear access token from local storage
localStorage.removeItem("accessToken");
// Open the logout endpoint in a new window
window.open(
"https://login.microsoftonline.com/common/oauth2/v2.0/logout" +
"?post_logout_redirect_uri=http://localhost:5500/Pages/logout.html",
"_blank"
);
}
// Function to upload file
function uploadFile() {
const fileInput = document.getElementById("fileInput");
const file = fileInput.files[0];
if (file) {
const formData = new FormData();
formData.append("file", file);
// Retrieve access token from local storage
const accessToken = localStorage.getItem("accessToken");
if (!accessToken) {
alert("Access token not found. Please sign in again.");
return;
}
fetch(
"https://graph.microsoft.com/v1.0/me/drive/root:/Photos/" +
file.name +
":/content",
{
method: "PUT",
body: formData,
headers: {
Authorization: "Bearer " + accessToken,
},
}
)
.then((response) => {
if (response.ok) {
alert("File uploaded successfully!");
} else {
alert("Error uploading file!");
}
})
.catch((error) => console.error("Error:", error));
} else {
alert("Please select a file to upload.");
}
}
// Function to preview the selected image
function previewImage() {
const fileInput = document.getElementById("fileInput");
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
document.getElementById("previewImage").src =
e.target.result;
document.getElementById("previewImage").style.display =
"block";
};
reader.readAsDataURL(file);
}
}
window.addEventListener("DOMContentLoaded", (event) => {
fetch("/Pages/navbar.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("navbar").innerHTML = data;
});
fetch("/Pages/socials.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("socials").innerHTML = data;
});
// Update access token display
updateAccessTokenDisplay();
// Listen for changes in local storage (e.g., when access token is updated)
window.addEventListener("storage", function (event) {
if (event.key === "accessToken") {
updateAccessTokenDisplay();
}
});
});
</script>
</head>
<body>
<!--Navigation Bar-->
<div id="navbar"></div>
<h1></h1>
<h1>Upload Photos</h1>
<button
class="button-style"
onclick="document.getElementById('fileInput').click()"
>
Choose File to Upload
</button>
<input
type="file"
id="fileInput"
accept="image/*"
style="display: none"
onchange="previewImage()"
/>
<button class="middle-button-style" onclick="uploadFile()">Send</button>
<img
id="previewImage"
class="centered-image"
style="display: none; max-width: 300px"
/>
<button class="button-style" onclick="signInWithMicrosoft()">
Click here to sign in with Microsoft
</button>
<!-- Logout button -->
<button class="button-style" onclick="logout()">Log out</button>
<!-- Access Token Display -->
<h1>Access Token:</h1>
<div id="accessTokenDisplay"></div>
<!-- Footer -->
<div id="socials"></div>
</body>
</html>