Android-like File Manager

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function FileManager() { const [currentPath, setCurrentPath] = useState('/'); const [files, setFiles] = useState([]); const [newFileName, setNewFileName] = useState(''); const [selectedFiles, setSelectedFiles] = useState([]); const [selectionMode, setSelectionMode] = useState(false); const [viewMode, setViewMode] = useState('list'); // 'list' or 'grid' useEffect(() => { fetchFiles(); }, [currentPath]); const fetchFiles = async () => { try { const response = await fetch(`/list-files?path=${encodeURIComponent(currentPath)}`); const fileList = await response.json(); setFiles(fileList.sort((a, b) => { // Sort directories first, then alphabetically if (a.type === 'directory' && b.type !== 'directory') return -1; if (a.type !== 'directory' && b.type === 'directory') return 1; return a.name.localeCompare(b.name); })); } catch (error) { console.error('Error fetching files:', error); } }; const createFolder = async () => { if (!newFileName.trim()) return; try { const response = await fetch('/create-folder', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: currentPath, folderName: newFileName }) }); if (response.ok) { fetchFiles(); setNewFileName(''); } } catch (error) { console.error('Error creating folder:', error); } }; const uploadFile = async (event) => { const file = event.target.files[0]; if (!file) return; const formData = new FormData(); formData.append('file', file); formData.append('path', currentPath); try { const response = await fetch('/upload-file', { method: 'POST', body: formData }); if (response.ok) { fetchFiles(); } } catch (error) { console.error('Error uploading file:', error); } }; const navigateToFolder = (folderName) => { if (selectionMode) return; const newPath = currentPath.endsWith('/') ? `${currentPath}${folderName}` : `${currentPath}/${folderName}`; setCurrentPath(newPath); }; const goBack = () => { const parentPath = currentPath.split('/').slice(0, -1).join('/') || '/'; setCurrentPath(parentPath); }; const deleteItem = async (itemName, isFolder) => { try { const response = await fetch('/delete-item', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: currentPath, itemName, isFolder }) }); if (response.ok) { fetchFiles(); setSelectedFiles([]); } } catch (error) { console.error('Error deleting item:', error); } }; const toggleFileSelection = (fileName) => { setSelectionMode(true); setSelectedFiles(prev => prev.includes(fileName) ? prev.filter(f => f !== fileName) : [...prev, fileName] ); }; const getFileIcon = (fileName) => { const extension = fileName.split('.').pop().toLowerCase(); const iconMap = { 'pdf': '📕', 'doc': '📄', 'docx': '📄', 'txt': '📝', 'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️', 'mp3': '🎵', 'wav': '🎵', 'mp4': '🎬', 'zip': '📦', 'rar': '📦' }; return iconMap[extension] || '📄'; }; const clearSelection = () => { setSelectedFiles([]); setSelectionMode(false); }; return (

{selectionMode ? ( <> {selectedFiles.length} selected ) : ( <> {currentPath} )}

setNewFileName(e.target.value)} placeholder="New folder name" />

{files.map((item, index) => (

{ if (selectionMode) { toggleFileSelection(item.name); } else if (item.type === 'directory') { navigateToFolder(item.name); } }} onLongPress={() => toggleFileSelection(item.name)} > {item.type === 'directory' ? '📁' : getFileIcon(item.name)} {item.name} {!selectionMode && ( )}

))}

); } function client() { // Add long press functionality function addLongPressEvent(element, callback) { let timer; element.addEventListener('mousedown', () => { timer = setTimeout(callback, 500); }); element.addEventListener('mouseup', () => clearTimeout(timer)); element.addEventListener('mouseleave', () => clearTimeout(timer)); // Touch events for mobile element.addEventListener('touchstart', (e) => { timer = setTimeout(callback, 500); }); element.addEventListener('touchend', () => clearTimeout(timer)); element.addEventListener('touchcancel', () => clearTimeout(timer)); } document.querySelectorAll('.file-item').forEach(item => { addLongPressEvent(item, () => { const event = new Event('longPress'); item.dispatchEvent(event); }); }); createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); const url = new URL(request.url); // Server-side file management endpoints (unchanged from previous implementation) if (url.pathname === '/list-files') { const path = url.searchParams.get('path') || '/'; try { const files = await blob.list(path); return new Response(JSON.stringify(files), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500 }); } } // Other server methods remain the same as in previous implementation // (create-folder, delete-item, upload-file endpoints) return new Response(` Android-like File Manager

`, { headers: { "content-type": "text/html" } }); } const css = ` body { font-family: 'Roboto', 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .file-manager { max-width: 100%; background-color: white; } .file-manager-header { background-color: #2196F3; color: white; padding: 15px; } .header-actions { display: flex; justify-content: space-between; align-items: center; } .header-actions button { background: none; border: none; color: white; font-size: 16px; } .current-path { flex-grow: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-actions { display: flex; justify-content: space-between; padding: 10px; background-color: #f5f5f5; } .file-list { overflow-y: auto; max-height: calc(100vh - 200px); } .file-list.list .file-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #e0e0e0; } .file-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 10px; } .file-list.grid .file-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px; } .file-item { cursor: pointer; transition: background-color 0.3s; } .file-item:active, .file-item.selected { background-color: rgba(33, 150, 243, 0.1); } .file-item.folder { font-weight: bold; } .delete-btn { background: none; border: none; cursor: pointer; } input[type="file"] { width: 100%; } @media (max-width: 600px) { .file-actions { flex-direction: column; } .file-actions > * { margin-bottom: 10px; } } `;

fileManagerApp