feat: integrate S3 storage adapter and update file upload functionality
This commit is contained in:
@@ -1,69 +1,25 @@
|
||||
import {
|
||||
StorageProvider,
|
||||
StorageResult,
|
||||
} from '@/lib/storage/storage.interface';
|
||||
import { StorageProvider } from '@/lib/storage/storage.interface';
|
||||
import { TypedResult, wrap } from '@/utils/types/results';
|
||||
import {
|
||||
DeleteObjectCommand,
|
||||
ObjectCannedACL,
|
||||
PutObjectCommand,
|
||||
S3Client,
|
||||
} from '@aws-sdk/client-s3';
|
||||
import { promises as fs } from 'fs';
|
||||
import path from 'path';
|
||||
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
|
||||
import { z } from 'zod';
|
||||
|
||||
/**
|
||||
* Local file system storage adapter
|
||||
* Saves files to the public/uploads directory and returns local paths
|
||||
* Configuration for S3 storage adapter
|
||||
*/
|
||||
export class LocalStorageAdapter implements StorageProvider {
|
||||
private readonly uploadsDir: string;
|
||||
|
||||
constructor(uploadsDir: string = 'public/uploads') {
|
||||
this.uploadsDir = uploadsDir;
|
||||
}
|
||||
|
||||
async put(
|
||||
key: string,
|
||||
file: Buffer | Blob,
|
||||
_contentType: string
|
||||
): Promise<StorageResult> {
|
||||
// Ensure directory exists
|
||||
await fs.mkdir(this.uploadsDir, { recursive: true });
|
||||
|
||||
// Convert Blob to Buffer if needed
|
||||
const buffer =
|
||||
file instanceof Blob ? Buffer.from(await file.arrayBuffer()) : file;
|
||||
|
||||
// Write file to disk
|
||||
const filePath = path.join(this.uploadsDir, key);
|
||||
await fs.writeFile(filePath, buffer);
|
||||
|
||||
// Return local path as public URL
|
||||
const publicUrl = `/${this.uploadsDir}/${key}`;
|
||||
|
||||
return {
|
||||
type: 'local',
|
||||
provider: null,
|
||||
key,
|
||||
publicUrl,
|
||||
};
|
||||
}
|
||||
|
||||
async delete(key: string): Promise<void> {
|
||||
const filePath = path.join(this.uploadsDir, key);
|
||||
try {
|
||||
await fs.unlink(filePath);
|
||||
} catch (error) {
|
||||
// File might not exist, silently ignore
|
||||
if (
|
||||
error instanceof Error &&
|
||||
'code' in error &&
|
||||
error.code !== 'ENOENT'
|
||||
) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const S3StorageConfig = z.object({
|
||||
endpoint: z.string(),
|
||||
bucket: z.string(),
|
||||
region: z.string(),
|
||||
accessKey: z.string(),
|
||||
secretKey: z.string(),
|
||||
});
|
||||
export type S3StorageConfig = z.infer<typeof S3StorageConfig>;
|
||||
|
||||
/**
|
||||
* AWS S3 storage adapter
|
||||
@@ -71,68 +27,71 @@ export class LocalStorageAdapter implements StorageProvider {
|
||||
*/
|
||||
export class S3StorageAdapter implements StorageProvider {
|
||||
private readonly s3Client: S3Client;
|
||||
private readonly endpoint: string;
|
||||
private readonly bucketName: string;
|
||||
private readonly region: string;
|
||||
|
||||
constructor(
|
||||
bucketName: string,
|
||||
region: string = 'us-east-1',
|
||||
s3Client?: S3Client
|
||||
) {
|
||||
this.bucketName = bucketName;
|
||||
this.region = region;
|
||||
readonly get: (
|
||||
...args: Parameters<StorageProvider['get']>
|
||||
) => Promise<TypedResult<string>>;
|
||||
readonly put: (
|
||||
...args: Parameters<StorageProvider['put']>
|
||||
) => Promise<TypedResult<string>>;
|
||||
readonly delete: (
|
||||
...args: Parameters<StorageProvider['delete']>
|
||||
) => Promise<TypedResult<void>>;
|
||||
|
||||
constructor(config: S3StorageConfig, s3Client?: S3Client) {
|
||||
this.endpoint = config.endpoint;
|
||||
this.bucketName = config.bucket;
|
||||
this.s3Client =
|
||||
s3Client ||
|
||||
new S3Client({
|
||||
region: this.region,
|
||||
endpoint: config.endpoint,
|
||||
region: config.region,
|
||||
forcePathStyle: true,
|
||||
credentials: {
|
||||
accessKeyId: process.env.AWS_ACCESS_KEY_ID || '',
|
||||
secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || '',
|
||||
accessKeyId: config.accessKey,
|
||||
secretAccessKey: config.secretKey,
|
||||
},
|
||||
});
|
||||
|
||||
this.get = wrap(this._get.bind(this));
|
||||
this.put = wrap(this._put.bind(this));
|
||||
this.delete = wrap(this._delete.bind(this));
|
||||
}
|
||||
|
||||
async put(
|
||||
key: string,
|
||||
file: Buffer | Blob,
|
||||
contentType: string
|
||||
): Promise<StorageResult> {
|
||||
// Convert Blob to Buffer if needed
|
||||
const buffer =
|
||||
file instanceof Blob ? Buffer.from(await file.arrayBuffer()) : file;
|
||||
private async _get(key: string): Promise<string> {
|
||||
return `${this.endpoint}/${this.bucketName}/${key}`;
|
||||
}
|
||||
|
||||
// Upload to S3
|
||||
private async _put(key: string, contentType: string): Promise<string> {
|
||||
const command = new PutObjectCommand({
|
||||
Bucket: this.bucketName,
|
||||
Key: key,
|
||||
ContentType: contentType,
|
||||
ACL: ObjectCannedACL.public_read,
|
||||
});
|
||||
|
||||
return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
|
||||
}
|
||||
|
||||
private async _delete(key: string): Promise<void> {
|
||||
await this.s3Client.send(
|
||||
new PutObjectCommand({
|
||||
new DeleteObjectCommand({
|
||||
Bucket: this.bucketName,
|
||||
Key: key,
|
||||
Body: buffer,
|
||||
ContentType: contentType,
|
||||
})
|
||||
);
|
||||
|
||||
// Generate public URL
|
||||
const publicUrl = `https://${this.bucketName}.s3.${this.region}.amazonaws.com/${key}`;
|
||||
|
||||
return {
|
||||
type: 's3',
|
||||
provider: 'aws-s3',
|
||||
key,
|
||||
publicUrl,
|
||||
};
|
||||
}
|
||||
|
||||
async delete(key: string): Promise<void> {
|
||||
try {
|
||||
await this.s3Client.send(
|
||||
new DeleteObjectCommand({
|
||||
Bucket: this.bucketName,
|
||||
Key: key,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
// Log error but don't throw to avoid cascading failures
|
||||
console.error(`Failed to delete S3 object: ${key}`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const new_s3_storage_adapter = (): S3StorageAdapter => {
|
||||
const config = S3StorageConfig.parse({
|
||||
endpoint: process.env.S3_ENDPOINT,
|
||||
bucket: process.env.S3_BUCKET_NAME,
|
||||
region: process.env.S3_REGION,
|
||||
accessKey: process.env.S3_ACCESS_KEY,
|
||||
secretKey: process.env.S3_SECRET_KEY,
|
||||
});
|
||||
return new S3StorageAdapter(config);
|
||||
};
|
||||
|
||||
38
src/lib/storage/storage.external.ts
Normal file
38
src/lib/storage/storage.external.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
'use server';
|
||||
|
||||
import { createStorageProvider } from '@/lib/storage/storage.factory';
|
||||
import { StorageProvider } from '@/lib/storage/storage.interface';
|
||||
import { TypedResult } from '@/utils/types/results';
|
||||
|
||||
const storage: StorageProvider = createStorageProvider();
|
||||
|
||||
export const getSignedUrl = async (
|
||||
key: string,
|
||||
storageProvider?: StorageProvider
|
||||
): Promise<TypedResult<string>> => {
|
||||
if (!storageProvider) {
|
||||
storageProvider = storage;
|
||||
}
|
||||
return await storageProvider.get(key);
|
||||
};
|
||||
|
||||
export const getPutUrl = async (
|
||||
key: string,
|
||||
contentType: string,
|
||||
storageProvider?: StorageProvider
|
||||
): Promise<TypedResult<string>> => {
|
||||
if (!storageProvider) {
|
||||
storageProvider = storage;
|
||||
}
|
||||
return await storageProvider.put(key, contentType);
|
||||
};
|
||||
|
||||
export const deleteByKey = async (
|
||||
key: string,
|
||||
storageProvider?: StorageProvider
|
||||
): Promise<TypedResult<void>> => {
|
||||
if (!storageProvider) {
|
||||
storageProvider = storage;
|
||||
}
|
||||
return await storageProvider.delete(key);
|
||||
};
|
||||
@@ -1,28 +1,13 @@
|
||||
import {
|
||||
LocalStorageAdapter,
|
||||
S3StorageAdapter,
|
||||
} from '@/lib/storage/storage.adapter';
|
||||
import { new_s3_storage_adapter } from '@/lib/storage/storage.adapter';
|
||||
import { StorageProvider } from '@/lib/storage/storage.interface';
|
||||
|
||||
/**
|
||||
* Factory function to create the appropriate storage provider based on environment
|
||||
*/
|
||||
export function createStorageProvider(): StorageProvider {
|
||||
const storageType = process.env.STORAGE_TYPE || 'local';
|
||||
|
||||
if (storageType === 's3') {
|
||||
const bucketName = process.env.S3_BUCKET_NAME;
|
||||
const region = process.env.S3_REGION || 'us-east-1';
|
||||
|
||||
if (!bucketName) {
|
||||
throw new Error(
|
||||
'S3_BUCKET_NAME environment variable is required when STORAGE_TYPE=s3'
|
||||
);
|
||||
}
|
||||
|
||||
return new S3StorageAdapter(bucketName, region);
|
||||
const storage_provider = new_s3_storage_adapter();
|
||||
if (!storage_provider) {
|
||||
throw new Error('Failed to create storage provider');
|
||||
}
|
||||
|
||||
// Default to local storage
|
||||
return new LocalStorageAdapter();
|
||||
return storage_provider;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { TypedResult } from '@/utils/types/results';
|
||||
|
||||
/**
|
||||
* Result returned from storage operations
|
||||
*/
|
||||
@@ -13,22 +15,23 @@ export interface StorageResult {
|
||||
*/
|
||||
export interface StorageProvider {
|
||||
/**
|
||||
* Uploads a file to storage
|
||||
* @param key - The unique key/path for the file
|
||||
* @param file - The file content as Buffer or Blob
|
||||
* @param contentType - MIME type of the file
|
||||
* @returns Promise<StorageResult> - Result containing storage metadata and public URL
|
||||
* Gets a presigned url for the requested file
|
||||
* @param key - The unique key/path to store the file under
|
||||
*/
|
||||
put(
|
||||
key: string,
|
||||
file: Buffer | Blob,
|
||||
contentType: string
|
||||
): Promise<StorageResult>;
|
||||
get(key: string): Promise<TypedResult<string>>;
|
||||
|
||||
/**
|
||||
* Uploads a file to storage
|
||||
* @param key - The unique key/path to store the file under
|
||||
* @param contentType - The MIME type of the file being uploaded
|
||||
* @returns Promise<string> - The public URL of the uploaded file
|
||||
*/
|
||||
put(key: string, contentType: string): Promise<TypedResult<string>>;
|
||||
|
||||
/**
|
||||
* Deletes a file from storage
|
||||
* @param key - The unique key/path of the file to delete
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
delete(key: string): Promise<void>;
|
||||
delete(key: string): Promise<TypedResult<void>>;
|
||||
}
|
||||
|
||||
41
src/lib/storage/storage.utils.ts
Normal file
41
src/lib/storage/storage.utils.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
'use client';
|
||||
|
||||
import * as storage from '@/lib/storage/storage.external';
|
||||
import { StorageProvider } from '@/lib/storage/storage.interface';
|
||||
import { wrap } from '@/utils/types/results';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const FileUploadResp = z.object({
|
||||
signedUrl: z.string(),
|
||||
key: z.string(),
|
||||
});
|
||||
export type FileUploadResp = z.infer<StorageProvider>;
|
||||
|
||||
export const uploadFile = wrap(async (file: File) => {
|
||||
const uniqueFileKey = crypto.randomUUID();
|
||||
const result = await storage.getPutUrl(uniqueFileKey, file.type);
|
||||
if (!result.ok) {
|
||||
throw new Error('File upload failed');
|
||||
}
|
||||
|
||||
const response = await fetch(result.value, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': file.type,
|
||||
},
|
||||
body: file,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to upload file');
|
||||
}
|
||||
|
||||
const presignedUrl = await storage.getSignedUrl(uniqueFileKey);
|
||||
if (!presignedUrl.ok) {
|
||||
throw new Error('Failed to retrieve file URL');
|
||||
}
|
||||
return {
|
||||
signedUrl: presignedUrl.value,
|
||||
key: uniqueFileKey,
|
||||
};
|
||||
});
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { saveArticle } from '@/lib/feature/article/article.external';
|
||||
import { uploadFile } from '@/lib/storage/storage.utils';
|
||||
import { FileUploadField } from '@/ui/components/internal/file-upload-field';
|
||||
import { Button } from '@/ui/components/shadcn/button';
|
||||
import {
|
||||
@@ -60,7 +61,7 @@ export const CreateArticleForm = () => {
|
||||
title: z.string().min(3).max(255),
|
||||
slug: z.string().min(3),
|
||||
description: z.string().min(10),
|
||||
coverImageUrl: z.string().url('Cover image URL must be a valid URL'),
|
||||
coverImageUrl: z.url('Cover image URL must be a valid URL'),
|
||||
content: z
|
||||
.string()
|
||||
.min(10, 'Article content must have at least 10 characters'),
|
||||
@@ -119,19 +120,27 @@ export const CreateArticleForm = () => {
|
||||
);
|
||||
|
||||
const handleCoverImageFileChange = useCallback(
|
||||
(file: File | null) => {
|
||||
async (file: File | null) => {
|
||||
if (coverImageUrlRef.current) {
|
||||
URL.revokeObjectURL(coverImageUrlRef.current);
|
||||
coverImageUrlRef.current = null;
|
||||
}
|
||||
setCoverImageFile(file);
|
||||
if (file) {
|
||||
const url = URL.createObjectURL(file);
|
||||
coverImageUrlRef.current = url;
|
||||
form.setValue('coverImageUrl', url);
|
||||
} else {
|
||||
if (!file) {
|
||||
setCoverImageFile(null);
|
||||
form.setValue('coverImageUrl', '');
|
||||
return;
|
||||
}
|
||||
const fileMetadataResult = await uploadFile(file);
|
||||
if (!fileMetadataResult.ok) {
|
||||
setCoverImageFile(null);
|
||||
form.setValue('coverImageUrl', '');
|
||||
toast((fileMetadataResult.error as Error).message);
|
||||
return;
|
||||
}
|
||||
const fileMetadata = fileMetadataResult.value;
|
||||
coverImageUrlRef.current = fileMetadata.signedUrl;
|
||||
form.setValue('coverImageUrl', fileMetadata.signedUrl);
|
||||
},
|
||||
[form]
|
||||
);
|
||||
|
||||
@@ -21,7 +21,7 @@ import React, { useCallback } from 'react';
|
||||
|
||||
export interface FileUploadFieldProps {
|
||||
file: File | null;
|
||||
onFileChange: (file: File | null) => void;
|
||||
onFileChange: (file: File | null) => Promise<void>;
|
||||
accept?: string;
|
||||
validate?: (file: File) => string | null;
|
||||
onFileReject?: (file: File, message: string) => void;
|
||||
@@ -45,7 +45,8 @@ export const FileUploadField: React.FC<FileUploadFieldProps> = ({
|
||||
const handleAccept = useCallback(
|
||||
(files: File[]) => {
|
||||
const accepted = files[0];
|
||||
if (accepted) onFileChange(accepted);
|
||||
if (!accepted) return;
|
||||
onFileChange(accepted).then(() => {});
|
||||
},
|
||||
[onFileChange]
|
||||
);
|
||||
|
||||
37
src/utils/types/results.ts
Normal file
37
src/utils/types/results.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
export type Result<T, E> = { ok: true; value: T } | { ok: false; error: E };
|
||||
export type TypedResult<T> = Result<T, Error>;
|
||||
|
||||
export function wrapBlocking<
|
||||
F extends (...args: never[]) => unknown,
|
||||
E = unknown,
|
||||
>(
|
||||
fn: F,
|
||||
mapError: (e: unknown) => E = (e) => e as E
|
||||
): (...args: Parameters<F>) => Result<ReturnType<F>, E> {
|
||||
return (...args) => {
|
||||
try {
|
||||
return { ok: true, value: fn(...args) as ReturnType<F> };
|
||||
} catch (e) {
|
||||
return { ok: false, error: mapError(e) };
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function wrap<
|
||||
F extends (...args: never[]) => Promise<unknown>,
|
||||
E = unknown,
|
||||
>(
|
||||
fn: F,
|
||||
mapError: (e: unknown) => E = (e) => e as E
|
||||
): (...args: Parameters<F>) => Promise<Result<Awaited<ReturnType<F>>, E>> {
|
||||
return async (...args) => {
|
||||
try {
|
||||
return {
|
||||
ok: true,
|
||||
value: (await fn(...args)) as Awaited<ReturnType<F>>,
|
||||
};
|
||||
} catch (e) {
|
||||
return { ok: false, error: mapError(e) };
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user