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`;","deleted","label","children",[],[155],"files",[153],"counts",{"_175":32,"_176":137,"_177":32,"_178":179},"pulls","branches","forks","envVars",{"_180":32,"_181":32},"count","emptyCount","contents",[184],{"_102":154,"_95":155,"_156":115,"_157":-5,"_158":138,"_159":137,"_160":108,"_104":185,"_99":32,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":186},["D",1728227112245],[155],"file","upstreamProject",{"_102":145,"_95":96,"_111":-5,"_112":-5,"_109":110,"_23":190},{"_93":191,"_130":192},"rozek","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybjB5SWh3N1NZbElndXIzcnRoT2tlVGFQMFoifQ","upstreamBranch",{"_102":141,"_104":195,"_196":197,"_95":43,"_139":145,"_99":198,"_140":199,"_142":32,"_200":201,"_106":-5,"_150":22,"_109":110,"_149":191,"_16":147,"_148":96},["D",1746135872892],"updatedAt",["D",1728212895902],18,"7881091e-26d5-11f0-a5b3-569c3dd06744","lockfileKey","1746162446086-esm.town_v_rozek_GDI_FileUpload@18-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":208,"_213":137,"_214":198,"_215":216,"_229":108,"_230":212,"_231":232,"_235":-5},{"_102":103,"_95":96,"_104":209,"_106":-5,"_107":108,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":108,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":210,"_132":211,"_135":212,"_150":22},["D",1746218136302],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":141,"_142":32,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},"ahead","behind","diff",{"_217":218,"_166":226,"_227":228},"added",[219],{"_98":155,"_220":-7,"_221":222},"targetFile","sourceFile",{"_102":154,"_95":155,"_156":115,"_157":-5,"_158":138,"_159":137,"_160":108,"_104":161,"_99":32,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":-7,"_98":223,"_224":225},[155],"contentHash","c685b74a982b13e0990be8ad58d5fb62fd52193821a91cd698c1b31e5e6b47e9",[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_102":141,"_104":233,"_196":234,"_95":43,"_139":145,"_99":198,"_140":199,"_142":32,"_200":201,"_106":-5,"_150":22,"_109":110,"_149":191,"_16":147,"_148":96},["D",1746135872892],["D",1728212895902],"pull","actionData","errors"]

all

GDI_FileUpload

Mergeall/mainintorozek/main

Hmain.tsx+280-0