File Upload Interface

File Upload

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

Drop File here

(or click to select)

\n \n

\n \n Upload\n \n\n

\n Server Response:\n

{serverResponse || \"(none)\"}

\n File Name:\n \n

\n File Type:\n \n

\n File Size:\n \n

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

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: linear-gradient(to bottom, #87CEEB, #E0F6FF);\n font-family: Arial, sans-serif;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.upload-box {\n background-color: white;\n border-radius: 10px;\n padding: 2rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n text-align: center;\n width: 450px;\n}\n\nh2 {\n margin-top: 0;\n color: #333;\n}\n\n.drop-area {\n border: 3px dashed #ccc;\n border-radius: 10px;\n padding: 2rem;\n margin: 1rem 0;\n cursor: pointer;\n}\n\n.drop-area.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.drop-text {\n font-size: 1.5rem;\n color: #999;\n margin: 0;\n}\n\n.drop-subtext {\n font-size: 1rem;\n color: #999;\n margin: 0.5rem 0 0;\n}\n\n.upload-button {\n background-color: #4CAF50;\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s, opacity 0.3s;\n margin-bottom: 1rem;\n}\n\n.upload-button:hover {\n background-color: #45a049;\n}\n\n.upload-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.file-details {\n text-align: left;\n margin-top: 1rem;\n}\n\n.response-line, .detail-line {\n display: flex;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.response-line label, .detail-line label {\n flex: 0 0 130px;\n font-weight: bold;\n white-space: nowrap;\n}\n\n.server-response, .detail-line input {\n flex: 1;\n padding: 0.25rem;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 0.9rem;\n}\n\n.server-response {\n min-height: 1.5rem;\n line-height:1.5rem;\n border:none;\n}\n\n.detail-line input {\n background-color: #f0f0f0;\n color: #333;\n}\n`;","createdAt",["D",1728212895902],"version",17,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","rozek","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybjB5SWh3N1NZbElndXIzcnRoT2tlVGFQMFoifQ","forkedVal",{"_114":136,"_130":131,"_98":137,"_119":138,"_139":-5},"bc74202c-83c2-11ef-ba13-de64eea55b61","GDI_HelloWorld",6,"prDisabledHint","interval","slug","rozek/GDI_FileUpload","description","This val is part of a series of examples to introduce \"val.town\" in my computer science course at\n Stuttgart University of Applied Sciences . The idea is to motivate even first-semester students not to wait but to put their\nideas into practice from the very beginning and implement web apps with\nfrontend and backend. It contains a simple web page which expects a file and uploads it to a\npreconfigured server. That server then responds with a JSON structure containg\nname, type and size of the file which the web page finally presents to the user. This val is the companion of https://rozek-gdi_fileuploadservice.web.val.run/ which contains the server part (aka \"backend\") for this example. The code was created using Townie - with only a few small manual corrections. This val is licensed under the MIT License.","versions",[147,150,154,158,162,166,170,174,178,182,186,190,193,197,201,205,208,212],{"_119":120,"_148":-5,"_117":149,"_114":112},"prId",["D",1728212895902],{"_119":151,"_148":-5,"_117":152,"_114":153},16,["D",1728212814430],"18828ed4-83d3-11ef-8940-de64eea55b61",{"_119":155,"_148":-5,"_117":156,"_114":157},15,["D",1728212601722],"99ba52bc-83d2-11ef-a745-de64eea55b61",{"_119":159,"_148":-5,"_117":160,"_114":161},14,["D",1728212559723],"80b15ebe-83d2-11ef-a745-de64eea55b61",{"_119":163,"_148":-5,"_117":164,"_114":165},13,["D",1728212462638],"46d396da-83d2-11ef-882d-de64eea55b61",{"_119":167,"_148":-5,"_117":168,"_114":169},12,["D",1728212300388],"e61e3782-83d1-11ef-9ae8-de64eea55b61",{"_119":171,"_148":-5,"_117":172,"_114":173},11,["D",1728212132372],"81f8e126-83d1-11ef-9f43-de64eea55b61",{"_119":175,"_148":-5,"_117":176,"_114":177},10,["D",1728211884421],"ee2e77e4-83d0-11ef-a758-de64eea55b61",{"_119":179,"_148":-5,"_117":180,"_114":181},9,["D",1728211825929],"cb516b78-83d0-11ef-9348-de64eea55b61",{"_119":183,"_148":-5,"_117":184,"_114":185},8,["D",1728211714525],"88ea9282-83d0-11ef-a758-de64eea55b61",{"_119":187,"_148":-5,"_117":188,"_114":189},7,["D",1728211714035],"889f790a-83d0-11ef-9e4c-de64eea55b61",{"_119":138,"_148":-5,"_117":191,"_114":192},["D",1728211590698],"3f1bbe1a-83d0-11ef-8c0f-de64eea55b61",{"_119":194,"_148":-5,"_117":195,"_114":196},5,["D",1728211590349],"3ee6ba1c-83d0-11ef-8017-de64eea55b61",{"_119":198,"_148":-5,"_117":199,"_114":200},4,["D",1728211511241],"0fbfd624-83d0-11ef-912a-de64eea55b61",{"_119":202,"_148":-5,"_117":203,"_114":204},3,["D",1728211463816],"f37beb56-83cf-11ef-8d2b-de64eea55b61",{"_119":90,"_148":-5,"_117":206,"_114":207},["D",1728211425699],"dcc3345a-83cf-11ef-97cb-de64eea55b61",{"_119":209,"_148":-5,"_117":210,"_114":211},1,["D",1728211221395],"62fcd202-83cf-11ef-8ba2-de64eea55b61",{"_119":31,"_148":-5,"_117":213,"_114":214},["D",1728210985721],"d683bb88-83ce-11ef-95fe-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":222,"_223":224,"_94":225},"single","redirect","/v/rozek/GDI_FileUpload/versions",{"_114":165,"_115":226,"_119":163,"_117":227,"_228":99,"_100":101,"_109":110,"_130":131,"_11":96,"_229":-5,"_230":-5,"_231":-5,"_219":26,"_141":142},"/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [file, setFile] = useState(null);\n const [fileName, setFileName] = useState(\"\");\n const [fileType, setFileType] = useState(\"\");\n const [fileSize, setFileSize] = useState(\"\");\n const [serverResponse, setServerResponse] = useState(\"\");\n\n const handleDrop = (e) => {\n e.preventDefault();\n const droppedFile = e.dataTransfer.files[0];\n setFile(droppedFile);\n clearFileDetails();\n };\n\n const handleDragOver = (e) => {\n e.preventDefault();\n };\n\n const handleFileSelect = (e) => {\n const selectedFile = e.target.files[0];\n setFile(selectedFile);\n clearFileDetails();\n };\n\n const clearFileDetails = () => {\n setFileName(\"\");\n setFileType(\"\");\n setFileSize(\"\");\n setServerResponse(\"\");\n };\n\n const formatFileSize = (bytes) => {\n if (bytes === 0) return \"0 Bytes\";\n const k = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + \" \" + sizes[i];\n };\n\n const handleUpload = async () => {\n if (file) {\n setServerResponse(\"Uploading file...\");\n \n const formData = new FormData();\n formData.append('file', file);\n\n try {\n const response = await fetch('https://rozek-gdi_fileuploadservice.web.val.run/', {\n method: 'POST',\n body: formData,\n });\n\n if (response.ok) {\n const data = await response.json();\n setFileName(data.Name);\n setFileType(data.Type);\n setFileSize(formatFileSize(data.Size));\n setServerResponse(\"File uploaded successfully!\");\n } else {\n throw new Error(`Upload failed: ${response.statusText}`);\n }\n } catch (error) {\n console.error('Upload error:', error);\n setServerResponse(`Upload error: ${error.message}`);\n clearFileDetails();\n }\n }\n };\n\n return (\n

File Upload

\n document.getElementById('fileInput').click()}\n >\n

Drop File here

(or click to select)

\n \n

\n \n \n

\n Server Response:\n

{serverResponse || \"(none)\"}

\n File Name:\n \n

\n File Type:\n \n

\n File Size:\n \n

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

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

GDI_FileUpload

Version 13