feat: upload details, style tweaks

Author: jlengstorf

src/layouts/default.astro

@@ -172,14 +172,22 @@ const nav = [
 </style>
 
 <style is:global>
+	* {
+		box-sizing: border-box;
+	}
+
 	.upload {
 		background: color-mix(in oklab, var(--orange-600), var(--bg) 95%);
 		border: 1px solid color-mix(in oklab, var(--orange-600), var(--bg) 40%);
 		border-radius: 0.5rem;
-		margin-block-end: 3rem;
+		margin-block-end: 1rem;
 		padding: 1.5rem;
 		text-align: center;
-		width: 100cqi;
+		inline-size: 100cqi;
+
+		div + & {
+			margin-block-start: 1rem;
+		}
 	}
 
 	.gallery {
@@ -199,7 +207,7 @@ const nav = [
 		flex-direction: column;
 		inline-size: max-content;
 		justify-content: center;
-		max-inline-size: 200px;
+		max-inline-size: calc(200px + 3rem + 2px);
 		padding: 1.5rem;
 		text-align: center;
 
@@ -214,18 +222,50 @@ const nav = [
 		}
 
 		& img {
-			height: auto;
-			width: 200px;
+			block-size: auto;
+			inline-size: 200px;
 			margin-inline: auto;
 		}
 
 		&.double img {
 			inline-size: 300px;
 		}
+	}
+
+	:is(.error, .success) {
+		background: color-mix(in oklch, var(--color), var(--bg) 80%);
+		border: 1px solid var(--color);
+		border-radius: 0.5rem;
+		inline-size: 100cqi;
+		padding: 1.5rem;
+		text-align: center;
+
+		& :is(h3, p, pre) {
+			margin: 0;
+		}
 
-		& pre {
+		& h3 {
+			inline-size: 100%;
+			margin-block: 0;
+			text-align: left;
+		}
+
+		pre {
 			font-size: 0.875rem;
+			inline-size: 100%;
+			margin: 0 auto;
+			overflow-x: scroll;
+			padding: 0.5rem 1.5rem;
 			text-align: left;
+			white-space: pre-wrap;
 		}
 	}
+
+	.error {
+		--color: red;
+	}
+
+	.success {
+		--color: green;
+	}
 </style>

src/pages/01-basic.astro

@@ -9,7 +9,7 @@ cloudinary.config({
 	api_secret: import.meta.env.CLOUDINARY_API_SECRET,
 });
 
-const banner = cloudinary.url('cloudinary-images/tagging-test.jpg');
+const banner = cloudinary.url('cloudinary-images/jason.jpg');
 ---
 
 <Layout>

src/pages/04-user-uploads.astro

@@ -34,6 +34,7 @@ const uploadStream = async (buffer: Uint8Array) => {
 let uploadedFile: any | undefined;
 let banner;
 let thumb;
+let public_id;
 let alt;
 
 if (Astro.request.method === 'POST') {
@@ -48,7 +49,7 @@ if (Astro.request.method === 'POST') {
 }
 
 if (uploadedFile && uploadedFile.public_id) {
-	const public_id = uploadedFile.public_id;
+	public_id = uploadedFile.public_id;
 	alt = uploadedFile.info?.detection?.captioning?.data?.caption ?? '';
 
 	const base_transformation: TransformationOptions = {
@@ -72,6 +73,15 @@ if (uploadedFile && uploadedFile.public_id) {
 <Layout>
 	<h1>04. User Uploads</h1>
 
+	{
+		uploadedFile ? (
+			<div class="success">
+				<h3>Upload Details</h3>
+				<pre>{JSON.stringify({ public_id, alt }, null, 2)}</pre>
+			</div>
+		) : null
+	}
+
 	<form method="post" enctype="multipart/form-data" class="upload">
 		<label for="file">Upload your photo:</label>
 		<input type="file" name="file" id="file" accept="image/*" required />
@@ -109,6 +119,8 @@ if (uploadedFile && uploadedFile.public_id) {
 	.uploads {
 		display: flex;
 		gap: 3rem;
+		inline-size: 100cqi;
+		justify-content: space-between;
 	}
 
 	.image {

src/pages/05-moderation.astro

@@ -37,6 +37,7 @@ const uploadStream = async (buffer: Uint8Array) => {
 
 let uploadedFile: any | undefined;
 let moderationStatus;
+let public_id;
 let alt;
 
 if (Astro.request.method === 'POST') {
@@ -51,6 +52,7 @@ if (Astro.request.method === 'POST') {
 }
 
 if (uploadedFile && uploadedFile.public_id) {
+	public_id = uploadedFile.public_id;
 	alt = uploadedFile.info?.detection?.captioning?.data?.caption ?? '';
 
 	moderationStatus = uploadedFile.moderation.at(0).status;
@@ -87,6 +89,15 @@ const gallery = uploads.map((upload) => {
 		) : null
 	}
 
+	{
+		uploadedFile ? (
+			<div class="success">
+				<h3>Upload Details</h3>
+				<pre>{JSON.stringify({ public_id, alt }, null, 2)}</pre>
+			</div>
+		) : null
+	}
+
 	<form method="post" enctype="multipart/form-data" class="upload">
 		<label for="file">Upload your photo:</label>
 		<input type="file" name="file" id="file" required />
@@ -108,41 +119,21 @@ const gallery = uploads.map((upload) => {
 			))
 		}
 	</div>
-
-	{
-		uploadedFile ? (
-			<pre style="max-width: 100vw">
-				{JSON.stringify(uploadedFile, null, 2)}
-			</pre>
-		) : null
-	}
 </Layout>
 
 <style>
-	.error {
-		background: color-mix(in oklch, red, var(--bg) 92%);
-		border: 1px solid red;
-		border-radius: 0.25rem;
-		padding: 1.5rem;
-		text-align: center;
-		width: 100cqi;
-
-		& p {
-			margin: 0;
-		}
-	}
-
 	.uploads {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 3rem;
+		inline-size: 100cqi;
 		justify-content: center;
 	}
 
 	.image {
 		border: 1px solid color-mix(in oklch, var(--orange-600), transparent 60%);
 		border-radius: 0.5rem;
-		max-inline-size: 150px;
+		max-inline-size: calc(150px + 3rem + 2px);
 		padding: 1.5rem;
 	}
 </style>