Update se_mes_im2.html
Browse files- se_mes_im2.html +40 -10
se_mes_im2.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
|
| 8 |
<style>
|
| 9 |
body {
|
|
@@ -33,10 +33,12 @@
|
|
| 33 |
button[type="submit"]:hover {
|
| 34 |
background-color: #388E3C;
|
| 35 |
}
|
| 36 |
-
#
|
| 37 |
-
width: 300px;
|
| 38 |
-
height: 300px;
|
| 39 |
margin-top: 20px;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 40 |
}
|
| 41 |
#imageUrl {
|
| 42 |
margin-top: 20px;
|
|
@@ -48,11 +50,13 @@
|
|
| 48 |
</style>
|
| 49 |
</head>
|
| 50 |
<body>
|
| 51 |
-
<h1>Upload
|
| 52 |
-
<
|
|
|
|
|
|
|
| 53 |
<div id="imageUrl" onclick="copyToClipboard(this)">Click to copy URL</div>
|
| 54 |
<form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
|
| 55 |
-
<input type="file" name="
|
| 56 |
<button type="submit">Upload</button>
|
| 57 |
</form>
|
| 58 |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
|
@@ -71,16 +75,42 @@
|
|
| 71 |
throw new Error('Network response was not ok.');
|
| 72 |
})
|
| 73 |
.then(data => {
|
| 74 |
-
var image = document.getElementById("cameraImage");
|
| 75 |
var fullUrl = data.split('saved to ')[1];
|
| 76 |
-
image.src = fullUrl + "?" + new Date().getTime();
|
| 77 |
document.getElementById('imageUrl').innerText = fullUrl;
|
|
|
|
| 78 |
})
|
| 79 |
.catch(error => {
|
| 80 |
console.error('Error:', error);
|
| 81 |
});
|
| 82 |
});
|
| 83 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 84 |
function copyToClipboard(element) {
|
| 85 |
var tempInput = document.createElement("input");
|
| 86 |
tempInput.value = element.innerText;
|
|
@@ -89,7 +119,7 @@
|
|
| 89 |
document.execCommand("copy");
|
| 90 |
document.body.removeChild(tempInput);
|
| 91 |
Toastify({
|
| 92 |
-
text: "
|
| 93 |
duration: 3000,
|
| 94 |
gravity: "top",
|
| 95 |
position: "center",
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>File Upload</title>
|
| 7 |
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
|
| 8 |
<style>
|
| 9 |
body {
|
|
|
|
| 33 |
button[type="submit"]:hover {
|
| 34 |
background-color: #388E3C;
|
| 35 |
}
|
| 36 |
+
#mediaContainer {
|
|
|
|
|
|
|
| 37 |
margin-top: 20px;
|
| 38 |
+
display: flex;
|
| 39 |
+
justify-content: center;
|
| 40 |
+
align-items: center;
|
| 41 |
+
flex-direction: column;
|
| 42 |
}
|
| 43 |
#imageUrl {
|
| 44 |
margin-top: 20px;
|
|
|
|
| 50 |
</style>
|
| 51 |
</head>
|
| 52 |
<body>
|
| 53 |
+
<h1>Upload File</h1>
|
| 54 |
+
<div id="mediaContainer">
|
| 55 |
+
<!-- Media content will be displayed here -->
|
| 56 |
+
</div>
|
| 57 |
<div id="imageUrl" onclick="copyToClipboard(this)">Click to copy URL</div>
|
| 58 |
<form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
|
| 59 |
+
<input type="file" name="file">
|
| 60 |
<button type="submit">Upload</button>
|
| 61 |
</form>
|
| 62 |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
|
|
|
| 75 |
throw new Error('Network response was not ok.');
|
| 76 |
})
|
| 77 |
.then(data => {
|
|
|
|
| 78 |
var fullUrl = data.split('saved to ')[1];
|
|
|
|
| 79 |
document.getElementById('imageUrl').innerText = fullUrl;
|
| 80 |
+
displayMedia(fullUrl);
|
| 81 |
})
|
| 82 |
.catch(error => {
|
| 83 |
console.error('Error:', error);
|
| 84 |
});
|
| 85 |
});
|
| 86 |
|
| 87 |
+
function displayMedia(url) {
|
| 88 |
+
var mediaContainer = document.getElementById('mediaContainer');
|
| 89 |
+
mediaContainer.innerHTML = '';
|
| 90 |
+
var extension = url.split('.').pop().toLowerCase();
|
| 91 |
+
if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
|
| 92 |
+
var img = document.createElement('img');
|
| 93 |
+
img.src = url;
|
| 94 |
+
img.style.width = '300px';
|
| 95 |
+
img.style.height = '300px';
|
| 96 |
+
mediaContainer.appendChild(img);
|
| 97 |
+
} else if (['mp4', 'webm', 'ogg'].includes(extension)) {
|
| 98 |
+
var video = document.createElement('video');
|
| 99 |
+
video.src = url;
|
| 100 |
+
video.controls = true;
|
| 101 |
+
video.style.width = '300px';
|
| 102 |
+
video.style.height = '300px';
|
| 103 |
+
mediaContainer.appendChild(video);
|
| 104 |
+
} else if (['mp3', 'wav', 'ogg'].includes(extension)) {
|
| 105 |
+
var audio = document.createElement('audio');
|
| 106 |
+
audio.src = url;
|
| 107 |
+
audio.controls = true;
|
| 108 |
+
mediaContainer.appendChild(audio);
|
| 109 |
+
} else {
|
| 110 |
+
mediaContainer.innerText = 'Unsupported file type';
|
| 111 |
+
}
|
| 112 |
+
}
|
| 113 |
+
|
| 114 |
function copyToClipboard(element) {
|
| 115 |
var tempInput = document.createElement("input");
|
| 116 |
tempInput.value = element.innerText;
|
|
|
|
| 119 |
document.execCommand("copy");
|
| 120 |
document.body.removeChild(tempInput);
|
| 121 |
Toastify({
|
| 122 |
+
text: "URL copied to clipboard",
|
| 123 |
duration: 3000,
|
| 124 |
gravity: "top",
|
| 125 |
position: "center",
|