[FIXED] Saving image through Angular and Spring boot

Issue

I'm doing an spring boot project where for each object has an image, actually I'm saving all the image in the assets folder in angular, thanks to the object File with spring where I save the path in a field Every image are displayed on Angular thanks to the (<src="springPath">).

For this I have a problem when I dockerized my application because the user can upload the image but Angular can't fetch that image for unknown reason.

Is anybody had this problem and can suggest me where to store/fetch the image or how to solve this problem, thanks!!

pathtoSave = "county-fe\dist\county-fe\assets"

I also tried to save in the "county-fe\resource\src\assets" but with no luck

 public void saveFile(String regional, Integer id, Binary image) throws Exception {
        URL url =ResourceUtils.getURL("classpath:"+pathToSave);
        if (image != null) {
            File fileToSave = new File(url.getPath() +"\\"+ this.regional(regional, id) + ".png");
            if (fileToSave.exists()) {
                log.error("Image for {} and regional: {} already exist! file: {}", id, regional, fileToSave);
                throw new Exception(String.format("Image for country: %s and region: %s already exist!", id, regional));
            }

            if (!fileToSave.exists()) {
                log.info("file doesn't exist: {}", fileToSave);
            }
            // Try-with-resource
            try (OutputStream out = new FileOutputStream(fileToSave)) {
                out.write(image.getData());
                out.flush();
                log.info("file saved: {}", fileToSave);
            } catch (IOException e) {
                e.printStackTrace();
            }
        } else {
            log.error("No image set");
        }
    }

My Dockerfile:

FROM openjdk:17
ENV APP_HOME=/usr/app/
WORKDIR $APP_HOME
ADD target/World-0.0.1-SNAPSHOT.jar target/springboot-docker-city.jar
EXPOSE 8090
CMD ["java", "-jar", "target/springboot-docker-city.jar"]

My docker compose:

services:
  db:
    image: mongo:latest
    ports:
      - 27017:27017
    environment:
      SPRING_DATA_MONGODB_URI: mongodb://host.docker.internal:27017
      MONGO_INITDB_ROOT_USERNAME: user
      MONGO_INITDB_ROOT_PASSWORD: pass
    volumes:
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:r
  web:
    build: ./WorldBE/target/classes/county-fe
    ports:
      - 80:80
  api:
    build: ./WorldBE
    ports:
      - 8090:8090
volumes:
  county:

My compiled spring boot project

My Spring boot/ angular application

Solution

After the build process is successful, you cannot update the JAR file.

You have many ways to store images on a web application, such as saving them to an external folder and reference path to store in a database or saving images in a database in BASE64 format.

If you want to save images to an external storage you should mount a volume from the host machine to the container.

services:
  DB:
    ...
  web:
    ...
  API:
    ...
    volume:
      - ./application/images:/path/to/save/images/
volumes:
  county:

Then in the API to get/fetch the image, it takes the data at that path and converts it into a stream before sending it over the network.

Answered By - Goffity
Answer Checked By - Cary Denson (JavaFixing Admin)