Spring Boot Angular: Media Management Error

Discussão em 'Angular' iniciado por Mohamed Aymen Hssen, Outubro 24, 2024.

  1. I’m encountering a 500 error when handling images and videos in my project. This is not a protection-related error, as other forms are working correctly. However, there seems to be a specific issue with media management.

    To make long-term project maintenance easier, I’ve opted for a simple structure. My project uses Angular for the frontend and Spring Boot for the backend. Media files (images and videos) are all stored in Angular’s public folder, and Spring Boot loads them directly from this folder.

    @Service
    public class ImageService {

    private final String uploadDir = "../public/images/"; // Chemin vers le répertoire public d'Angular
    private final String uploadDirVideos = "../public/videos/";

    public String uploadImage(MultipartFile file) throws IOException {
    if (file.isEmpty()) {
    throw new IllegalStateException("Cannot upload empty file.");
    }

    // Vérifie si le répertoire existe, sinon il le crée
    Path uploadPath = Paths.get(uploadDir);
    if (!Files.exists(uploadPath)) {
    Files.createDirectories(uploadPath); // Crée le répertoire s'il n'existe pas
    }

    String originalFileName = file.getOriginalFilename();
    String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));
    String newFileName = UUID.randomUUID().toString() + fileExtension;
    Path filePath = uploadPath.resolve(newFileName);

    Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);

    return newFileName; // Retourne le nouveau nom du fichier pour l'enregistrer dans l'entité Category
    }


    public String uploadVideo(MultipartFile file) throws IOException {
    if (file.isEmpty()) {
    throw new IllegalStateException("Cannot upload empty file.");
    }

    // Vérifie si le répertoire existe, sinon il le crée
    Path uploadPath = Paths.get(uploadDirVideos);
    if (!Files.exists(uploadPath)) {
    Files.createDirectories(uploadPath); // Crée le répertoire s'il n'existe pas
    }

    String originalFileName = file.getOriginalFilename();
    String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));
    String newFileName = UUID.randomUUID().toString() + fileExtension;
    Path filePath = uploadPath.resolve(newFileName);

    Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);

    return newFileName; // Retourne le nouveau nom du fichier pour l'enregistrer
    }

    public byte[] getImage(String fileName) throws IOException {
    Path filePath = Paths.get(uploadDir + fileName);
    return Files.readAllBytes(filePath);
    }
    public byte[] getVideo(String fileName) throws IOException {
    Path filePath = Paths.get(uploadDirVideos + fileName);
    return Files.readAllBytes(filePath);
    }
    }


    nginx

    server {
    listen 80;
    server_name cognitiex.com www.cognitiex.com;

    # Rediriger toutes les requêtes HTTP vers HTTPS
    return 301 https://$host$request_uri;
    }

    server {
    listen 443 ssl; # Écouter sur le port 443 pour SSL
    server_name cognitiex.com; # Domaine sans www

    ssl_certificate /etc/letsencrypt/live/cognitiex.com/fullchain.pem; # Chemin vers le certificat
    ssl_certificate_key /etc/letsencrypt/live/cognitiex.com/privkey.pem; # Chemin vers la clé privée

    return 301 https://www.cognitiex.com$request_uri; # Redirection vers www.cognitiex.com
    }

    server {
    listen 443 ssl; # Écouter sur le port 443 pour SSL
    server_name www.cognitiex.com; # Domaine avec www

    ssl_certificate /etc/letsencrypt/live/cognitiex.com/fullchain.pem; # Chemin vers le certificat
    ssl_certificate_key /etc/letsencrypt/live/cognitiex.com/privkey.pem; # Chemin vers la clé privée

    root /var/www/ecomme/dist/accounts/browser; # Chemin vers les fichiers
    index index.html index.htm;

    location / {
    try_files $uri $uri/ /index.html; # Sert les fichiers Angular
    }

    location /api/ {
    proxy_pass http://localhost:8080/api/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
    add_header 'Access-Control-Allow-Origin' 'https://www.cognitiex.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    }

    location /api/videos/ {
    alias /var/www/ecomme/public/videos/; # Notez la barre oblique
    }

    location /api/images/ {
    alias /var/www/ecomme/public/images/; # Notez la barre oblique
    }
    error_page 403 /403.html; # Gestion des erreurs
    location = /403.html {
    internal;
    }
    }

    Continue reading...

Compartilhe esta Página