Update up_fa.html

up_fa.html

@@ -86,78 +86,70 @@
         <button type="submit">Загрузить</button>
     </form>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-    const uploadForm = document.getElementById('uploadForm');
-    if (uploadForm) {
-        uploadForm.addEventListener('submit', function(event) {
+<script>
+        document.getElementById('uploadForm').addEventListener('submit', function(event) {
             event.preventDefault();
             var formData = new FormData(this);
             var request = new XMLHttpRequest();
-            request.open('POST', '/up_page');
+            request.open('POST', '/upload');
             request.upload.addEventListener('progress', function(event) {
                 if (event.lengthComputable) {
                     var percentComplete = (event.loaded / event.total) * 100;
-                    const progressBar = document.getElementById('progressBar');
-                    if (progressBar) {
-                        progressBar.style.width = percentComplete + '%';
-                        progressBar.innerText = Math.round(percentComplete) + '%';
-                    }
+                    document.getElementById('progressBar').style.width = percentComplete + '%';
+                    document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
                 }
             }, false);
             request.addEventListener('load', function(event) {
                 var response = event.target.responseText;
-                if (event.target.status === 200) {
-                    var fullUrl = response.split('saved to ')[1];
-                    const imageUrl = document.getElementById('imageUrl');
-                    if (imageUrl) {
-                        imageUrl.innerText = 'Click to copy URL';
-                        imageUrl.setAttribute('data-url', fullUrl);
-                    }
-                    Toastify({
-                        text: "File uploaded successfully",
-                        duration: 3000,
-                        gravity: "top",
-                        position: "center",
-                        backgroundColor: "#4CAF50",
-                    }).showToast();
-                } else if (event.target.status === 409) {
-                    Toastify({
-                        text: "File with this name already exists",
-                        duration: 3000,
-                        gravity: "top",
-                        position: "center",
-                        backgroundColor: "#FF5733",
-                    }).showToast();
-                }
-                const progressBar = document.getElementById('progressBar');
-                if (progressBar) {
-                    progressBar.style.width = '0%';
-                    progressBar.innerText = '0%';
-                }
+                var fullUrl = response.split('saved to ')[1];
+                var filename = fullUrl.split('/').pop();
+                document.getElementById('imageUrl').innerText = fullUrl;
+                displayMedia(fullUrl);
+                document.getElementById('progressBar').style.width = '0%';
+                document.getElementById('progressBar').innerText = '0%';
+                // Сохранение имени файла и ссылки в локальное хранилище
+                localStorage.setItem('filename', filename);
+                localStorage.setItem('fileUrl', fullUrl);
             }, false);
             request.send(formData);
         });
-    } else {
-        console.error("Element with id 'uploadForm' not found");
-    }
-
-    function copyToClipboard(element) {
-        var tempInput = document.createElement("input");
-        tempInput.value = element.getAttribute('data-url');
-        document.body.appendChild(tempInput);
-        tempInput.select();
-        document.execCommand("copy");
-        document.body.removeChild(tempInput);
-        Toastify({
-            text: "URL copied to clipboard",
-            duration: 3000,
-            gravity: "top",
-            position: "center",
-            backgroundColor: "#4CAF50",
-        }).showToast();
-    }
-});
+        function displayMedia(url) {
+            var mediaContainer = document.getElementById('mediaContainer');
+            mediaContainer.innerHTML = '';
+            var extension = url.split('.').pop().toLowerCase();
+            if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
+                var img = document.createElement('img');
+                img.src = url;
+                mediaContainer.appendChild(img);
+            } else if (['mp4', 'webm', 'ogg'].includes(extension)) {
+                var video = document.createElement('video');
+                video.src = url;
+                video.controls = true;
+                mediaContainer.appendChild(video);
+            } else if (['mp3', 'wav', 'ogg'].includes(extension)) {
+                var audio = document.createElement('audio');
+                audio.src = url;
+                audio.controls = true;
+                mediaContainer.appendChild(audio);
+            } else {
+                mediaContainer.innerText = 'Unsupported file type';
+            }
+        }
+        function copyToClipboard(element) {
+            var tempInput = document.createElement("input");
+            tempInput.value = element.innerText;
+            document.body.appendChild(tempInput);
+            tempInput.select();
+            document.execCommand("copy");
+            document.body.removeChild(tempInput);
+            Toastify({
+                text: "Ссылка на загруженный файл",
+                duration: 3000,
+                gravity: "top",
+                position: "center",
+                backgroundColor: "#4CAF50",
+            }).showToast();
+        }
     </script>
 </body>
 </html>