/** @jsxImportSource https://esm.sh/react@18.2.0 */ import Prism from "https://esm.sh/prismjs@1.29.0?no-check"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; import "https://esm.sh/prismjs@1.29.0/components/prism-python?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-lua?no-check"; function App() { const [files, setFiles] = useState([]); const [activeTab, setActiveTab] = useState("all"); const textAreaRef = useRef(null); const onDrop = useCallback((e) => { e.preventDefault(); const droppedFiles = Array.from(e.dataTransfer.files); Promise.all(droppedFiles.map(file => file.text().then(content => ({ name: file.name, content })))).then( newFiles => { setFiles(prevFiles => [...prevFiles, ...newFiles]); }, ); }, []); const preventDefault = (e) => e.preventDefault(); const getFormattedContent = () => { return files.map(file => `${file.name}\n"""\n${file.content}\n"""\n`).join("\n"); }; const copyFiles = () => { const formattedContent = getFormattedContent(); if (textAreaRef.current) { textAreaRef.current.value = formattedContent; textAreaRef.current.select(); document.execCommand("copy"); } }; useEffect(() => { Prism.highlightAll(); }, [activeTab, files]); const getLanguage = (filename) => { const extension = filename.split(".").pop().toLowerCase(); switch (extension) { case "js": return "javascript"; case "css": return "css"; case "html": return "markup"; case "py": return "python"; case "lua": return "lua"; default: return "plaintext"; } }; const renderContent = () => { if (activeTab === "all") { return (

          
            {getFormattedContent()}

); } else { const file = files[activeTab]; return ( <>

{file.name}

            
              {file.content}

); } }; return (

File Viewer (html, js, css)

Drag and drop files here

{files.length > 0 && ( <>

          <div className="tabs">
            <button
              className={activeTab === "all" ? "active" : ""}
              onClick={() => setActiveTab("all")}
            >
              All Files
            </button>
            {files.map((file, index) => (
              <button
                key={index}
                className={index === activeTab ? "active" : ""}
                onClick={() => setActiveTab(index)}
              >
                {file.name}
              </button>
            ))}
          </div>
          <div className="file-content">
            {renderContent()}
          </div>
        </>
      )}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>File Drag and Drop Viewer</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mini.css@3.0.1/dist/mini-default.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: {
        "content-type": "text/html",
      },
    },
  );
}

const css = `
.dropzone {
  border: 2px dashed var(--secondary-border-color);
  border-radius: 20px;
  width: 100%;
  margin: 20px 0;
  padding: 20px;
  text-align: center;
  background-color: var(--background-color);
  cursor: pointer;
}
.dropzone:hover {
  background-color: var(--secondary-background-color);
}
.tabs {
  margin-top: 20px;
}
.tabs button {
  margin-right: 5px;
  margin-bottom: 5px;
}
.tabs button.active {
  background-color: var(--primary-color);
  color: var(--primary-inverse);
}
.file-content {
  margin-top: 20px;
  background-color: var(--background-color);
  border: 1px solid var(--secondary-border-color);
  border-radius: 5px;
  padding: 10px;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: var(--secondary-background-color);
  border: 1px solid var(--secondary-border-color);
  border-radius: 4px;
  padding: 10px;
  max-height: 400px;
  overflow-y: auto;
}
`;</article></body></html>

dragAndCopyViewer