feat: adds note about the max file size

Author: akoenig

app/routes/healthz.ts

@@ -0,0 +1,16 @@
+/**
+ * @akoenig/remix-observable-file-upload-demo
+ *
+ * Copyright, 2023 - André König, Hamburg, Germany
+ *
+ * All rights reserved
+ */
+
+/**
+ * @author André König <[email protected]>
+ *
+ */
+
+export function loader() {
+  return new Response();
+}

app/routes/upload.advanced.tsx

@@ -56,6 +56,8 @@ export function loader() {
 export async function action({ request }: ActionFunctionArgs) {
   const start = Date.now();
 
+  const maxPartSize = 100_000_000;
+
   const url = new URL(request.url);
   const uploadId = url.searchParams.get("uploadId");
 
@@ -68,11 +70,19 @@ export async function action({ request }: ActionFunctionArgs) {
 
   // Get the overall filesize of the uploadable file.
   const filesize = Number(request.headers.get("Content-Length"));
+
+  if (filesize > maxPartSize) {
+    throw new Response(null, {
+      status: 400,
+      statusText: "File size exceeded",
+    });
+  }
+
   const filesizeInKilobytes = Math.floor(filesize / 1024);
 
   const observableFileUploadHandler = createObservableFileUploadHandler({
     avoidFileConflicts: true,
-    maxPartSize: 100_000_000,
+    maxPartSize,
     onProgress({ name, filename, uploadedBytes }) {
       const elapsedMilliseconds = Date.now() - start;
 
@@ -158,6 +168,19 @@ export default function AdvancedExample() {
             />
           </label>
 
+          <p className="text-center text-muted-foreground">
+            <small>
+              max. 100 MB (configurable via{" "}
+              <Link
+                to="https://github.com/akoenig/remix-observable-file-upload-demo/blob/33aa02bfa7703e02b2ea0033f6f83135ffb361ca/app/routes/upload.advanced.tsx#L75"
+                className="text-pink-500 underline"
+              >
+                maxPartSize
+              </Link>
+              )
+            </small>
+          </p>
+
           {progress?.success && progress.event ? (
             <div className="flex flex-col bg-slate-50 rounded-lg p-4 gap-4 border-slate-100 border-[1px]">
               <div className="flex gap-3">

app/routes/upload.basic.tsx

@@ -50,6 +50,8 @@ export async function action({ request }: ActionFunctionArgs) {
   const url = new URL(request.url);
   const uploadId = url.searchParams.get("uploadId");
 
+  const maxPartSize = 100_000_000;
+
   if (!uploadId) {
     throw new Response(null, {
       status: 400,
@@ -60,9 +62,16 @@ export async function action({ request }: ActionFunctionArgs) {
   // Get the overall filesize of the uploadable file.
   const filesize = Number(request.headers.get("Content-Length"));
 
+  if (filesize > maxPartSize) {
+    throw new Response(null, {
+      status: 400,
+      statusText: "File size exceeded",
+    });
+  }
+
   const observableFileUploadHandler = createObservableFileUploadHandler({
     avoidFileConflicts: true,
-    maxPartSize: 100_000_000,
+    maxPartSize,
     onProgress({ name, filename, uploadedBytes }) {
       uploadEventBus.emit<UploadProgressEvent>({
         uploadId,
@@ -126,6 +135,19 @@ export default function BasicExample() {
 
           <Button type="submit">Upload</Button>
 
+          <p className="text-center text-muted-foreground">
+            <small>
+              max. 100 MB (configurable via{" "}
+              <Link
+                to="https://github.com/akoenig/remix-observable-file-upload-demo/blob/33aa02bfa7703e02b2ea0033f6f83135ffb361ca/app/routes/upload.basic.tsx#L65"
+                className="text-pink-500 underline"
+              >
+                maxPartSize
+              </Link>
+              )
+            </small>
+          </p>
+
           {progress?.success && progress.event ? (
             <div className="flex flex-col gap-4">
               <Progress value={progress.event.percentageStatus} />

fly.toml

@@ -24,6 +24,6 @@ primary_region = "ams"
     timeout = "2s"
     grace_period = "5s"
     method = "GET"
-    path = "/"
+    path = "/healthz"
     protocol = "http"
     tls_skip_verify = false