DS/client.html at master · vishwagullapalli/DS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!-- Code with explanations-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Distributed File Storage Client</title>
</head>
<body>
    <h1>Distributed File Storage</h1>

    <!-- File upload input and upload button -->
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload</button>
    <br><br>

    <!-- Input for file ID and retrieve button -->
    <input type="text" id="fileIdInput" placeholder="Enter File ID">
    <button onclick="retrieveFile()">Retrieve</button>
    <br><br>

    <!-- Div to display status messages (e.g., success or error) -->
    <div id="status"></div>

    <script>
        // The base URL for the middleware server
        // The URL does not change even if IP changes (Ngrok or Tunnelmole)
        const MIDDLEWARE_URL = 'https://example-middleware-url/update-server-url';

        /**
         * Uploads the selected file to the middleware for chunking and distribution.
         */
        async function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0]; // Get the first selected file

            // Check if a file is selected
            if (!file) {
                alert('Please select a file');
                return;
            }

            // Prepare the file for upload using FormData
            const formData = new FormData();
            formData.append('file', file);

            try {
                // Send the file to the middleware via the /upload endpoint
                const response = await fetch(`${MIDDLEWARE_URL}/upload`, {
                    method: 'POST',
                    body: formData
                });

                // Parse and display the server's response
                const result = await response.json();
                document.getElementById('status').innerText = `File uploaded. ID: ${result.fileId}`;
            } catch (error) {
                // Log and display upload errors
                console.error('Upload error:', error);
                document.getElementById('status').innerText = 'Upload failed';
            }
        }

        /**
         * Retrieves a file by its unique File ID from the distributed storage system.
         */
        async function retrieveFile() {
            const fileId = document.getElementById('fileIdInput').value; // Get File ID input

            // Check if a File ID is provided
            if (!fileId) {
                alert('Please enter a file ID');
                return;
            }

            try {
                // Request the file from the middleware via the /retrieve endpoint
                const response = await fetch(`${MIDDLEWARE_URL}/retrieve/${fileId}`);
                const blob = await response.blob(); // Convert the response into a file-like blob

                // Create a downloadable link for the file
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = fileId; // Use File ID as the default filename
                document.body.appendChild(a);
                a.click();

                // Clean up the temporary object URL
                window.URL.revokeObjectURL(url);

                // Display success message
                document.getElementById('status').innerText = 'File retrieved successfully';
            } catch (error) {
                // Log and display retrieval errors
                console.error('Retrieval error:', error);
                document.getElementById('status').innerText = 'Retrieval failed';
            }
        }
    </script>
</body>
</html>