Spaces:
Sleeping
Sleeping
DmitrMakeev
commited on
Commit
•
fa37d06
1
Parent(s):
648ac9b
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",
|