- Root package.json with concurrently for dev server - Client: Vite + React 18 with design tokens and proxy config - Server: Express with CORS, multer (20MB), Sharp resize - Upload endpoint with preview generation - Dockerfile (multi-stage) and docker-compose.yml - Canvas deferred to Phase 8 (export functionality) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
import express from 'express';
|
|
import cors from 'cors';
|
|
import multer from 'multer';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import sharp from 'sharp';
|
|
import { fileURLToPath } from 'module';
|
|
import { dirname, join } from 'path';
|
|
import { mkdirSync, existsSync } from 'fs';
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = dirname(__filename);
|
|
|
|
const app = express();
|
|
const PORT = process.env.PORT || 3001;
|
|
|
|
// Ensure upload and export directories exist
|
|
const uploadsDir = join(__dirname, 'uploads');
|
|
const exportsDir = join(__dirname, 'exports');
|
|
[uploadsDir, exportsDir].forEach(dir => {
|
|
if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
|
|
});
|
|
|
|
// Middleware
|
|
app.use(cors());
|
|
app.use(express.json({ limit: '50mb' }));
|
|
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
|
|
|
|
// Serve static files for uploads and exports
|
|
app.use('/uploads', express.static(uploadsDir));
|
|
app.use('/exports', express.static(exportsDir));
|
|
|
|
// Configure multer for image uploads
|
|
const storage = multer.diskStorage({
|
|
destination: (req, file, cb) => {
|
|
cb(null, uploadsDir);
|
|
},
|
|
filename: (req, file, cb) => {
|
|
const ext = file.originalname.split('.').pop();
|
|
const filename = `${uuidv4()}.${ext}`;
|
|
cb(null, filename);
|
|
}
|
|
});
|
|
|
|
const fileFilter = (req, file, cb) => {
|
|
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
|
|
if (allowedTypes.includes(file.mimetype)) {
|
|
cb(null, true);
|
|
} else {
|
|
cb(new Error('Invalid file type. Only JPEG, PNG, and WebP are allowed.'), false);
|
|
}
|
|
};
|
|
|
|
const upload = multer({
|
|
storage,
|
|
fileFilter,
|
|
limits: {
|
|
fileSize: 20 * 1024 * 1024 // 20MB
|
|
}
|
|
});
|
|
|
|
// Health check endpoint
|
|
app.get('/api/health', (req, res) => {
|
|
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
|
});
|
|
|
|
// Upload endpoint
|
|
app.post('/api/upload', upload.single('image'), async (req, res) => {
|
|
try {
|
|
if (!req.file) {
|
|
return res.status(400).json({ error: 'No file uploaded' });
|
|
}
|
|
|
|
const originalPath = req.file.path;
|
|
const originalUrl = `/uploads/${req.file.filename}`;
|
|
|
|
// Create preview by resizing to max 1000px
|
|
const previewFilename = req.file.filename.replace(/\.[^.]+$/, '.png');
|
|
const previewPath = join(uploadsDir, 'preview', previewFilename);
|
|
|
|
// Ensure preview directory exists
|
|
const previewDir = join(uploadsDir, 'preview');
|
|
if (!existsSync(previewDir)) mkdirSync(previewDir, { recursive: true });
|
|
|
|
await sharp(originalPath)
|
|
.resize({ width: 1000, height: 1000, fit: 'inside' })
|
|
.png()
|
|
.toFile(previewPath);
|
|
|
|
const previewUrl = `/uploads/preview/${previewFilename}`;
|
|
|
|
res.json({
|
|
success: true,
|
|
original: {
|
|
path: originalPath,
|
|
url: originalUrl,
|
|
filename: req.file.filename,
|
|
size: req.file.size,
|
|
mimetype: req.file.mimetype
|
|
},
|
|
preview: {
|
|
path: previewPath,
|
|
url: previewUrl,
|
|
filename: previewFilename
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Upload error:', error);
|
|
res.status(500).json({ error: 'Failed to process upload', details: error.message });
|
|
}
|
|
});
|
|
|
|
// Error handling for multer
|
|
app.use((err, req, res, next) => {
|
|
if (err instanceof multer.MulterError) {
|
|
if (err.code === 'LIMIT_FILE_SIZE') {
|
|
return res.status(400).json({ error: 'File too large. Maximum size is 20MB.' });
|
|
}
|
|
return res.status(400).json({ error: err.message });
|
|
}
|
|
next(err);
|
|
});
|
|
|
|
app.listen(PORT, () => {
|
|
console.log(`Server running on http://localhost:${PORT}`);
|
|
console.log(`Health check: http://localhost:${PORT}/api/health`);
|
|
console.log(`Upload endpoint: POST http://localhost:${PORT}/api/upload`);
|
|
});
|