S3 Upload Service

Upload file lên S3 - hỗ trợ 2 chế độ bảo mật.

Cấu trúc

s3-upload-service/
├── core/              # Config, service, types
├── utils/             # Cache, helpers, imageOptimize  
├── hooks/             # React hooks
├── backend-examples/  # Backend code mẫu
└── index.ts

Environment Variables

VITE_S3_API_KEY=your_api_key
VITE_S3_SERVICE_URL=https://storage.proxy.yourservice.com
VITE_S3_BUCKET_URL=https://your-bucket.s3.amazonaws.com
VITE_S3_FOLDER_NAME=my-project

Config

Frontend Mode

initS3Config({
  apiKey: import.meta.env.VITE_S3_API_KEY,
  serviceUrl: import.meta.env.VITE_S3_SERVICE_URL,
  folderName: import.meta.env.VITE_S3_FOLDER_NAME,
  
  // Custom endpoints (optional)
  viewEndpoint: '/api/v0/storage/view',
  presignedEndpoint: '/api/v0/storage/presigned-url',
});

Secure Mode

initS3Config({
  backendUrl: '/api/storage',
  folderName: 'my-project',
  
  // Custom endpoints cho backend proxy (optional)
  secureViewEndpoint: '/view',
  securePresignedEndpoint: '/presigned-url',
});

Config Options

| Option | Default | Mô tả | |--------|---------|-------| | apiKey | - | API key (Frontend mode) | | serviceUrl | - | URL S3 service (Frontend mode) | | backendUrl | - | URL backend proxy (Secure mode) | | folderName | uploads | Folder trong S3 | | viewEndpoint | /api/v0/storage/view | Endpoint view file | | presignedEndpoint | /api/v0/storage/presigned-url | Endpoint presigned URL | | secureViewEndpoint | /view | Endpoint view (Secure mode) | | securePresignedEndpoint | /presigned-url | Endpoint presigned (Secure mode) | | uploadProxyPath | /s3-upload | Proxy path cho upload | | devProxyPath | /s3-proxy | Proxy path cho dev |

Hooks

useUploadImage

const { upload, isUploading } = useUploadImage({
  optimizeOptions: { maxWidth: 1200, quality: 0.8 },
});

useUploadFile

const { upload, isUploading } = useUploadFile();

useStorageFile

const { src, isLoading } = useStorageFile(s3Id);
return <img src={src ?? ''} />;

Service API

const result = await s3Service.uploadFile(file);
const objectUrl = await s3Service.getObjectUrl(s3Id);

Image Optimization

const optimized = await optimizeImage(file, {
  maxWidth: 1200,
  quality: 0.8,
  outputFormat: 'image/webp',
});

Vite Config

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  
  return {
    server: {
      proxy: {
        '/s3-proxy': {
          target: env.VITE_S3_SERVICE_URL,
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/s3-proxy/, ''),
        },
        '/s3-upload': {
          target: env.VITE_S3_BUCKET_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/s3-upload/, ''),
        },
      },
    },
  };
});