create-nara 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nara",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "CLI to scaffold NARA projects",
   "type": "module",
   "bin": {

package/templates/features/auth/app/controllers/ProfileController.ts

@@ -1,8 +1,22 @@
-import { BaseController, jsonSuccess, ValidationError } from '@nara-web/core';
+import { BaseController, jsonSuccess, jsonError, ValidationError } from '@nara-web/core';
 import type { NaraRequest, NaraResponse } from '@nara-web/core';
 import bcrypt from 'bcrypt';
+import sharp from 'sharp';
+import fs from 'fs';
+import path from 'path';
+import crypto from 'crypto';
 
 export class ProfileController extends BaseController {
+  private avatarDir = './uploads/avatars';
+
+  constructor() {
+    super();
+    // Ensure avatar directory exists
+    if (!fs.existsSync(this.avatarDir)) {
+      fs.mkdirSync(this.avatarDir, { recursive: true });
+    }
+  }
+
   async update(req: NaraRequest, res: NaraResponse) {
     const user = req.user;
     if (!user) {
@@ -64,19 +78,58 @@ export class ProfileController extends BaseController {
       return res.status(401).json({ success: false, message: 'Unauthorized' });
     }
 
-    // TODO: Handle file upload
-    // This requires multipart form handling which depends on the upload middleware
-    // For now, return a placeholder response
+    try {
+      // Get raw body as buffer
+      const buffer = await req.buffer();
 
-    // Example implementation:
-    // const file = await req.file();
-    // const filename = `avatars/${user.id}-${Date.now()}.${file.extension}`;
-    // await saveFile(file, filename);
-    // await UserModel.updateAvatar(user.id, `/uploads/${filename}`);
-    // return jsonSuccess(res, { url: `/uploads/${filename}` }, 'Avatar uploaded successfully');
+      if (!buffer || buffer.length === 0) {
+        return jsonError(res, 'No file uploaded', 400);
+      }
 
-    return jsonSuccess(res, {
-      url: '/uploads/avatars/default.png'
-    }, 'Avatar uploaded successfully');
+      // Extract image from multipart form data
+      const boundary = req.headers['content-type']?.split('boundary=')[1];
+      if (!boundary) {
+        return jsonError(res, 'Invalid multipart form data', 400);
+      }
+
+      // Find image data in multipart
+      const parts = buffer.toString('binary').split(`--${boundary}`);
+      let imageBuffer: Buffer | null = null;
+
+      for (const part of parts) {
+        if (part.includes('Content-Type: image/')) {
+          const dataStart = part.indexOf('\r\n\r\n') + 4;
+          const dataEnd = part.lastIndexOf('\r\n');
+          if (dataStart > 4 && dataEnd > dataStart) {
+            imageBuffer = Buffer.from(part.slice(dataStart, dataEnd), 'binary');
+            break;
+          }
+        }
+      }
+
+      if (!imageBuffer) {
+        return jsonError(res, 'No image found in upload', 400);
+      }
+
+      // Generate unique filename
+      const filename = `${crypto.randomUUID()}.webp`;
+      const filepath = path.join(this.avatarDir, filename);
+
+      // Process and save image with sharp
+      await sharp(imageBuffer)
+        .resize(400, 400, { fit: 'cover' })
+        .webp({ quality: 80 })
+        .toFile(filepath);
+
+      const avatarUrl = `/uploads/avatars/${filename}`;
+
+      // TODO: Update user avatar in database
+      // await UserModel.updateAvatar(user.id, avatarUrl);
+
+      return jsonSuccess(res, { url: avatarUrl }, 'Avatar uploaded successfully');
+    } catch (error) {
+      console.error('Avatar upload error:', error);
+      return jsonError(res, 'Failed to upload avatar', 500);
+    }
   }
 }

package/templates/svelte/resources/js/pages/profile.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
   import axios from "axios";
-  import Header from "../Components/Header.svelte";
-  import { api, Toast } from "../Components/helper";
+  import Header from "../components/Header.svelte";
+  import { api, Toast } from "../components/helper";
 
   interface User {
     id: string;
@@ -25,26 +25,21 @@
   function handleAvatarChange(event: Event): void {
     const target = event.target as HTMLInputElement;
     const file = target.files?.[0];
-    if (file) console.log('[AVATAR DEBUG] Uploading file:', file.name, 'Size:', file.size, 'Type:', file.type);
     if (file) {
       const formData = new FormData();
       formData.append("file", file);
       isLoading = true;
-      console.log('[AVATAR DEBUG] Sending request to /assets/avatar');
       axios
-        .post("/assets/avatar", formData)
+        .post("/api/profile/avatar", formData)
         .then((response) => {
-          console.log('[AVATAR DEBUG] Upload response:', response.data);
           setTimeout(() => {
             isLoading = false;
-            previewUrl = response.data.data.url + "?v=" + Date.now();
-            console.log('[AVATAR DEBUG] previewUrl set to:', previewUrl);
+            previewUrl = response.data.data?.url + "?v=" + Date.now();
           }, 500);
-          user.avatar = response.data.data.url + "?v=" + Date.now();
+          user.avatar = response.data.data?.url;
           Toast("Avatar berhasil diupload", "success");
         })
-        .catch((error) => {
-          console.log('[AVATAR DEBUG] Upload failed:', error);
+        .catch(() => {
           isLoading = false;
           Toast("Gagal mengupload avatar", "error");
         });

package/templates/svelte/routes/web.ts

@@ -1,7 +1,31 @@
 import type { NaraApp } from '@nara-web/core';
 import { webAuthMiddleware, guestMiddleware } from '../app/middlewares/auth.js';
+import fs from 'fs';
+import path from 'path';
 
 export function registerRoutes(app: NaraApp) {
+  // Serve uploaded files
+  app.get('/uploads/*', (req, res) => {
+    const requestPath = req.path?.replace('/uploads/', '') || '';
+    const filePath = path.join(process.cwd(), 'uploads', requestPath);
+
+    if (fs.existsSync(filePath)) {
+      const ext = path.extname(filePath).toLowerCase();
+      const mimeTypes: Record<string, string> = {
+        '.webp': 'image/webp',
+        '.png': 'image/png',
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.gif': 'image/gif',
+      };
+      res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+      res.setHeader('Cache-Control', 'public, max-age=31536000');
+      res.send(fs.readFileSync(filePath));
+    } else {
+      res.status(404).send('Not found');
+    }
+  });
+
   // Public routes
   app.get('/', (req, res) => {
     res.inertia?.('landing', {

package/templates/features/uploads/app/controllers/AssetController.ts

@@ -1,226 +0,0 @@
-import { randomUUID } from "crypto";
-import type { NaraRequest, NaraResponse } from "@core";
-import { BaseController, jsonError, jsonServerError, jsonSuccess } from "@core";
-import fs from "fs";
-import path from "path";
-import sharp from "sharp";  
-import { Asset, User } from "@models";
-import Logger from "@services/Logger";
-import { Storage } from '@services';
-import { UPLOAD } from '@config/constants';
-
-
-
-// Cache object to store file contents in memory
-let cache: { [key: string]: Buffer } = {};
-
-class AssetController extends BaseController {
-    /**
-     * Serves assets from the dist folder (compiled assets)
-     * - Handles CSS and JS files with proper content types
-     * - Implements file caching for better performance
-     * - Sets appropriate cache headers for browser caching
-     */
-
-    public async uploadAsset(request: NaraRequest, response: NaraResponse) {
-        this.requireAuth(request);
-
-        // Store user reference for use in nested callbacks
-        const userId = request.user.id;
-        console.log('[AVATAR DEBUG] Upload started for user:', userId);
-
-        try { 
-            let isValidFile = true;
-
-            await request.multipart(async (field: any) => {
-                if (field.file) {
-                    if (!field.mime_type.includes("image")) {
-                        console.log('[AVATAR DEBUG] File mime_type:', field.mime_type);
-                        isValidFile = false;
-                        return;
-                    }
-
-                    const id = randomUUID();
-                    const fileName = `${id}.webp`; 
-
-                    // Create a buffer to store the image data
-                    const chunks: Buffer[] = [];
-                    const readable = field.file.stream;
-
-                    readable.on('data', (chunk: Buffer) => {
-                        chunks.push(chunk);
-                    });
-
-                    readable.on('end', async () => {
-                        const buffer = Buffer.concat(chunks);
-                        console.log('[AVATAR DEBUG] Total buffer length received:', buffer.length);
-
-                        try {
-                            // Process image with Sharp and get buffer
-                            const processedBuffer = await sharp(buffer)
-                                .webp({ quality: 80 }) // Convert to WebP with 80% quality
-                                .resize(1200, 1200, { // Resize to max 1200x1200 while maintaining aspect ratio
-                                    fit: 'inside',
-                                    withoutEnlargement: true
-                                })
-                                .toBuffer();
-                            console.log('[AVATAR DEBUG] Processed buffer length (WebP):', processedBuffer.length);
-
-                            // Store processed image using Storage service
-                            const storedFile = await Storage.put(processedBuffer, {
-                                directory: UPLOAD.AVATAR_DIR,
-                                name: id,
-                                extension: 'webp'
-                            console.log('[AVATAR DEBUG] File stored at:', storedFile.url);
-                            });
-
-                            // Build public URL for the saved file
-                            const publicUrl = storedFile.url;
-
-                            // Save to assets table with local file reference
-                            await Asset.create({
-                                id,
-                                type: 'image',
-                                url: publicUrl,
-                                mime_type: 'image/webp',
-                                name: fileName,
-                                size: processedBuffer.length,
-                                user_id: userId,
-                            });
-
-                            // Update user avatar in users table
-                            await User.updateAvatar(userId, publicUrl);
-
-                            // Return success response with public URL
-                            console.log('[AVATAR DEBUG] Returning public URL:', publicUrl);
-                            jsonSuccess(response, 'Avatar berhasil diupload', { url: publicUrl });
-                        } catch (err) {
-                            Logger.error('Error processing and uploading image', err as Error);
-                            jsonServerError(response, 'Gagal memproses dan mengupload gambar');
-                        }
-                    });
-                }
-            });
-
-            if (!isValidFile) {
-                return jsonError(response, "Invalid file type. Only images are allowed.", 400, "INVALID_FILE_TYPE");
-            }
-
-        } catch (error) {
-            Logger.error('Error uploading asset', error as Error);
-            return jsonServerError(response, "Internal server error");
-        }
-    }
-
-    public async distFolder(request: NaraRequest, response: NaraResponse) {
-        const file = request.params.file;
-
-        try {
-            const filePath = `dist/assets/${file}`;
-
-            // Set appropriate content type based on file extension
-            if (file.endsWith(".css")) {
-                response.setHeader("Content-Type", "text/css");
-            } else if (file.endsWith(".js")) {
-                response.setHeader("Content-Type", "application/javascript");
-            } else {
-                response.setHeader("Content-Type", "application/octet-stream");
-            }
-
-            // Set cache control header for browser caching (1 year)
-            response.setHeader("Cache-Control", "public, max-age=31536000");
-
-            // Return cached content if available
-            if (cache[file]) {
-                return response.send(cache[file]);
-            }
-
-            // Check if file exists and serve it
-            if (await fs.promises.access(filePath).then(() => true).catch(() => false)) {
-                const fileContent = await fs.promises.readFile(filePath);
-                
-                // Cache the file content
-                cache[file] = fileContent;
-
-                return response.send(fileContent);
-            }
-
-            return response.status(404).send("File not found");
-        } catch (error) {
-            Logger.error('Error serving dist file', error as Error);
-            return response.status(500).send("Internal server error");
-        }
-    }
-
-    /**
-     * Serves static files from the public folder
-     * - Implements security by checking allowed file extensions
-     * - Prevents directory traversal attacks
-     * - Handles various file types (images, fonts, documents, etc.)
-     */
-    public async publicFolder(request: NaraRequest, response: NaraResponse) {
-        // List of allowed file extensions for security
-        const allowedExtensions = [
-            '.ico', '.png', '.jpeg', '.jpg', '.gif', '.svg', '.webp',
-            '.txt', '.pdf', '.css', '.js',
-            '.woff', '.woff2', '.ttf', '.eot',
-            '.mp4', '.webm', '.mp3', '.wav'
-        ];
-
-        // Get the requested path and decode URL encoding
-        const requestedPath = decodeURIComponent(request.path);
-
-        // Security: Remove leading slash and normalize
-        const relativePath = requestedPath.replace(/^\/+/, '');
-
-        // Security: Check for path traversal attempts BEFORE any path operations
-        // Block any path containing .. or encoded variants
-        if (relativePath.includes('..') ||
-            relativePath.includes('%2e') ||
-            relativePath.includes('%2E') ||
-            relativePath.includes('\0')) {
-            Logger.logSecurity('Path traversal attempt blocked', {
-                requestedPath,
-                ip: request.ip
-            });
-            return response.status(403).send('Access denied');
-        }
-
-        // Check if the path has any extension
-        if (!relativePath.includes('.')) {
-            return response.status(404).send('Page not found');
-        }
-
-        // Security check: validate file extension
-        if (!allowedExtensions.some(ext => relativePath.toLowerCase().endsWith(ext))) {
-            return response.status(403).send('File type not allowed');
-        }
-
-        // Resolve the absolute path and verify it's within public directory
-        const publicDir = path.resolve(process.cwd(), 'public');
-        const storageDir = path.resolve(process.cwd(), 'storage');
-        const resolvedPath = path.resolve(process.cwd(), relativePath);
-
-        // Security: Ensure the resolved path is within the public or storage directory
-        if (!resolvedPath.startsWith(publicDir) && !resolvedPath.startsWith(storageDir)) {
-            Logger.logSecurity('Path traversal attempt blocked (resolved path escape)', {
-                requestedPath,
-                resolvedPath,
-                publicDir,
-                storageDir,
-                ip: request.ip
-            });
-            return response.status(403).send('Access denied');
-        }
-
-        // Check if file exists
-        if (!fs.existsSync(resolvedPath)) {
-            return response.status(404).send('File not found');
-        }
-
-        // Serve the file
-        return response.download(resolvedPath);
-    }
-}
-
-export default new AssetController();