This commit is contained in:
Unknown 2024-05-10 15:59:36 -07:00
parent e9550e347b
commit 5262684f20
5 changed files with 116 additions and 33 deletions

43
Pages/Callback.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>Authorization Callback</title>
<script>
// Parse the authorization code from the URL
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
// Exchange the authorization code for an access token
fetch('https://login.microsoftonline.com/common/oauth2/v2.0/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
'client_id': 'c91a3691-c800-4aed-9e85-1a2c896327de',
'scope': 'Files.ReadWrite.All',
'code': code,
'redirect_uri': 'http://localhost:5500/Pages/upload.html',
'grant_type': 'authorization_code',
'client_secret': 'ddba6e4e-62b1-4a13-b165-08b00ef6723f'
})
})
.then(response => response.json())
.then(data => {
// Save the access token and optionally the refresh token
const accessToken = data.access_token;
const refreshToken = data.refresh_token;
// Use the access token to make API requests
console.log('Access Token:', accessToken);
console.log('Refresh Token:', refreshToken);
})
.catch(error => console.error('Error:', error));
</script>
</head>
<body>
<p>Authorization successful. You can close this window.</p>
</body>
</html>

View file

@ -30,7 +30,7 @@
<div id="navbar"></div>
<h1></h1>
<h1>Shuffled Photos and Videos</h1>
<div id="mediaContainer"></div>
<div id="photoGallery"></div>
<script src="/Pages/showcase.js"></script>
</body>

View file

@ -1,21 +1,37 @@
async function fetchMedia() {
const response = await fetch("/media");
const media = await response.json();
shuffle(media);
const mediaContainer = document.getElementById("mediaContainer");
media.forEach((item) => {
const element = document.createElement("img"); // For images
// const element = document.createElement('video'); // For videos
element.src = item.url;
mediaContainer.appendChild(element);
});
}
window.addEventListener('load', function() {
var photoGallery = document.getElementById('photoGallery');
function shuffle(array) {
// You need to implement the OneDrive API to fetch the uploaded photos here
Example:
fetch('https://graph.microsoft.com/v1.0/me/drive/root:/Photos', {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + accessToken
}
})
.then(response => response.json())
.then(data => {
data.value.forEach(photo => {
var img = document.createElement('img');
img.src = photo.thumbnailUrl; // or photo.webUrl, depending on your requirements
photoGallery.appendChild(img);
});
})
.catch(error => console.error('Error:', error));
// For demonstration purpose, here's some sample code to display shuffled photos
var photos = ['photo1.jpg', 'photo2.jpg', 'photo3.jpg']; // Replace with actual photo URLs
shuffleArray(photos);
photos.forEach(photo => {
var img = document.createElement('img');
img.src = photo;
photoGallery.appendChild(img);
});
});
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
fetchMedia();

View file

@ -29,13 +29,22 @@
<div id="navbar"></div>
<h1></h1>
<h1></h1>
<h1>Upload Photos and Videos</h1>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput" multiple />
<button type="submit">Upload</button>
</form>
<a
href="https://login.microsoftonline.com/common/oauth2/v2.0/authorize?
client_id=c91a3691-c800-4aed-9e85-1a2c896327de
&response_type=code
&grant_type=authorization_code
&redirect_uri=http://localhost:5500/Pages/Callback.html
&scope=openid%20offline_access%20Files.ReadWrite.All"
target="_blank"
>
Click here to sign in with Microsoft
</a>
<h1>Upload Photos to OneDrive</h1>
<input type="file" id="fileInput" accept="image/*" />
<button id="uploadButton">Upload</button>
<script src="/Pages/upload.js"></script>
<script src="upload.js"></script>
<!-- Footer -->
<div id="socials"></div>
</body>

View file

@ -1,13 +1,28 @@
document.getElementById("uploadForm").addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData();
const files = document.getElementById("fileInput").files;
for (let i = 0; i < files.length; i++) {
formData.append("files", files[i]);
document.getElementById('uploadButton').addEventListener('click', function() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
if (file) {
var formData = new FormData();
formData.append('file', file);
// Include access token in the request header
var accessToken = '0.ARwAw2-U4FdM706UscGv35A33ZE2GskAyO1KnoUaLIljJ97OAKE.AgABBAIAAADnfolhJpSnRYB1SVj-Hgd8AgDs_wUA9P-hUr5BU4lmnr4DEs3ouZjfl75d0wqoBoJGS_R9hgiFpCdVlC4HawyM5-B0iFUcA-z-QU8vxUK4aU8m-0zBm6UEZpWjZViQqJUoUQX0IC1DASg0P7w8_t9N77tcvm-8edmYqDchaRM3DFZsDCukNneKZuvRQEPDItZLguMG9U0T2YEG5tGRzjRnWla67XcbO7XxgkBh-mK4BpxNzNczNF54SShx8NAEz323Ye69oJb8S5bKmN2GSuBYgfgOUBzAzOwiVmE4KwZKIDxVObzC2ynX84Oiv32u4xKAtQYKoPykJCDoTdl7RRuyYOcq-dTq9nTHXzU8GuV0RFhYkqwP6q5bhCeCRCxQdnpei4KR-c8MesEC6Fl37tDwGgrf_ZWk8ldOrD8ld7NnjKa6V_LX8mDSCRB_yOdtLBOrKLDcSik4CCQxLPzDX0BrWc-MGF9Z4YjJSWNR6rPeF3wpEGI5vCFa7TPwojJsAG-Y5aE3qXbSkOe_Y-Z5iqJapnUWA7iIfLRROg97Fam4HUFKMLaA1lKmAbsDJi9Bbo7mvW1If2frASNiQ5gtJ5_UHojgiQS1Uj0KqPzkT3giqlHaIP96qXfWpteQdnhgM1kKpIqlbbETtvCDxzTEqIGwrhXZM3t80lp9w0v3eRtr3YeF4exwj0eSWz8LqOxitbsCzjOfbItOIOdQm407-udFqf0aiWRntkuEeWlhlfhWIR_2KGivnuSCiJdayM8ENsDI8MZDNU8NrPiuFOCu01NKyNzTOyIKu6Zbj6WTohVi2aYUL7oWy0G4zOCAQvOgsj9icEbolFttUL-_Ac5ISskzFbHXJnWrljK3FVjhDgCjWcMJOYJIUYaJxO6pPcyJHR_Q2vMXRWEkFuyyLARzP0ZBjevOKzS4YCN7HJLx6_c4W6CygOO3vNoYIJDt5iWCOHt__aD-XmgLbvgLDIczVFLWGPDd7Ddtql_GdvSPTONs8sO_5NAzwQNHwH2_odiz'; // Replace with your actual access token
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.');
}
await fetch("/upload", {
method: "POST",
body: formData,
});
alert("Files uploaded successfully!");
});