Hugging Face's logo

Spaces:
Hans-Den
/
jellyspace
Runtime error

App Files Community
ChandimaPrabath commited on
Commit
ec18235
•
1 Parent(s): c69a04f

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +82 -0
templates/index.html ADDED
@@ -0,0 +1,82 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>File Upload</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
9
+ </head>
10
+
11
+ <body class="bg-gray-100 flex items-center justify-center h-screen">
12
+ <div class="container max-w-md mx-auto">
13
+ <div class="bg-white p-8 rounded-lg shadow-lg">
14
+ <h2 class="mb-4 text-xl font-bold text-center">Upload File</h2>
15
+ <form id="uploadForm" class="space-y-4" enctype="multipart/form-data">
16
+ <div>
17
+ <input type="file" name="file" required
18
+ class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none focus:border-transparent">
19
+ </div>
20
+ <div>
21
+ <select id="directorySelect" name="directory"
22
+ class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none focus:border-transparent"></select>
23
+ </div>
24
+ <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
25
+ <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
26
+ </div>
27
+ <div>
28
+ <button type="submit"
29
+ class="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg border border-transparent hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Upload
30
+ File</button>
31
+ </div>
32
+ </form>
33
+ </div>
34
+ </div>
35
+
36
+ <script>
37
+ document.addEventListener('DOMContentLoaded', function() {
38
+ fetch('/list-directories')
39
+ .then(response => response.json())
40
+ .then(data => {
41
+ const select = document.getElementById('directorySelect');
42
+ data.forEach(dir => {
43
+ let option = document.createElement('option');
44
+ option.value = dir;
45
+ option.textContent = dir;
46
+ select.appendChild(option);
47
+ });
48
+ });
49
+
50
+ document.getElementById('uploadForm').onsubmit = function(event) {
51
+ event.preventDefault();
52
+ const formData = new FormData(this);
53
+ const xhr = new XMLHttpRequest();
54
+ xhr.open('POST', '/upload', true);
55
+
56
+ xhr.upload.onprogress = function(event) {
57
+ if (event.lengthComputable) {
58
+ const percentComplete = Math.round((event.loaded / event.total) * 100);
59
+ document.getElementById('progressBar').style.width = percentComplete + '%';
60
+ }
61
+ };
62
+
63
+ xhr.onload = function() {
64
+ if (xhr.status == 200) {
65
+ alert('File uploaded successfully');
66
+ document.getElementById('progressBar').style.width = '0%'; // Reset progress bar
67
+ } else {
68
+ alert('Upload failed');
69
+ }
70
+ };
71
+
72
+ xhr.onerror = function() {
73
+ alert('Upload error');
74
+ };
75
+
76
+ xhr.send(formData);
77
+ };
78
+ });
79
+ </script>
80
+ </body>
81
+
82
+ </html>