اتصال به فضای ذخیره‌سازی ابری در برنامه‌های NextJS

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

LIARA_ENDPOINT=https://storage.c2.liara.site
LIARA_BUCKET_NAME=my-bucket-name
LIARA_ACCESS_KEY=nieiou08cnbod58p
LIARA_SECRET_KEY=df67ef3e-ccb6-4a25-97ba-3526f33da3fc

// src/lib/s3.ts or /lib/s3.ts
import { S3Client } from "@aws-sdk/client-s3";

export const s3 = new S3Client({
region: "default",
endpoint: process.env.LIARA_ENDPOINT,
credentials: {
  accessKeyId: process.env.LIARA_ACCESS_KEY!,
  secretAccessKey: process.env.LIARA_SECRET_KEY!,
},
forcePathStyle: true,
});

app/api/storage/ 
├── upload/route.ts            
├── list-files/route.ts        
├── download/route.ts          
├── presigned/route.ts         
├── delete/route.ts            
├── list-buckets/route.ts      

// src/app/api/storage/upload/route.ts or /app/api/storage/upload/route.ts
import { PutObjectCommand } from "@aws-sdk/client-s3";
import { s3 } from "@/lib/s3";

export async function POST(req: Request) {
const formData = await req.formData();
const file = formData.get("file") as File;
const arrayBuffer = await file.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);

const command = new PutObjectCommand({
  Bucket: process.env.LIARA_BUCKET_NAME,
  Key: file.name,
  Body: buffer,
  ContentType: file.type,
});

await s3.send(command);

return Response.json({ message: "File uploaded" });
}

// src/app/api/storage/presigned/route.ts or /app/api/storage/presigned/route.ts
import { GetObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { s3 } from "@/lib/s3";

export async function POST(req: Request) {
const { key } = await req.json();

const command = new GetObjectCommand({
  Bucket: process.env.LIARA_BUCKET_NAME,
  Key: key,
});

const url = await getSignedUrl(s3, command, { expiresIn: 3600 });

return Response.json({ url });
}

// src/app/api/storage/presigned-custom-domain/route.ts or /app/api/storage/presigned-custom-domain/route.ts
import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

const CUSTOM_DOMAIN = "example.com"; // change this to your custom domain

// without forcePathStyle, so the bucket name is placed in the host
const presignClient = new S3Client({
region: "default",
endpoint: process.env.LIARA_ENDPOINT,
requestChecksumCalculation: "WHEN_REQUIRED",
responseChecksumValidation: "WHEN_REQUIRED",
credentials: {
  accessKeyId: process.env.LIARA_ACCESS_KEY!,
  secretAccessKey: process.env.LIARA_SECRET_KEY!,
},
});

export async function POST(req: Request) {
const { key } = await req.json();

const signed = await getSignedUrl(
  presignClient,
  new GetObjectCommand({
    Bucket: process.env.LIARA_BUCKET_NAME,
    Key: key,
  }),
  { expiresIn: 3600 }
);

const url = new URL(signed);
url.host = CUSTOM_DOMAIN;

return Response.json({ url: url.toString() });
}

// src/app/api/storage/list-files/route.ts or /app/api/storage/list-files/route.ts
import { ListObjectsV2Command } from "@aws-sdk/client-s3";
import { s3 } from "@/lib/s3";

export async function GET() {
const command = new ListObjectsV2Command({
  Bucket: process.env.LIARA_BUCKET_NAME,
});

const data = await s3.send(command);
return Response.json({ files: data.Contents });
}

// src/app/api/storage/list-buckets/route.ts or /app/api/storage/list-buckets/route.ts
import { ListBucketsCommand } from "@aws-sdk/client-s3";
import { s3 } from "@/lib/s3";

export async function GET() {
const command = new ListBucketsCommand({});
const data = await s3.send(command);
return Response.json({ buckets: data.Buckets });
}

// src/app/api/storage/delete/route.ts or /app/api/storage/delete/route.ts
import { DeleteObjectCommand } from "@aws-sdk/client-s3";
import { s3 } from "@/lib/s3";

export async function DELETE(req: Request) {
const { key } = await req.json();

const command = new DeleteObjectCommand({
  Bucket: process.env.LIARA_BUCKET_NAME,
  Key: key,
});

await s3.send(command);

return Response.json({ message: "File deleted" });
}

npx shadcn@latest init

npx shadcn@latest add button input card

// src/app/storage/page.tsx or /app/storage/page.tsx
'use client';

import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { toast } from 'sonner';

export default function FileManager() {
const [files, setFiles] = useState<any[]>([]);
const [file, setFile] = useState<File | null>(null);
const [loading, setLoading] = useState(false);

const fetchFiles = async () => {
  const res = await fetch('/api/storage/list-files');
  const data = await res.json();
  setFiles(data.files || []);
};

const uploadFile = async () => {
  if (!file) return;
  setLoading(true);
  const formData = new FormData();
  formData.append('file', file);
  const res = await fetch('/api/storage/upload', {
    method: 'POST',
    body: formData,
  });
  setLoading(false);
  if (res.ok) {
    toast.success('Upload Successful');
    fetchFiles();
  } else {
    toast.error('Error uploading file');
  }
};

const deleteFile = async (key: string) => {
  const res = await fetch('/api/storage/delete', {
    method: 'DELETE',
    body: JSON.stringify({ key }),
  });
  if (res.ok) {
    toast.success('File deleted successfully');
    fetchFiles();
  } else {
    toast.error('Error deleting file');
  }
};

const downloadFile = async (key: string) => {
  const res = await fetch('/api/storage/presigned', {
    method: 'POST',
    body: JSON.stringify({ key }),
  });
  const data = await res.json();
  window.open(data.url, '_blank');
};

useEffect(() => {
  fetchFiles();
}, []);

return (
  <div className="p-4 max-w-2xl mx-auto">
    <h1 className="text-2xl font-bold mb-4">Managing Files</h1>

    <div className="flex gap-2 mb-4">
      <Input type="file" onChange={(e) => setFile(e.target.files?.[0] || null)} />
      <Button onClick={uploadFile} disabled={loading || !file}>
        {loading ? 'Uploading...' : 'Uploading file'}
      </Button>
    </div>

    <div className="grid gap-2">
      {files.map((file) => (
        <Card key={file.Key} className="flex items-center justify-between p-2">
          <CardContent className="flex-1 truncate">{file.Key}</CardContent>
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => downloadFile(file.Key)}>Download</Button>
            <Button variant="destructive" onClick={() => deleteFile(file.Key)}>Delete</Button>
          </div>
        </Card>
      ))}
    </div>
  </div>
);
}