myxelium/RandomMemerBot
1
0
Fork 0
mirror of https://github.com/Myxelium/RandomMemerBot.git synced 2026-04-11 09:39:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

added web sound upload

Browse Source
This commit is contained in:
Myx
2023-10-05 21:37:47 +02:00
parent a991164148
commit 8818de5f43
7 changed files with 1014 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
client/web/client.js Normal file
View File

@@ -0,0 +1,46 @@
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
var fileInput = document.getElementById('myFile');
var file = fileInput.files[0];
var objectURL = URL.createObjectURL(file);
var audio = new Audio(objectURL);
audio.addEventListener('loadedmetadata', function() {
var duration = audio.duration;
console.log(duration);
if (duration > 10) {
alert('File is longer than 10 seconds.');
return;
}
if (file.size > 1024 * 1024) {
alert('File is larger than 1MB.');
return;
}
if (file.name.split('.').pop().toLowerCase() !== 'mp3') {
alert('Only .mp3 files are allowed.');
return;
}
var formData = new FormData();
formData.append('myFile', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
console.log(data);
alert('File uploaded successfully.');
})
.catch(error => {
console.error(error);
alert('An error occurred while uploading the file.');
});
});
});

32
client/web/index.html Normal file
View File

@@ -0,0 +1,32 @@
<html>
<head>
<!--
ugly interface just messing around with new style frameworks every new project or so
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RandomMemer upload sounds</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css" crossorigin="anonymous">
</head>
<body style="background-color: #333;">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center-middle" style="height: 100vh;">
<div class="cell small-12 medium-6 large-4">
<form id="uploadForm" enctype="multipart/form-data">
<div class="callout">
<h3>Upload Sound</h3>
<div class="input-group">
<span class="input-group-label">File:</span>
<input class="input-group-field" type="file" id="myFile">
</div>
<button class="button expanded" type="submit">Upload</button>
</div>
</form>
</div>
</div>
</div>
<script src="client.js"></script>
</body>
</html>