shipd 0.1.3 → 0.2.0

package/features/file-upload/app/dashboard/upload/page.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Check, FileImage, Upload, X } from "lucide-react";
+import Image from "next/image";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+
+interface UploadedFile {
+  id: string;
+  name: string;
+  url: string;
+  size: number;
+  type: string;
+  uploadedAt: Date;
+}
+
+export default function UploadPage() {
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [dragActive, setDragActive] = useState(false);
+
+  const handleFileUpload = async (files: FileList | File[]) => {
+    const fileArray = Array.from(files);
+
+    for (const file of fileArray) {
+      if (!file.type.startsWith("image/")) {
+        toast.error(`${file.name} is not an image file`);
+        continue;
+      }
+
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error(`${file.name} is too large (max 5MB)`);
+        continue;
+      }
+
+      setUploading(true);
+      setUploadProgress(0);
+
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        // Simulate progress
+        const progressInterval = setInterval(() => {
+          setUploadProgress((prev) => {
+            if (prev >= 90) {
+              clearInterval(progressInterval);
+              return prev;
+            }
+            return prev + Math.random() * 20;
+          });
+        }, 200);
+
+        const response = await fetch("/api/upload-image", {
+          method: "POST",
+          body: formData,
+        });
+
+        clearInterval(progressInterval);
+        setUploadProgress(100);
+
+        if (!response.ok) {
+          throw new Error("Upload failed");
+        }
+
+        const { url } = await response.json();
+
+        const uploadedFile: UploadedFile = {
+          id: crypto.randomUUID(),
+          name: file.name,
+          url,
+          size: file.size,
+          type: file.type,
+          uploadedAt: new Date(),
+        };
+
+        setUploadedFiles((prev) => [uploadedFile, ...prev]);
+        toast.success(`${file.name} uploaded successfully`);
+      } catch (error) {
+        console.error("Upload error:", error);
+        toast.error(`Failed to upload ${file.name}`);
+      } finally {
+        setUploading(false);
+        setUploadProgress(0);
+      }
+    }
+  };
+
+  const handleDrag = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      handleFileUpload(e.dataTransfer.files);
+    }
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      handleFileUpload(e.target.files);
+    }
+  };
+
+  const removeFile = (id: string) => {
+    setUploadedFiles((prev) => prev.filter((file) => file.id !== id));
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-3xl font-semibold tracking-tight">File Upload</h1>
+        <p className="text-muted-foreground mt-2">
+          Upload images to Cloudflare R2 storage with drag and drop support
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Upload Area */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Upload className="h-5 w-5" />
+              Upload Images
+            </CardTitle>
+            <CardDescription>
+              Upload images to Cloudflare R2. Maximum file size is 5MB.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div
+              className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
+                dragActive
+                  ? "border-primary bg-primary/5"
+                  : "border-muted-foreground/25 hover:border-muted-foreground/50"
+              }`}
+              onDragEnter={handleDrag}
+              onDragLeave={handleDrag}
+              onDragOver={handleDrag}
+              onDrop={handleDrop}
+            >
+              <Input
+                type="file"
+                accept="image/*"
+                multiple
+                onChange={handleInputChange}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                disabled={uploading}
+              />
+              <div className="space-y-2">
+                <FileImage className="h-10 w-10 mx-auto text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">
+                    {dragActive
+                      ? "Drop files here"
+                      : "Click to upload or drag and drop"}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    PNG, JPG, GIF up to 5MB
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {uploading && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span>Uploading...</span>
+                  <span>{Math.round(uploadProgress)}%</span>
+                </div>
+                <Progress value={uploadProgress} className="h-2" />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Upload Info */}
+        <Card>
+          <CardHeader>
+            <CardTitle>About R2 Storage</CardTitle>
+            <CardDescription>
+              Cloudflare R2 provides S3-compatible object storage
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">Global CDN</p>
+                  <p className="text-muted-foreground">
+                    Fast delivery worldwide
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">Zero Egress Fees</p>
+                  <p className="text-muted-foreground">No bandwidth charges</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">S3 Compatible</p>
+                  <p className="text-muted-foreground">
+                    Works with existing tools
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <Check className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="text-sm">
+                  <p className="font-medium">Auto Scaling</p>
+                  <p className="text-muted-foreground">Handles any file size</p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Uploaded Files */}
+      {uploadedFiles.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Uploaded Files ({uploadedFiles.length})</CardTitle>
+            <CardDescription>
+              Recently uploaded images to R2 storage
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {uploadedFiles.map((file) => (
+                <div
+                  key={file.id}
+                  className="group relative border rounded-lg overflow-hidden hover:shadow-md transition-shadow"
+                >
+                  <div className="aspect-video relative bg-muted">
+                    <Image
+                      src={file.url}
+                      alt={file.name}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    />
+                  </div>
+                  <div className="p-3">
+                    <p
+                      className="font-medium text-sm truncate"
+                      title={file.name}
+                    >
+                      {file.name}
+                    </p>
+                    <div className="flex items-center justify-between text-xs text-muted-foreground mt-1">
+                      <span>{formatFileSize(file.size)}</span>
+                      <span>{file.uploadedAt.toLocaleDateString()}</span>
+                    </div>
+                    <div className="mt-2 flex items-center gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => navigator.clipboard.writeText(file.url)}
+                        className="flex-1 text-xs"
+                      >
+                        Copy URL
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => window.open(file.url, "_blank")}
+                        className="flex-1 text-xs"
+                      >
+                        Open
+                      </Button>
+                    </div>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => removeFile(file.id)}
+                    className="absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/features/file-upload/feature.config.json

@@ -0,0 +1,23 @@
+{
+  "name": "file-upload",
+  "version": "1.0.0",
+  "description": "Cloudflare R2 file upload with drag-and-drop interface",
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.800.0"
+  },
+  "devDependencies": {},
+  "envVars": [
+    "R2_UPLOAD_IMAGE_ACCESS_KEY_ID",
+    "R2_UPLOAD_IMAGE_SECRET_ACCESS_KEY",
+    "CLOUDFLARE_ACCOUNT_ID",
+    "R2_UPLOAD_IMAGE_BUCKET_NAME"
+  ],
+  "files": [
+    "app/api/upload-image/**/*",
+    "app/dashboard/upload/**/*",
+    "lib/upload-image.ts"
+  ],
+  "requires": [],
+  "conflicts": []
+}
+

package/features/file-upload/lib/upload-image.ts

@@ -0,0 +1,28 @@
+import {
+  S3Client,
+  PutObjectCommand,
+} from "@aws-sdk/client-s3";
+
+const r2 = new S3Client({
+  region: "auto", // required for R2
+  endpoint: `https://${process.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  credentials: {
+    accessKeyId: process.env.R2_UPLOAD_IMAGE_ACCESS_KEY_ID!,
+    secretAccessKey: process.env.R2_UPLOAD_IMAGE_SECRET_ACCESS_KEY!,
+  },
+});
+
+export const uploadImageAssets = async (buffer: Buffer, key: string) => {
+  await r2.send(
+    new PutObjectCommand({
+      Bucket: process.env.R2_UPLOAD_IMAGE_BUCKET_NAME!,
+      Key: key,
+      Body: buffer,
+      ContentType: "image/*",
+      ACL: "public-read", // optional if bucket is public
+    })
+  );
+
+  const publicUrl = `https://pub-6f0cf05705c7412b93a792350f3b3aa5.r2.dev/${key}`;
+  return publicUrl;
+};