add endpoint to ping server, and display log if connection fails

api/api/views.py

@@ -21,7 +21,12 @@ UPLOAD_DIR = "/tmp/freqsplit"
 # Ensure the temp directory exists
 os.makedirs(UPLOAD_DIR, exist_ok=True)
 
-#
+# Endpoint to ping server
+@api_view(['GET'])
+def ping(request):
+    """Endpoint to ping the server"""
+    if (request):
+        return Response(status=status.HTTP_200_OK);
 
 # Endpoint to upload audio and classify it to audio_class
 @api_view(['POST'])

api/backend/urls.py

@@ -16,6 +16,7 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path
+from api.views import ping
 from api.views import upload_audio
 from api.views import normalize_audio
 from api.views import trim_audio
@@ -28,6 +29,7 @@ from api.views import cleanup
 from api.views import cleanup_zip
 
 urlpatterns = [
+    path('api/ping', ping, name="ping"),
     path('admin/', admin.site.urls),
     path('api/upload', upload_audio, name='upload_audio'),
     path('api/normalize', normalize_audio, name="normalize_audio"),

client/src/Pages/UploadPage.tsx

@@ -27,18 +27,34 @@ function UploadPage() {
   const [isDragging, setIsDragging] = useState(false);
   const [fileError, setFileError] = useState("");
   const [upload, setUpload] = useState(false);
+  const [inputEnabled, setInputEnabled] = useState(false);
 
   useEffect(() => {
-    setTimeout(() => {
+    const startLogs = async () => {
       setLogs([formatLogMessage("Initializing freqsplit")]);
+  
       setTimeout(() => {
         setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connecting to server")]);
-        setTimeout(() => {
-          setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connection established successfully")]);
-        },80)
+  
+        // Send GET request to /api/ping
+        axios.get("/api/ping")
+          .then((ping_resp) => {
+            if (ping_resp.status === 200) {
+              setTimeout(() => {
+                setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connection established successfully")]);
+                setInputEnabled(true);
+              }, 80);
+            } else {
+              setLogs((prevLogs) => [...prevLogs, formatLogMessage("Failed to connect to server")]);
+            }
+          })
+          .catch(() => {
+            setLogs((prevLogs) => [...prevLogs, formatLogMessage("Failed to connect to server")]);
+          });
       }, 90);
-    }, 100);
-    
+    };
+  
+    startLogs();
   }, []);
  
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
@@ -173,6 +189,7 @@ function UploadPage() {
             style={{ display: "none" }}
             onChange={handleFileChange}
             accept="audio/*,video/*"
+            disabled={!inputEnabled}
           />
           
           <CloudUploadIcon color="primary" sx={{ fontSize: 64, mb: 2 }} />