File Upload Interface

/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [file, setFile] = useState(null); const [fileName, setFileName] = useState(""); const [fileType, setFileType] = useState(""); const [fileSize, setFileSize] = useState(""); const [serverResponse, setServerResponse] = useState(""); const [isUploading, setIsUploading] = useState(false); const handleDrop = (e) => { e.preventDefault(); if (!isUploading) { const droppedFile = e.dataTransfer.files[0]; setFile(droppedFile); clearFileDetails(); } }; const handleDragOver = (e) => { e.preventDefault(); }; const handleFileSelect = (e) => { if (!isUploading) { const selectedFile = e.target.files[0]; setFile(selectedFile); clearFileDetails(); } }; const clearFileDetails = () => { setFileName(""); setFileType(""); setFileSize(""); setServerResponse(""); }; const formatFileSize = (bytes) => { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; }; const handleUpload = async () => { if (file && !isUploading) { setIsUploading(true); setServerResponse("Uploading file..."); clearFileDetails(); const formData = new FormData(); formData.append("file", file); try { const response = await fetch("https://rozek-gdi_fileuploadservice.web.val.run/", { method: "POST", body: formData, }); if (response.ok) { const data = await response.json(); setFileName(data.Name); setFileType(data.Type); setFileSize(formatFileSize(data.Size)); setServerResponse("File uploaded successfully!"); } else { throw new Error(`Upload failed: ${response.statusText}`); } } catch (error) { console.error("Upload error:", error); setServerResponse(`Upload error: ${error.message}`); } finally { setIsUploading(false); } } }; return (

File Upload

!isUploading && document.getElementById("fileInput").click()} >

Drop File here

(or click to select)

Server Response:

{serverResponse || "(none)"}

File Name:

File Type:

File Size:

); } function client() { const root = document.getElementById("root"); if (root) { createRoot(root).render(); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` File Upload Interface

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, #87CEEB, #E0F6FF); font-family: Arial, sans-serif; } .container { display: flex; justify-content: center; align-items: center; height: 100%; } .upload-box { background-color: white; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; width: 450px; } h2 { margin-top: 0; color: #333; } .drop-area { border: 3px dashed #ccc; border-radius: 10px; padding: 2rem; margin: 1rem 0; cursor: pointer; } .drop-area.disabled { opacity: 0.5; cursor: not-allowed; } .drop-text { font-size: 1.5rem; color: #999; margin: 0; } .drop-subtext { font-size: 1rem; color: #999; margin: 0.5rem 0 0; } .upload-button { background-color: #4CAF50; color: white; border: none; padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, opacity 0.3s; margin-bottom: 1rem; } .upload-button:hover { background-color: #45a049; } .upload-button:disabled { opacity: 0.5; cursor: not-allowed; } .file-details { text-align: left; margin-top: 1rem; } .response-line, .detail-line { display: flex; align-items: center; margin-bottom: 0.5rem; } .response-line label, .detail-line label { flex: 0 0 130px; font-weight: bold; white-space: nowrap; } .server-response, .detail-line input { flex: 1; padding: 0.25rem; border: 1px solid #ccc; border-radius: 3px; font-size: 0.9rem; } .server-response { min-height: 1.5rem; line-height:1.5rem; border:none; } .detail-line input { background-color: #f0f0f0; color: #333; } `;

GDI_FileUpload