Update up_fa.html

up_fa.html

@@ -87,69 +87,77 @@
     </form>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
     <script>
-        document.getElementById('uploadForm').addEventListener('submit', function(event) {
+        document.addEventListener('DOMContentLoaded', function() {
+    const uploadForm = document.getElementById('uploadForm');
+    if (uploadForm) {
+        uploadForm.addEventListener('submit', function(event) {
             event.preventDefault();
             var formData = new FormData(this);
             var request = new XMLHttpRequest();
-            request.open('POST', '/upload');
+            request.open('POST', '/up_page');
             request.upload.addEventListener('progress', function(event) {
                 if (event.lengthComputable) {
                     var percentComplete = (event.loaded / event.total) * 100;
-                    document.getElementById('progressBar').style.width = percentComplete + '%';
-                    document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
+                    const progressBar = document.getElementById('progressBar');
+                    if (progressBar) {
+                        progressBar.style.width = percentComplete + '%';
+                        progressBar.innerText = Math.round(percentComplete) + '%';
+                    }
                 }
             }, false);
             request.addEventListener('load', function(event) {
                 var response = event.target.responseText;
-                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);
+                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%';
+                }
             }, false);
             request.send(formData);
         });
-        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();
-        }
+    } 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();
+    }
+});
     </script>
 </body>
 </html>