Hướng dẫn Implement tính năng Upload ảnh (Spring Boot + React)

Copycopy code to clipboard
# Điểm đến cho file upload (nằm ngoài thư mục project)
APP_UPLOAD_DIRECTORY=/Users/wanbi/Code/freelance/yocheckin/uploads

Copycopy code to clipboard
app:
  upload:
    directory: ${APP_UPLOAD_DIRECTORY:${user.home}/uploads} # Fallback về home nếu thiếu env

spring:
  servlet:
    multipart:
      max-file-size: 50MB
      max-request-size: 50MB

Copycopy code to clipboard
// SecurityConfig.java
private static final List<String> NO_AUTH_ENDPOINTS = List.of(
    // ... các endpoint khác
    "/uploads/**" // Cho phép xem ảnh public
);

// Trong filterChain:
.requestMatchers(NO_AUTH_ENDPOINTS.toArray(new String[0])).permitAll()

Copycopy code to clipboard
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Value("${app.upload.directory}")
    private String uploadDirectory;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // Đảm bảo path kết thúc bằng dấu /
        String location = uploadDirectory.endsWith("/") ? uploadDirectory : uploadDirectory + "/";
        
        // Map URL /uploads/** -> Thư mục vật lý
        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:" + location);
    }
}

Copycopy code to clipboard
@Service
public class FileSystemStorageService implements StorageService {

    @Value("${app.upload.directory}")
    private String uploadDirectory;
    private Path rootLocation;

    @PostConstruct
    public void init() {
        // Khởi tạo thư mục gốc nếu chưa có
        this.rootLocation = Paths.get(uploadDirectory).toAbsolutePath().normalize();
        try {
            Files.createDirectories(rootLocation);
        } catch (IOException e) {
            throw new RuntimeException("Could not initialize storage", e);
        }
    }

    @Override
    public String store(MultipartFile file) {
        try {
            if (file.isEmpty()) throw new RuntimeException("Failed to store empty file.");

            // 1. Tổ chức thư mục theo ngày: 2024/02/15
            LocalDate now = LocalDate.now();
            String datePath = String.format("%d/%02d/%02d", now.getYear(), now.getMonthValue(), now.getDayOfMonth());
            Path destinationDir = this.rootLocation.resolve(Paths.get(datePath));
            
            if (!Files.exists(destinationDir)) {
                Files.createDirectories(destinationDir);
            }

            // 2. Tạo tên file unique
            String ext = "";
            String originalFilename = file.getOriginalFilename();
            if (originalFilename != null && originalFilename.contains(".")) {
                ext = originalFilename.substring(originalFilename.lastIndexOf("."));
            }
            String filename = UUID.randomUUID().toString() + ext;

            // 3. Lưu file
            Path destinationFile = destinationDir.resolve(filename);
            try (InputStream inputStream = file.getInputStream()) {
                Files.copy(inputStream, destinationFile, StandardCopyOption.REPLACE_EXISTING);
            }

            // 4. Trả về đường dẫn tương đối: 2024/02/15/uuid-abc.jpg
            return datePath + "/" + filename;
        } catch (IOException e) {
            throw new RuntimeException("Failed to store file.", e);
        }
    }
}

Copycopy code to clipboard
@PostMapping
public ResponseEntity<ApiResponse<Map<String, String>>> handleFileUpload(@RequestParam("file") MultipartFile file) {
    // Service trả về: 2024/02/15/abc.jpg
    String relativePath = storageService.store(file);

    // Build URL full: http://localhost:8080/uploads/2024/02/15/abc.jpg
    String fileUrl = ServletUriComponentsBuilder.fromCurrentContextPath()
            .path("/uploads/")
            .path(relativePath) 
            .toUriString();

    Map<String, String> responseData = new HashMap<>();
    responseData.put("url", fileUrl);
    responseData.put("filename", relativePath);

    return ResponseEntity.ok(new ApiResponse<>(responseData));
}

Copycopy code to clipboard
import { httpService } from '@/shared/services/httpService'

const uploadFile = async (file) => {
    const formData = new FormData()
    formData.append('file', file)

    // Option explicit Content-Type: undefined để browser tự handle boundary
    return await httpService.post('/api/upload', formData, {
        headers: {
            'Content-Type': undefined, 
        },
    })
}

Copycopy code to clipboard
const handleAvatarUpload = async (e) => {
    const file = e.target.files[0]
    if (!file) return

    // 1. Validate sơ bộ
    if (file.size > 50 * 1024 * 1024) { // 50MB
        toast.error("File quá lớn!")
        return
    }

    // 2. Preview ảnh ngay lập tức (UI/UX)
    const reader = new FileReader()
    reader.onload = (event) => setAvatarPreview(event.target.result)
    reader.readAsDataURL(file)

    // 3. Upload lên server
    try {
        const response = await uploadService.uploadFile(file)
        if (response.success) {
            // response.data.url là URL full để hiển thị, lưu vào form state
            setFormData(prev => ({ ...prev, avatar: response.data.url }))
            toast.success("Upload thành công!")
        }
    } catch (error) {
        toast.error("Upload thất bại")
    }
}