Hugging Face's logo

Spaces:
Juna190825
/
ConLLUeditor
Sleeping

App Files Community
Juna190825 commited on
Commit
c94ff42
·
verified ·
1 Parent(s): 58a704a

Update proxy/templates/index.html

Browse files
Files changed (1) hide show
  1. proxy/templates/index.html +60 -95
proxy/templates/index.html CHANGED
@@ -21,9 +21,6 @@
21
  border-color: #007bff;
22
  background-color: #f0f8ff;
23
  }
24
- #fileList {
25
- margin-bottom: 1rem;
26
- }
27
  iframe {
28
  width: 100%;
29
  height: 70vh;
@@ -33,18 +30,17 @@
33
  </head>
34
  <body>
35
  <h1>ConlluEditor Online</h1>
 
 
36
  <div id="dropzone">
37
  Drag & drop a .conllu file here, or click to select.
38
  </div>
39
 
40
-
41
- <!-- Drag-and-drop upload panel -->
42
- <input type="file" id="fileInput" accept=".conllu">
43
- <button onclick="uploadFile()">Upload</button>
44
 
45
  <!-- File list + download -->
46
- <div id="fileList">
47
- <label for="fileSelect"><strong>Available files:</strong></label>
48
  <select id="fileSelect"></select>
49
  <button id="openBtn">Open in editor</button>
50
  <button id="downloadBtn">Download</button>
@@ -57,11 +53,11 @@
57
  const dropzone = document.getElementById("dropzone");
58
  const fileInput = document.getElementById("fileInput");
59
  const fileSelect = document.getElementById("fileSelect");
60
- const openBtn = document.getElementById("openBtn");
61
- const downloadBtn = document.getElementById("downloadBtn");
62
  const editorFrame = document.getElementById("editorFrame");
63
 
64
- // Drag & drop behavior
 
 
65
  dropzone.addEventListener("click", () => fileInput.click());
66
 
67
  dropzone.addEventListener("dragover", (e) => {
@@ -77,113 +73,82 @@
77
  dropzone.addEventListener("drop", (e) => {
78
  e.preventDefault();
79
  dropzone.classList.remove("dragover");
80
- const files = e.dataTransfer.files;
81
- if (files.length > 0) uploadFile(files[0]);
82
  });
83
 
84
  fileInput.addEventListener("change", () => {
85
- if (fileInput.files.length > 0) uploadFile(fileInput.files[0]);
 
 
86
  });
87
 
88
- // function uploadFile(file) {
89
- // if (!file.name.toLowerCase().endsWith(".conllu")) {
90
- // alert("Please upload a .conllu file");
91
- // return;
92
- // }
93
- // const formData = new FormData();
94
- // formData.append("file", file);
95
- // fetch("/api/upload", {
96
- // method: "POST",
97
- // body: formData
98
- // }).then(r => {
99
- // if (!r.ok) throw new Error("Upload failed");
100
- // return r.text();
101
- // }).then(() => {
102
- // loadFiles();
103
- // }).catch(err => alert(err));
104
- // }
105
  async function uploadFile(file) {
106
- if (!file) {
107
- const input = document.getElementById("fileInput");
108
- if (!input.files.length) {
109
- alert("Please select a file first");
110
- return;
111
- }
112
- file = input.files[0];
113
- }
114
-
115
- if (!file.name.toLowerCase().endsWith(".conllu")) {
116
- alert("Please upload a .conllu file");
117
- return;
118
- }
119
-
120
- const form = new FormData();
121
- form.append("file", file);
122
-
123
- const res = await fetch("/api/upload", {
124
- method: "POST",
125
- body: form
126
- });
127
-
128
- if (res.ok) {
129
- refreshFileList();
130
- } else {
131
- alert("Upload failed");
132
- }
133
  }
134
 
135
-
 
 
136
  async function refreshFileList() {
137
- const res = await fetch("/api/files");
138
- const files = await res.json();
139
-
140
- const select = document.getElementById("fileSelect");
141
- select.innerHTML = "";
142
-
143
- files.forEach(f => {
144
- const opt = document.createElement("option");
145
- opt.value = f;
146
- opt.textContent = f;
147
- select.appendChild(opt);
148
- });
149
- }
150
 
 
151
 
152
- function loadFiles() {
153
- fetch("/api/files")
154
- .then(r => r.json())
155
- .then(files => {
156
- fileSelect.innerHTML = "";
157
- files.forEach(f => {
158
- const opt = document.createElement("option");
159
- opt.value = f;
160
- opt.textContent = f;
161
- fileSelect.appendChild(opt);
162
- });
163
- });
164
- }
165
-
166
- function openInEditor(filename) {
167
- const iframe = document.getElementById("editorFrame");
168
- iframe.src = "/editor/?file=" + encodeURIComponent(filename);
169
  }
170
 
171
- openBtn.addEventListener("click", () => {
 
 
 
172
  const f = fileSelect.value;
173
  if (!f) return;
174
- // Assuming ConlluEditor can take a filename via query or internal logic.
175
- // If not, you’ll adapt this to whatever mechanism it uses.
176
  editorFrame.src = "/editor/?file=" + encodeURIComponent(f);
177
  });
178
 
179
- downloadBtn.addEventListener("click", () => {
 
 
 
180
  const f = fileSelect.value;
181
  if (!f) return;
182
  window.location.href = "/api/download/" + encodeURIComponent(f);
183
  });
184
 
185
  // Initial load
186
- loadFiles();
187
  </script>
188
  </body>
189
  </html>
 
21
  border-color: #007bff;
22
  background-color: #f0f8ff;
23
  }
 
 
 
24
  iframe {
25
  width: 100%;
26
  height: 70vh;
 
30
  </head>
31
  <body>
32
  <h1>ConlluEditor Online</h1>
33
+
34
+ <!-- Drag-and-drop upload panel -->
35
  <div id="dropzone">
36
  Drag & drop a .conllu file here, or click to select.
37
  </div>
38
 
39
+ <input type="file" id="fileInput" accept=".conllu" style="display:none">
 
 
 
40
 
41
  <!-- File list + download -->
42
+ <div>
43
+ <label><strong>Available files:</strong></label>
44
  <select id="fileSelect"></select>
45
  <button id="openBtn">Open in editor</button>
46
  <button id="downloadBtn">Download</button>
 
53
  const dropzone = document.getElementById("dropzone");
54
  const fileInput = document.getElementById("fileInput");
55
  const fileSelect = document.getElementById("fileSelect");
 
 
56
  const editorFrame = document.getElementById("editorFrame");
57
 
58
+ // -----------------------------
59
+ // Drag & Drop + Click Upload
60
+ // -----------------------------
61
  dropzone.addEventListener("click", () => fileInput.click());
62
 
63
  dropzone.addEventListener("dragover", (e) => {
 
73
  dropzone.addEventListener("drop", (e) => {
74
  e.preventDefault();
75
  dropzone.classList.remove("dragover");
76
+ const file = e.dataTransfer.files[0];
77
+ if (file) uploadFile(file);
78
  });
79
 
80
  fileInput.addEventListener("change", () => {
81
+ if (fileInput.files.length > 0) {
82
+ uploadFile(fileInput.files[0]);
83
+ }
84
  });
85
 
86
+ // -----------------------------
87
+ // Upload Function
88
+ // -----------------------------
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  async function uploadFile(file) {
90
+ if (!file) {
91
+ alert("No file selected");
92
+ return;
93
+ }
94
+
95
+ if (!file.name.toLowerCase().endsWith(".conllu")) {
96
+ alert("Please upload a .conllu file");
97
+ return;
98
+ }
99
+
100
+ const form = new FormData();
101
+ form.append("file", file);
102
+
103
+ const res = await fetch("/api/upload", {
104
+ method: "POST",
105
+ body: form
106
+ });
107
+
108
+ if (res.ok) {
109
+ refreshFileList();
110
+ } else {
111
+ alert("Upload failed");
112
+ }
 
 
 
 
113
  }
114
 
115
+ // -----------------------------
116
+ // Refresh File List
117
+ // -----------------------------
118
  async function refreshFileList() {
119
+ const res = await fetch("/api/files");
120
+ const files = await res.json();
 
 
 
 
 
 
 
 
 
 
 
121
 
122
+ fileSelect.innerHTML = "";
123
 
124
+ files.forEach(f => {
125
+ const opt = document.createElement("option");
126
+ opt.value = f;
127
+ opt.textContent = f;
128
+ fileSelect.appendChild(opt);
129
+ });
 
 
 
 
 
 
 
 
 
 
 
130
  }
131
 
132
+ // -----------------------------
133
+ // Open in Editor
134
+ // -----------------------------
135
+ document.getElementById("openBtn").addEventListener("click", () => {
136
  const f = fileSelect.value;
137
  if (!f) return;
 
 
138
  editorFrame.src = "/editor/?file=" + encodeURIComponent(f);
139
  });
140
 
141
+ // -----------------------------
142
+ // Download
143
+ // -----------------------------
144
+ document.getElementById("downloadBtn").addEventListener("click", () => {
145
  const f = fileSelect.value;
146
  if (!f) return;
147
  window.location.href = "/api/download/" + encodeURIComponent(f);
148
  });
149
 
150
  // Initial load
151
+ refreshFileList();
152
  </script>
153
  </body>
154
  </html>