Create upload.html

itzfew · Apr 11, 2024 · 63801f6 · 63801f6
1 parent d22a746
commit 63801f6
Showing 1 changed file with 72 additions and 0 deletions.
diff --git a/upload.html b/upload.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Upload and Send File</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+
+    form {
+      margin-bottom: 20px;
+    }
+
+    button {
+      padding: 10px 20px;
+      background-color: #007bff;
+      color: #fff;
+      border: none;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background-color: #0056b3;
+    }
+
+    #status {
+      font-size: 18px;
+      font-weight: bold;
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <form id="uploadForm" enctype="multipart/form-data">
+    <input type="file" id="fileInput" name="fileInput" accept=".txt, .pdf, .doc, .docx">
+    <button type="submit">Upload & Send</button>
+  </form>
+  <div id="status"></div>
+
+  <script>
+    const uploadForm = document.getElementById('uploadForm');
+    const fileInput = document.getElementById('fileInput');
+    const status = document.getElementById('status');
+
+    uploadForm.addEventListener('submit', function(event) {
+      event.preventDefault();
+
+      const formData = new FormData();
+      formData.append('file', fileInput.files[0]);
+
+      fetch('upload.php', {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          status.textContent = 'File successfully uploaded and sent!';
+        } else {
+          status.textContent = 'Error uploading file. Please try again.';
+        }
+      })
+      .catch(error => {
+        console.error('Error:', error);
+        status.textContent = 'An error occurred. Please try again later.';
+      });
+    });
+  </script>
+</body>
+</html>