Release v0.4

Makefile

@@ -13,7 +13,7 @@ ifeq ($(MAKECMDGOALS),)
   endif
 endif
 
-VERSION_TAG := v0.2
+VERSION_TAG := v0.4
 TITLE_ID    := FMGR88888
 PYTHON      ?= python3
 STRIP       ?= $(PS5_PAYLOAD_SDK)/bin/prospero-strip
@@ -63,7 +63,7 @@ gen:
 clean:
 	rm -rf $(BIN) $(LEGACY_BIN) $(LINUX_BIN) gen
 
-gen/%.c: assets/% gen-asset-module.py gen
+gen/%.c: assets/% gen-asset-module.py | gen
 	$(PYTHON) gen-asset-module.py --path $* $< > $@
 
 $(BIN): $(PS5_SRCS) $(GEN_SRCS)

README.md

@@ -7,10 +7,21 @@ safely copying game dump folders from USB storage to internal storage.
 
 PS5 web file manager payload. It runs an HTTP UI starting at port `8888`, installs a home screen launcher in Media catagory on startup when needed, and provides file operations from the PS5 browser. If `8888` is already in use, the payload tries the next port until one is available; the startup notification shows the actual listen port.
 
+## Screenshots
+
+<p>
+  <a href="docs/screenshots/20260617_231827.376.jpg" target="_blank"><img src="docs/screenshots/20260617_231827.376.jpg" width="31%" alt="PS5 Web File Manager screenshot 1"></a>
+  <a href="docs/screenshots/20260619_131432.399.jpg" target="_blank"><img src="docs/screenshots/20260619_131432.399.jpg" width="31%" alt="PS5 Web File Manager screenshot 2"></a>
+  <a href="docs/screenshots/20260617_232348.855.jpg" target="_blank"><img src="docs/screenshots/20260617_232348.855.jpg" width="31%" alt="PS5 Web File Manager screenshot 3"></a>
+  <a href="docs/screenshots/20260619_131811.644.jpg" target="_blank"><img src="docs/screenshots/20260619_131811.644.jpg" width="31%" alt="PS5 Web File Manager screenshot 4"></a>
+  <a href="docs/screenshots/20260619_131535.239.jpg" target="_blank"><img src="docs/screenshots/20260619_131535.239.jpg" width="31%" alt="PS5 Web File Manager screenshot 5"></a>
+</p>
+
 ## Features
 
 - List files and folders.
 - Copy, move, delete, rename, and create folders.
+- Edit UTF-8 text files up to 1 MiB using the built-in plain text editor.
 - Multi-select operations.
 - Copy/move by choosing sources first, then pasting or moving them into the current folder.
 - Conflict prompts for overwriting files and merging folders.
@@ -18,6 +29,7 @@ PS5 web file manager payload. It runs an HTTP UI starting at port `8888`, instal
 - Copied/moved files and folders are set to `0777` where the filesystem supports Unix permissions. FAT/exFAT-style filesystems may ignore chmod.
 - Chinese and English UI. The browser language is read from `navigator.languages` / `navigator.language`; Chinese uses `zh`, everything else uses English.
 - Startup notification showing the app name, version, and listen port.
+- Create/edit text files ending with `.txt`, `.json`, `.xml`, `.ini`, `.cfg`, `.conf`, `.md`, `.log`, `.lua`, `.js`, `.css`, `.html`, `.htm`, `.c`, `.h`, `.cpp`, `.hpp`, `.sh`, `.csv`, `.yaml`, `.yml`.
 
 ## Build
 
@@ -77,6 +89,7 @@ On first startup the payload installs a `PS5 Web File Manager` web shortcut in t
 - Delete is recursive and permanent. There is no recycle bin.
 - Copy/move tasks can be canceled. A partially copied single file is removed, but partially copied folders are left in place to avoid deleting existing files when merging into an existing target folder.
 - The UI can recover the active task display if the browser is closed and reopened while the payload process is still running.
+- Text editing is limited to common text-file extensions. Non-UTF-8 and oversized files are rejected.
 
 ## Credits
 

assets/index.html

@@ -29,6 +29,7 @@
       </div>
       <div class="tool-right">
         <button id="refreshBtn" data-i18n="refresh"></button>
+        <button id="newTextBtn" data-i18n="newText"></button>
         <button id="mkdirBtn" data-i18n="mkdir"></button>
       </div>
     </section>
@@ -48,6 +49,9 @@
         <tbody id="files"></tbody>
       </table>
       <div id="empty" class="empty" data-i18n="empty" hidden></div>
+      <div id="contentLoading" class="content-loading" hidden>
+        <div class="content-loading-text" data-i18n="readDir"></div>
+      </div>
     </section>
 
     <footer class="status">
@@ -56,19 +60,35 @@
     </footer>
   </main>
 
+  <div id="textEditorOverlay" class="text-editor-overlay" hidden>
+    <section class="text-editor-panel">
+      <div id="textEditorPath" class="text-editor-path"></div>
+      <textarea id="textEditor" class="text-editor" wrap="off" spellcheck="false"
+                autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
+      <div id="textEditorStatus" class="text-editor-status"></div>
+      <div class="text-editor-actions">
+        <button id="textEditorCloseBtn" class="secondary" data-i18n="close"></button>
+        <button id="textEditorSaveBtn" class="primary" data-i18n="save"></button>
+      </div>
+    </section>
+  </div>
+
+  <div id="imagePreviewOverlay" class="text-editor-overlay" hidden>
+    <section class="text-editor-panel image-preview-panel">
+      <div class="image-preview-stage">
+        <img id="imagePreview" class="image-preview" alt="">
+      </div>
+      <button id="imagePreviewCloseBtn" class="secondary" data-i18n="close"></button>
+    </section>
+  </div>
+
   <div id="taskOverlay" class="task-overlay" hidden>
     <div class="task-panel">
       <div id="tasks" class="tasks"></div>
     </div>
   </div>
 
-  <div id="initLoading" class="init-loading" aria-hidden="true">
-    <div class="loading-dots">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </div>
+  <div id="initLoading" class="init-loading" aria-hidden="true"></div>
 
   <script src="/main.js"></script>
 </body>

assets/lang-en.js

@@ -6,10 +6,13 @@ window.WFM_LANG = {
   rename: "Rename",
   paste: "Paste",
   cancel: "Cancel",
+  close: "Close",
+  save: "Save",
   exit: "Exit",
   exiting: "Exiting...",
   refresh: "Refresh",
   mkdir: "New Folder",
+  newText: "New Text",
   file: "File",
   dir: "Folder",
   parent: "Parent",
@@ -58,8 +61,19 @@ window.WFM_LANG = {
   cancelTaskConfirm: "Cancel current {label} task?",
   cancelFailed: "Cancel failed: {error}",
   tasksPollFailed: "Failed to read task status: {error}",
+  transferComplete: "{label} completed\n\nTotal time: {duration}\nTransferred: {size}",
+  transferCompleteFiles: "{label} completed\n\nTotal time: {duration}\nTransferred: {size}\nFiles: {count}",
   renamePrompt: "New name",
   mkdirPrompt: "Folder name",
+  newTextPrompt: "Text file name",
+  creatingText: "Creating text file...",
+  createTextFailed: "Failed to create text file: {error}",
+  unsavedSaveConfirm: "The text has unsaved changes. Save before closing?\n\nCancel discards the changes and closes.",
+  loadingText: "Loading text...",
+  savingText: "Saving...",
+  textSaved: "Text saved",
+  openTextFailed: "Failed to open text: {error}",
+  saveTextFailed: "Failed to save text: {error}",
   deleteConfirm: "Delete {name}?",
   deleteConfirmRecursive: "Delete {name}?\n\nFolders will be deleted recursively.",
   activeTask: "A task is running",
@@ -72,7 +86,7 @@ window.WFM_LANG = {
   storageExtended: "Extended",
   err_target_dir_not_writable: "Target folder is not writable: {path}",
   err_target_file_not_writable: "Target file is not writable: {path}",
-  err_target_parent_not_writable: "Target parent folder is not writable: {path}",
+  err_target_parent_not_writable: "Current folder is not writable: {path}",
   err_target_check_failed: "Cannot check target path: {path}",
   err_target_path_too_long: "Target path is too long",
   err_space_check_failed: "Cannot read target free space: {path}",
@@ -82,6 +96,14 @@ window.WFM_LANG = {
   err_source_destination_same: "Source and destination are the same",
   err_destination_inside_source: "Cannot copy or move a folder inside itself",
   err_invalid_path: "Invalid path",
+  err_file_not_found: "File not found",
+  err_file_already_exists: "A file with the same name already exists",
+  err_invalid_method: "Invalid request method",
+  err_text_type_not_editable: "This file type is not supported by the text editor",
+  err_text_file_too_large: "The text file is too large. The maximum size is 1 MiB",
+  err_text_invalid_utf8: "The file is not valid UTF-8 text",
+  err_text_file_changed: "The file changed after it was opened. Close and reopen it",
+  err_text_file_not_writable: "The text file is not writable",
   err_unknown_api: "Unknown API",
   err_out_of_memory: "Out of memory",
   err_no_source_paths: "No source paths",

assets/lang-zh.js

@@ -6,10 +6,13 @@ window.WFM_LANG = {
   rename: "重命名",
   paste: "粘贴",
   cancel: "取消",
+  close: "关闭",
+  save: "保存",
   exit: "退出",
   exiting: "正在退出...",
   refresh: "刷新",
   mkdir: "新建目录",
+  newText: "新建文本",
   file: "文件",
   dir: "目录",
   parent: "上级目录",
@@ -38,7 +41,7 @@ window.WFM_LANG = {
   selectedItems: "{name} 等 {count} 项",
   countItems: "{count} 项",
   totalItems: "共 {count} 项",
-  readDir: "读取目录...",
+  readDir: "读取目录中...",
   actionBusy: "{label}...",
   taskCreated: "{label}任务已创建",
   actionDone: "{label}完成",
@@ -58,8 +61,19 @@ window.WFM_LANG = {
   cancelTaskConfirm: "取消当前{label}任务？",
   cancelFailed: "取消失败: {error}",
   tasksPollFailed: "任务状态读取失败: {error}",
+  transferComplete: "{label}完成\n\n总耗时：{duration}\n传输大小：{size}",
+  transferCompleteFiles: "{label}完成\n\n总耗时：{duration}\n传输大小：{size}\n文件数量：{count}",
   renamePrompt: "新名称",
   mkdirPrompt: "目录名",
+  newTextPrompt: "文本文件名",
+  creatingText: "正在新建文本...",
+  createTextFailed: "新建文本失败: {error}",
+  unsavedSaveConfirm: "文本有未保存的修改，是否保存后关闭？\n\n取消将放弃修改并关闭。",
+  loadingText: "正在读取文本...",
+  savingText: "正在保存...",
+  textSaved: "文本已保存",
+  openTextFailed: "打开文本失败: {error}",
+  saveTextFailed: "保存文本失败: {error}",
   deleteConfirm: "确认删除 {name}？",
   deleteConfirmRecursive: "确认删除 {name}？\n\n目录会递归删除。",
   activeTask: "有任务正在执行",
@@ -72,7 +86,7 @@ window.WFM_LANG = {
   storageExtended: "扩展存储",
   err_target_dir_not_writable: "目标目录不可写: {path}",
   err_target_file_not_writable: "目标文件不可写: {path}",
-  err_target_parent_not_writable: "目标父目录不可写: {path}",
+  err_target_parent_not_writable: "当前目录不可写: {path}",
   err_target_check_failed: "无法检查目标路径: {path}",
   err_target_path_too_long: "目标路径过长",
   err_space_check_failed: "无法读取目标剩余空间: {path}",
@@ -82,6 +96,14 @@ window.WFM_LANG = {
   err_source_destination_same: "源和目标相同",
   err_destination_inside_source: "不能复制或移动目录到它自己的内部",
   err_invalid_path: "路径无效",
+  err_file_not_found: "文件不存在",
+  err_file_already_exists: "同名文件已存在",
+  err_invalid_method: "请求方式无效",
+  err_text_type_not_editable: "该文件类型不支持文本编辑",
+  err_text_file_too_large: "文本文件过大，最大支持 1 MiB",
+  err_text_invalid_utf8: "文件不是有效的 UTF-8 文本",
+  err_text_file_changed: "文件在打开后已发生变化，请关闭后重新打开",
+  err_text_file_not_writable: "文本文件不可写",
   err_unknown_api: "未知接口",
   err_out_of_memory: "内存不足",
   err_no_source_paths: "没有源路径",

assets/main.css

@@ -23,41 +23,8 @@
   align-items: center;
   justify-content: center;
   background: #111316;
-}
-
-.loading-dots {
-  display: flex;
-}
-
-.loading-dots span {
-  width: 14px;
-  height: 14px;
-  margin: 0 6px;
-  border-radius: 50%;
-  background: #8fa1b3;
-  animation: loading-pulse 1s ease-in-out infinite;
-}
-
-.loading-dots span:nth-child(2) {
-  animation-delay: .12s;
-}
-
-.loading-dots span:nth-child(3) {
-  animation-delay: .24s;
-}
-
-@keyframes loading-pulse {
-  0%,
-  80%,
-  100% {
-    opacity: .35;
-    transform: scale(.75);
-  }
-
-  40% {
-    opacity: 1;
-    transform: scale(1);
-  }
+  color: #aab4be;
+  font-size: 18px;
 }
 
 body {
@@ -237,6 +204,20 @@ button:disabled,
   background: #402326;
 }
 
+.primary {
+  border-color: #4f9f7b;
+  background: #285943;
+}
+
+button.primary:hover {
+  background: #347358;
+}
+
+.secondary {
+  border-color: #59636e;
+  background: #20262d;
+}
+
 .paste-action {
   max-width: 480px;
 }
@@ -254,14 +235,37 @@ button:disabled,
 }
 
 .content {
+  position: relative;
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
 }
 
+.content.loading {
+  pointer-events: none;
+}
+
+.content-loading {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(4, 6, 8, .72);
+}
+
+.content-loading-text {
+  color: #aab4be;
+  font-size: 18px;
+}
+
 table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   table-layout: fixed;
 }
 
@@ -340,6 +344,10 @@ tr.selected {
   background: #1d2d35;
 }
 
+tr[data-type="parent"] {
+  cursor: pointer;
+}
+
 .select-hit {
   min-height: 78px;
   width: 100%;
@@ -359,14 +367,6 @@ input[type="checkbox"] {
   width: 32px;
   height: 32px;
   flex: 0 0 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon img {
-  width: 32px;
-  height: 32px;
   display: block;
 }
 
@@ -419,6 +419,106 @@ input[type="checkbox"] {
   color: #7f8a94;
 }
 
+.text-editor-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  background: rgba(4, 6, 8, .9);
+}
+
+.text-editor-panel {
+  width: 1200px;
+  height: calc(100vh - 96px);
+  max-width: calc(100vw - 96px);
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  border: 1px solid #46515f;
+  border-radius: 10px;
+  background: #15191e;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
+}
+
+.text-editor-path {
+  margin-bottom: 14px;
+  overflow: hidden;
+  color: #c9d3dc;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.text-editor {
+  width: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+  padding: 18px;
+  border: 1px solid #46515f;
+  border-radius: 6px;
+  outline: none;
+  resize: none;
+  background: #0f1215;
+  color: #edf0f2;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 20px;
+  line-height: 1.5;
+}
+
+.text-editor:focus {
+  border-color: #6fb1ff;
+}
+
+.text-editor-status {
+  min-height: 28px;
+  padding-top: 8px;
+  color: #aab4be;
+  font-size: 18px;
+}
+
+.text-editor-actions {
+  display: flex;
+}
+
+.text-editor-actions button {
+  flex: 1 1 0;
+}
+
+.text-editor-actions button + button {
+  margin-left: 14px;
+}
+
+.image-preview-stage {
+  min-height: 0;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-preview {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.image-preview-panel > button {
+  width: 100%;
+  margin-top: 14px;
+}
+
 .task-overlay {
   position: fixed;
   top: 0;

assets/main.js

@@ -10,13 +10,23 @@ let pendingAbortController = null;
 let taskRefreshPath = "/";
 let hoverPaused = false;
 let hoverResumeTimer = 0;
+let hoveredRow = null;
+let loadingPath = null;
+let directoryLoadingTimer = 0;
+let lastCompletionId = null;
+let textEditorPath = null;
+let textEditorVersion = null;
+let textEditorOriginal = "";
+let textEditorBusy = false;
 let L = {};
 
-const APP_VERSION = "v0.2";
+const APP_VERSION = "v0.4";
 const LAST_PATH_KEY = "ps5-web-file-mgr:last-path";
+const DIRECTORY_LOADING_DELAY = 250;
 
 const filesEl = document.getElementById("files");
 const contentEl = document.getElementById("content");
+const contentLoadingEl = document.getElementById("contentLoading");
 const emptyEl = document.getElementById("empty");
 const pathEl = document.getElementById("path");
 const spaceInfoEl = document.getElementById("spaceInfo");
@@ -32,6 +42,16 @@ const pasteTargetTextEl = document.getElementById("pasteTargetText");
 const clearClipboardBtn = document.getElementById("clearClipboardBtn");
 const initLoadingEl = document.getElementById("initLoading");
 const exitBtn = document.getElementById("exitBtn");
+const textEditorOverlayEl = document.getElementById("textEditorOverlay");
+const textEditorPathEl = document.getElementById("textEditorPath");
+const textEditorEl = document.getElementById("textEditor");
+const textEditorStatusEl = document.getElementById("textEditorStatus");
+const textEditorCloseBtn = document.getElementById("textEditorCloseBtn");
+const textEditorSaveBtn = document.getElementById("textEditorSaveBtn");
+const newTextBtn = document.getElementById("newTextBtn");
+const imagePreviewOverlayEl = document.getElementById("imagePreviewOverlay");
+const imagePreviewEl = document.getElementById("imagePreview");
+const imagePreviewCloseBtn = document.getElementById("imagePreviewCloseBtn");
 
 function chooseLanguage() {
   const langs = navigator.languages && navigator.languages.length ? navigator.languages : [navigator.language || ""];
@@ -42,6 +62,7 @@ function chooseLanguage() {
 function loadLanguage() {
   return new Promise(resolve => {
     const lang = chooseLanguage();
+    initLoadingEl.textContent = lang === "zh" ? "加载中..." : "Loading...";
     const script = document.createElement("script");
     script.src = "/lang-" + lang + ".js";
     script.onload = () => {
@@ -88,17 +109,29 @@ function applyStaticText() {
   if (initLoadingEl) initLoadingEl.hidden = true;
 }
 
-function api(path, params, options) {
+async function request(path, params, options) {
   const qs = new URLSearchParams(params || {});
   const fetchOptions = Object.assign({ method: "POST" }, options || {});
-  return fetch(path + (qs.toString() ? "?" + qs.toString() : ""), fetchOptions)
-    .then(async response => {
-      const data = await response.json();
-      if (!response.ok || !data.ok) {
-        throw new Error(backendErrorText(data.error_code, data.error_arg, data.error));
-      }
-      return data;
-    });
+  const response = await fetch(path + (qs.toString() ? "?" + qs.toString() : ""), fetchOptions);
+  if (!response.ok) {
+    const data = await response.json();
+    throw new Error(backendErrorText(data.error_code, data.error_arg, data.error));
+  }
+  return response;
+}
+
+async function api(path, params, options) {
+  const data = await (await request(path, params, options)).json();
+  if (!data.ok) throw new Error(backendErrorText(data.error_code, data.error_arg, data.error));
+  return data;
+}
+
+async function fetchText(path, params) {
+  const response = await request(path, params, { method: "GET" });
+  return {
+    text: await response.text(),
+    version: response.headers.get("X-Text-Version") || ""
+  };
 }
 
 function formatSize(size, type) {
@@ -119,7 +152,16 @@ function formatBytes(size, decimals) {
 }
 
 function formatTime(seconds) {
-  return seconds ? new Date(seconds * 1000).toLocaleString() : "";
+  if (!seconds) return "";
+  const date = new Date(seconds * 1000);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const time = [date.getHours(), date.getMinutes(), date.getSeconds()]
+    .map(value => value < 10 ? "0" + value : value).join(":");
+  return document.documentElement.lang === "en" ?
+    month + "/" + day + "/" + year + ", " + time :
+    year + "/" + month + "/" + day + " " + time;
 }
 
 function formatSpeed(bytes) {
@@ -277,6 +319,136 @@ function typeLabel(type) {
   return type === "d" ? t("dir") : t("file");
 }
 
+function isEditableText(item) {
+  return item.type === "-" &&
+    /\.(txt|json|xml|ini|cfg|conf|md|log|lua|js|css|html?|c|h|cpp|hpp|sh|csv|ya?ml)$/i.test(item.name);
+}
+
+function isPreviewableImage(item) {
+  return item.type === "-" && /\.(png|jpe?g|gif|bmp|webp)$/i.test(item.name);
+}
+
+function openImagePreview(item) {
+  if (busy) return;
+  imagePreviewEl.src = "/fs?path=" + encodeURIComponent(item.path);
+  imagePreviewOverlayEl.hidden = false;
+  imagePreviewCloseBtn.focus();
+}
+
+function closeImagePreview() {
+  imagePreviewOverlayEl.hidden = true;
+  imagePreviewEl.removeAttribute("src");
+}
+
+function setTextEditorBusy(value, status) {
+  textEditorBusy = value;
+  textEditorEl.disabled = value;
+  textEditorCloseBtn.disabled = value;
+  textEditorSaveBtn.disabled = value;
+  textEditorStatusEl.textContent = status || "";
+}
+
+function closeTextEditor() {
+  if (textEditorBusy) return;
+  textEditorOverlayEl.hidden = true;
+  textEditorPath = null;
+  textEditorVersion = null;
+  textEditorOriginal = "";
+  textEditorEl.value = "";
+  textEditorStatusEl.textContent = "";
+  return load(cwd, false, true);
+}
+
+function requestCloseTextEditor() {
+  if (textEditorBusy) return;
+  if (textEditorEl.value !== textEditorOriginal &&
+      confirm(t("unsavedSaveConfirm"))) return saveTextEditor();
+  return closeTextEditor();
+}
+
+function showTextEditor(item, text, version) {
+  textEditorPath = item.path;
+  textEditorVersion = version;
+  textEditorPathEl.textContent = item.path;
+  textEditorPathEl.title = item.path;
+  textEditorEl.value = text;
+  textEditorOriginal = textEditorEl.value;
+  textEditorOverlayEl.hidden = false;
+  setTextEditorBusy(false, "");
+  textEditorEl.focus();
+}
+
+async function openTextEditor(item) {
+  if (busy || textEditorBusy) return;
+  textEditorPath = item.path;
+  textEditorVersion = null;
+  textEditorOriginal = "";
+  textEditorPathEl.textContent = item.path;
+  textEditorPathEl.title = item.path;
+  textEditorEl.value = "";
+  textEditorOverlayEl.hidden = false;
+  setTextEditorBusy(true, t("loadingText"));
+  try {
+    const data = await fetchText("/api/text", { path: item.path });
+    showTextEditor(item, data.text, data.version);
+  } catch (err) {
+    setTextEditorBusy(false, "");
+    textEditorOverlayEl.hidden = true;
+    textEditorPath = null;
+    const message = t("openTextFailed", { error: err.message });
+    setStatus(message);
+    alert(message);
+  }
+}
+
+async function saveTextEditor() {
+  if (textEditorBusy || !textEditorPath || !textEditorVersion) return;
+  if (textEditorEl.value === textEditorOriginal) {
+    await closeTextEditor();
+    return;
+  }
+  const path = textEditorPath;
+  setTextEditorBusy(true, t("savingText"));
+  try {
+    await api("/api/text/save", { path, version: textEditorVersion }, {
+      body: textEditorEl.value,
+      headers: { "Content-Type": "text/plain; charset=utf-8" }
+    });
+    setTextEditorBusy(false, "");
+    await closeTextEditor();
+    setStatus(t("textSaved"));
+  } catch (err) {
+    setTextEditorBusy(false, "");
+    const message = t("saveTextFailed", { error: err.message });
+    setStatus(message);
+    alert(message);
+  }
+}
+
+async function actionNewText() {
+  if (busy || loadingPath) return;
+  const dir = cwd;
+  const input = prompt(t("newTextPrompt"));
+  if (input === null) return;
+  const name = input.trim();
+  if (!name) return;
+  const item = { name, path: pathJoin(dir, name), type: "-" };
+
+  try {
+    setBusy(true);
+    setStatus(t("creatingText"));
+    const data = await api("/api/text/create", { path: dir, name });
+    await load(dir, false, true);
+    setBusy(false);
+    showTextEditor(item, "", data.version);
+  } catch (err) {
+    setBusy(false);
+    const message = t("createTextFailed", { error: err.message });
+    setStatus(message);
+    alert(message);
+  }
+}
+
 function resetScrollTop() {
   const apply = () => {
     contentEl.scrollTop = 0;
@@ -323,6 +495,7 @@ function renderTaskName(el, task) {
 
 function renderClipboard() {
   const hasClipboard = Boolean(clipboard && clipboard.items.length);
+  const locked = busy || contentEl.classList.contains("loading");
   pasteBtn.hidden = !hasClipboard;
   clearClipboardBtn.hidden = !hasClipboard;
   if (!hasClipboard) {
@@ -338,8 +511,8 @@ function renderClipboard() {
   pasteVerbEl.textContent = clipboard.op === "move" ? t("move") : t("paste");
   pasteNameEl.textContent = title;
   pasteBtn.title = t("pasteTitle", { label: clipboard.op === "move" ? t("move") : t("paste"), name: title, path: cwd });
-  pasteBtn.disabled = busy;
-  clearClipboardBtn.disabled = busy;
+  pasteBtn.disabled = locked;
+  clearClipboardBtn.disabled = locked;
 }
 
 function singleSelected() {
@@ -349,11 +522,15 @@ function singleSelected() {
 
 function updateButtons() {
   const items = selectedEntries();
-  document.getElementById("copyBtn").disabled = busy || items.length === 0;
-  document.getElementById("moveBtn").disabled = busy || items.length === 0;
-  document.getElementById("renameBtn").disabled = busy || items.length !== 1;
-  document.getElementById("deleteBtn").disabled = busy || items.length === 0;
-  document.getElementById("mkdirBtn").disabled = busy;
+  const locked = busy || contentEl.classList.contains("loading");
+  document.getElementById("copyBtn").disabled = locked || items.length === 0;
+  document.getElementById("moveBtn").disabled = locked || items.length === 0;
+  document.getElementById("renameBtn").disabled = locked || items.length !== 1;
+  document.getElementById("deleteBtn").disabled = locked || items.length === 0;
+  document.getElementById("refreshBtn").disabled = locked;
+  document.getElementById("mkdirBtn").disabled = locked;
+  newTextBtn.disabled = locked;
+  selectAllEl.disabled = locked;
   selectAllEl.checked = entries.length > 0 && items.length === entries.length;
   selectAllEl.indeterminate = items.length > 0 && items.length < entries.length;
   renderClipboard();
@@ -368,18 +545,17 @@ function focusPath(path) {
   if (next) next.classList.add("focused");
 }
 
-function hoverPath(path) {
+function hoverRow(row) {
   if (hoverPaused) return;
-  const old = filesEl.querySelector("tr.hovered");
-  if (old && old.dataset.path === path) return;
-  const next = path ? filesEl.querySelector("tr[data-path=\"" + cssEscape(path) + "\"]") : null;
-  if (old) old.classList.remove("hovered");
-  if (next) next.classList.add("hovered");
+  if (hoveredRow === row) return;
+  clearHoverPath();
+  hoveredRow = row;
+  if (hoveredRow) hoveredRow.classList.add("hovered");
 }
 
 function clearHoverPath() {
-  const old = filesEl.querySelector("tr.hovered");
-  if (old) old.classList.remove("hovered");
+  if (hoveredRow) hoveredRow.classList.remove("hovered");
+  hoveredRow = null;
 }
 
 function cssEscape(value) {
@@ -393,11 +569,6 @@ function appendChildren(parent) {
   }
 }
 
-function setClass(el, name, enabled) {
-  if (enabled) el.classList.add(name);
-  else el.classList.remove(name);
-}
-
 function bindPress(el, fn) {
   let handled = false;
   const run = event => {
@@ -431,8 +602,10 @@ function togglePath(path, checked) {
 }
 
 function render() {
+  hoveredRow = null;
   filesEl.innerHTML = "";
   emptyEl.hidden = entries.length !== 0;
+  const fragment = document.createDocumentFragment();
 
   const rows = cwd === "/" ? entries : [{
     name: "..",
@@ -447,8 +620,10 @@ function render() {
     const isParent = item.type === "parent";
     const tr = document.createElement("tr");
     tr.dataset.path = item.path;
-    setClass(tr, "selected", !isParent && selected.has(item.path));
-    setClass(tr, "focused", focusedPath === item.path);
+    tr.dataset.name = item.name;
+    tr.dataset.type = item.type;
+    tr.className = (!isParent && selected.has(item.path) ? "selected " : "") +
+      (focusedPath === item.path ? "focused" : "");
 
     const selectTd = document.createElement("td");
     selectTd.className = "select-cell";
@@ -458,8 +633,6 @@ function render() {
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
       checkbox.checked = selected.has(item.path);
-      checkbox.addEventListener("focus", () => focusPath(item.path));
-      checkbox.addEventListener("change", () => togglePath(item.path, checkbox.checked));
       label.appendChild(checkbox);
       selectTd.appendChild(label);
     }
@@ -469,23 +642,18 @@ function render() {
     const nameBtn = document.createElement("button");
     nameBtn.className = "row-action";
     nameBtn.type = "button";
-    const icon = document.createElement("span");
-    icon.className = "icon";
-    const iconImg = document.createElement("img");
-    iconImg.src = isParent ? "/icon-up.png" : item.type === "d" ? "/icon-folder.png" : "/icon-file.png";
-    iconImg.alt = "";
-    icon.appendChild(iconImg);
     const nameText = document.createElement("span");
     nameText.className = "name-text";
     nameText.textContent = item.name;
     nameBtn.title = item.path;
-    nameBtn.addEventListener("focus", () => focusPath(item.path));
-    nameBtn.addEventListener("click", () => {
-      focusPath(item.path);
-      if (isParent || item.type === "d") load(item.path);
-      else togglePath(item.path, !selected.has(item.path));
-    });
-    appendChildren(nameBtn, icon, nameText);
+    const iconImg = document.createElement("img");
+    iconImg.className = "icon";
+    iconImg.src = isParent ? "/icon-up.png" : item.type === "d" ? "/icon-folder.png" :
+      isPreviewableImage(item) ? "/icon-image.png" :
+      isEditableText(item) ? "/icon-file.png" : "/icon-generic.png";
+    iconImg.alt = "";
+    nameBtn.appendChild(iconImg);
+    nameBtn.appendChild(nameText);
     nameTd.appendChild(nameBtn);
 
     appendChildren(
@@ -497,8 +665,9 @@ function render() {
       classCell("time-col", formatTime(item.mtime)),
       classCell("mode-col", isParent ? "" : "0" + Number(item.mode).toString(8))
     );
-    filesEl.appendChild(tr);
+    fragment.appendChild(tr);
   }
+  filesEl.appendChild(fragment);
   updateButtons();
 }
 
@@ -524,7 +693,14 @@ function classCell(className, text) {
 
 async function load(path, scrollTop, force) {
   const shouldScrollTop = scrollTop !== false;
-  if (busy && !force) return;
+  if ((busy && !force) || loadingPath) return;
+  loadingPath = path;
+  directoryLoadingTimer = setTimeout(() => {
+    contentLoadingEl.style.top = contentEl.scrollTop + "px";
+    contentLoadingEl.hidden = false;
+    contentEl.classList.add("loading");
+    updateButtons();
+  }, DIRECTORY_LOADING_DELAY);
   try {
     setStatus(t("readDir"));
     const data = await api("/api/list", { path });
@@ -544,6 +720,12 @@ async function load(path, scrollTop, force) {
     setStatus(t("totalItems", { count: entries.length }));
   } catch (err) {
     setStatus(err.message);
+  } finally {
+    clearTimeout(directoryLoadingTimer);
+    contentEl.classList.remove("loading");
+    contentLoadingEl.hidden = true;
+    loadingPath = null;
+    updateButtons();
   }
 }
 
@@ -582,7 +764,7 @@ async function runImmediateAction(label, fn) {
 }
 
 function setClipboard(op) {
-  if (busy || selected.size === 0) return;
+  if (busy || loadingPath || selected.size === 0) return;
   const items = selectedEntries().map(item => ({ path: item.path, name: item.name, type: item.type }));
   if (items.length === 0) return;
   clipboard = { op, items };
@@ -592,6 +774,7 @@ function setClipboard(op) {
 }
 
 function clearClipboard() {
+  if (busy || loadingPath) return;
   clipboard = null;
   renderClipboard();
   setStatus(t("clipboardCleared"));
@@ -693,7 +876,7 @@ function showPendingOverlay(text) {
 }
 
 async function actionPaste() {
-  if (busy || !clipboard || clipboard.items.length === 0) return;
+  if (busy || loadingPath || !clipboard || clipboard.items.length === 0) return;
   const op = clipboard.op;
   const label = clipboard.op === "move" ? t("move") : t("copy");
   const check = validatePasteTarget();
@@ -825,6 +1008,18 @@ async function pollTasks() {
   try {
     const data = await api("/api/tasks");
     const tasks = data.tasks || [];
+    const completion = data.completion;
+    if (lastCompletionId === null) {
+      lastCompletionId = completion ? completion.id : 0;
+    } else if (completion && completion.id !== lastCompletionId) {
+      lastCompletionId = completion.id;
+      alert(t(completion.file_count ? "transferCompleteFiles" : "transferComplete", {
+        label: opLabel(completion.op),
+        duration: formatDuration(Number(completion.elapsed || 0)),
+        size: formatBytes(completion.total, true),
+        count: completion.file_count
+      }));
+    }
     const wasBusy = busy;
     renderTasks(tasks);
     let shouldRefresh = false;
@@ -864,16 +1059,16 @@ function actionMove() {
 }
 
 function actionRename() {
-  if (busy) return;
+  if (busy || loadingPath) return;
   const item = singleSelected();
   if (!item) return;
-  const name = prompt(t("renamePrompt"), item.name);
+  const name = (prompt(t("renamePrompt"), item.name) || "").trim();
   if (!name || name === item.name) return;
   runImmediateAction(t("rename"), () => api("/api/rename", { path: item.path, name }));
 }
 
 function actionDelete() {
-  if (busy || selected.size === 0) return;
+  if (busy || loadingPath || selected.size === 0) return;
   const items = selectedEntries();
   const paths = items.map(item => item.path);
   const target = itemTitle(items);
@@ -894,9 +1089,9 @@ function actionExit() {
 
 document.getElementById("refreshBtn").addEventListener("click", () => load(cwd, false));
 document.getElementById("mkdirBtn").addEventListener("click", () => {
-  if (busy) return;
+  if (busy || loadingPath) return;
   const path = cwd;
-  const name = prompt(t("mkdirPrompt"));
+  const name = (prompt(t("mkdirPrompt")) || "").trim();
   if (!name) return;
   runImmediateAction(t("mkdir"), () => api("/api/mkdir", { path, name }));
 });
@@ -907,16 +1102,51 @@ clearClipboardBtn.addEventListener("click", clearClipboard);
 document.getElementById("renameBtn").addEventListener("click", actionRename);
 document.getElementById("deleteBtn").addEventListener("click", actionDelete);
 exitBtn.addEventListener("click", actionExit);
+textEditorCloseBtn.addEventListener("click", requestCloseTextEditor);
+textEditorSaveBtn.addEventListener("click", saveTextEditor);
+newTextBtn.addEventListener("click", actionNewText);
+imagePreviewCloseBtn.addEventListener("click", closeImagePreview);
+textEditorOverlayEl.addEventListener("click", event => {
+  if (event.target === textEditorOverlayEl) requestCloseTextEditor();
+});
+imagePreviewOverlayEl.addEventListener("click", event => {
+  if (event.target === imagePreviewOverlayEl) closeImagePreview();
+});
+contentEl.addEventListener("click", event => {
+  if (!loadingPath) return;
+  event.preventDefault();
+  event.stopPropagation();
+}, true);
+filesEl.addEventListener("focusin", event => {
+  const row = findRowFromTarget(event.target);
+  if (row) focusPath(row.dataset.path);
+});
+filesEl.addEventListener("change", event => {
+  const row = findRowFromTarget(event.target);
+  if (row && event.target.type === "checkbox") togglePath(row.dataset.path, event.target.checked);
+});
+filesEl.addEventListener("click", event => {
+  const row = findRowFromTarget(event.target);
+  if (!row) return;
+  let target = event.target;
+  while (target && target !== row && !target.classList.contains("row-action")) target = target.parentNode;
+  if (target === row && row.dataset.type !== "parent") return;
+  const item = { path: row.dataset.path, name: row.dataset.name, type: row.dataset.type };
+  focusPath(item.path);
+  if (item.type === "parent" || item.type === "d") load(item.path);
+  else if (isPreviewableImage(item)) openImagePreview(item);
+  else if (isEditableText(item)) openTextEditor(item);
+  else togglePath(item.path, !selected.has(item.path));
+});
 selectAllEl.addEventListener("change", () => {
   selected.clear();
   if (selectAllEl.checked) entries.forEach(item => selected.add(item.path));
   render();
 });
 contentEl.addEventListener("mousemove", event => {
-  const row = findRowFromTarget(event.target);
-  hoverPath(row ? row.getAttribute("data-path") : null);
+  hoverRow(findRowFromTarget(event.target));
 });
-contentEl.addEventListener("mouseleave", () => hoverPath(null));
+contentEl.addEventListener("mouseleave", () => hoverRow(null));
 contentEl.addEventListener("scroll", () => {
   hoverPaused = true;
   clearHoverPath();

src/filemgr.h

@@ -3,5 +3,6 @@
 #include <microhttpd.h>
 
 enum MHD_Result filemgr_api_request(struct MHD_Connection *conn,
-                                    const char *url);
+                                    const char *url, const char *method,
+                                    const char *body, size_t body_size);
 enum MHD_Result filemgr_fs_request(struct MHD_Connection *conn);

src/mime.c

@@ -8,8 +8,10 @@ typedef struct mime_entry {
 } mime_entry_t;
 
 static const mime_entry_t g_mimes[] = {
+  {"bmp", "image/bmp"},
   {"css", "text/css"},
   {"elf", "application/octet-stream"},
+  {"gif", "image/gif"},
   {"html", "text/html"},
   {"jpeg", "image/jpeg"},
   {"jpg", "image/jpeg"},
@@ -20,6 +22,7 @@ static const mime_entry_t g_mimes[] = {
   {"png", "image/png"},
   {"txt", "text/plain"},
   {"xml", "text/xml"},
+  {"webp", "image/webp"},
   {"zip", "application/zip"},
 };
 

src/websrv.c

@@ -13,6 +13,34 @@
 #include "filemgr.h"
 #include "websrv.h"
 
+#define REQUEST_BODY_MAX (1024 * 1024)
+
+typedef struct request_context {
+  char *body;
+  size_t size;
+  int too_large;
+} request_context_t;
+
+static enum MHD_Result
+websrv_body_too_large(struct MHD_Connection *conn) {
+  static const char json[] =
+    "{\"ok\":false,\"error\":\"request body is too large\","
+    "\"error_code\":\"text_file_too_large\",\"error_arg\":\"\"}";
+  struct MHD_Response *resp =
+    MHD_create_response_from_buffer(sizeof(json) - 1, (void *)json,
+                                    MHD_RESPMEM_PERSISTENT);
+  enum MHD_Result ret;
+
+  if(!resp) {
+    return MHD_NO;
+  }
+  MHD_add_response_header(resp, MHD_HTTP_HEADER_CONTENT_TYPE,
+                          "application/json");
+  ret = websrv_queue_response(conn, MHD_HTTP_CONTENT_TOO_LARGE, resp);
+  MHD_destroy_response(resp);
+  return ret;
+}
+
 enum MHD_Result
 websrv_queue_response(struct MHD_Connection *conn, unsigned int status,
                       struct MHD_Response *resp) {
@@ -26,10 +54,9 @@ websrv_on_request(void *cls, struct MHD_Connection *conn, const char *url,
                   const char *method, const char *version,
                   const char *upload_data, size_t *upload_data_size,
                   void **con_cls) {
+  request_context_t *ctx = *con_cls;
   (void)cls;
   (void)version;
-  (void)upload_data;
-  (void)upload_data_size;
 
   if(strcmp(method, MHD_HTTP_METHOD_GET) &&
      strcmp(method, MHD_HTTP_METHOD_POST) &&
@@ -37,13 +64,39 @@ websrv_on_request(void *cls, struct MHD_Connection *conn, const char *url,
     return MHD_NO;
   }
 
-  if(!*con_cls) {
-    *con_cls = (void *)1;
+  if(!ctx) {
+    if(!(ctx = calloc(1, sizeof(*ctx)))) {
+      return MHD_NO;
+    }
+    *con_cls = ctx;
     return MHD_YES;
   }
 
+  if(*upload_data_size) {
+    size_t chunk_size = *upload_data_size;
+
+    if(chunk_size > REQUEST_BODY_MAX - ctx->size) {
+      ctx->too_large = 1;
+    } else if(!ctx->too_large) {
+      char *body = realloc(ctx->body, ctx->size + chunk_size + 1);
+      if(!body) {
+        return MHD_NO;
+      }
+      ctx->body = body;
+      memcpy(ctx->body + ctx->size, upload_data, chunk_size);
+      ctx->size += chunk_size;
+      ctx->body[ctx->size] = 0;
+    }
+    *upload_data_size = 0;
+    return MHD_YES;
+  }
+
+  if(ctx->too_large) {
+    return websrv_body_too_large(conn);
+  }
+
   if(!strncmp(url, "/api/", 5)) {
-    return filemgr_api_request(conn, url);
+    return filemgr_api_request(conn, url, method, ctx->body, ctx->size);
   }
   if(!strcmp(url, "/fs")) {
     return filemgr_fs_request(conn);
@@ -60,6 +113,12 @@ websrv_on_completed(void *cls, struct MHD_Connection *connection,
   (void)cls;
   (void)connection;
   (void)toe;
+  request_context_t *ctx = *con_cls;
+
+  if(ctx) {
+    free(ctx->body);
+    free(ctx);
+  }
   *con_cls = NULL;
 }