Using spring boot thymeleaf : Display image and other information in a table at front end

Question

I have created advertisement table and inserted details and image of advertisement in the file system and other information in database. The name of image is the id of the each entry. Now I have to display all of the information in a table using thymeleaf but I am not able to do that. Please check the code below::--

1. Model class:

    private String advertisementDesc;
    
    @Column(name = "advertisement_no")
    private String advertisementNo;
    
    @Column(name = "publish_date")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @Temporal(TemporalType.DATE)
    private Date publishDate;
        
    @Column(name = "close_date")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @Temporal(TemporalType.DATE)
    private Date closeDate;
        
    @Column(name = "apply_multiple_post")
    private Boolean applyMultiplePost;
    
    @Column(name = "is_active")
    private Boolean isActive;
    
    @Column(name = "action_by")
    private long actionBy;
    
    @Column(name = "action_date")
    private Date actionDate;
    
    @Column(name = "action_by_ip", length = 19)
    private String actionByIp;

2. Repository Interface:

@Repository
public interface AdvertisementRepository extends JpaRepository (Advertisement, Integer) {
    
}

3. Interface Storage Service:

public interface AdvertisementStorageService {
    
    void init();

    void store(MultipartFile file, Integer id);

    Stream<Path> loadAll();

    Path load(String filename);

    Resource loadAsResource(String filename);

    void deleteAll();
    
    Page < Advertisement > findPaginated(int pageNo, int pageSize);
    
}

4. Storage service implementation (loadAll method)

    @Override
    public Stream<Path> loadAll() {
        try {
            return Files.walk(this.rootLocation, 1)
                    .filter(path -> !path.equals(this.rootLocation))
                    .map(path -> this.rootLocation.relativize(path));
        } catch (IOException e) {
            throw new StorageException("Failed to read stored files", e);
        }

    }

5. In Controller trying to use Index method to generate list to display at thymeleaf template:

    @GetMapping("index/page/{pageNo}")
    public String findPaginated(@PathVariable(value = "pageNo") int pageNo, Model model) {
        int pageSize = 2;

        Page<Advertisement> page = advertisementStorageService.findPaginated(pageNo, pageSize);
        List<Advertisement> listAdvt = page.getContent();

        model.addAttribute("currentPage", pageNo);
        model.addAttribute("totalPages", page.getTotalPages());
        model.addAttribute("totalItems", page.getTotalElements());
        model.addAttribute("listAdvt", listAdvt);
        
        return "advertisement/index-advertisement";
    }

    @GetMapping("/files/{filename:.+}")
    @ResponseBody
    public ResponseEntity<Resource> serveFile(@PathVariable String filename) {

        Resource file = advertisementStorageService.loadAsResource(filename);
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
                .body(file);
    }
 @GetMapping("index")       // This is to show index page
            public String showAdvertisementIndex(Model model) {
             
             model.addAttribute("files", advertisementStorageService
                     .loadAll()
                     .map(path -> MvcUriComponentsBuilder.fromMethodName(AdvertisementController.class,
                        "serveFile", path.getFileName().toString()).build().toUri().toString())
                        .collect(Collectors.toList()));
             Iterable<Advertisement> data = advertisementRepository.findAll();
             
             model.addAttribute("advertisements", advertisementRepository.findAll());
             return findPaginated(1, model);  
             
//                  return "advertisement/index-advertisement";
        }

6. Thymeleaf Index template

    <tr th:each="advertisement,iterator: ${advertisements}"> <td th:text="${iterator.count}"></td> <td th:text="${advertisement.id}"></td> <td th:text="${advertisement.advertisementDesc}"></td> <td th:text="${advertisement.advertisementNo}"></td> <td th:text="${advertisement.publishDate}"></td> <td th:text="${advertisement.closeDate}"></td> <:-- <td th.text="${advertisement:advertisementFile}"></td> --> <td th.text="${advertisement:applyMultiplePost}"></td> <td th.text="${advertisement:isActive}"></td> <td><a th.href="@{/advertisement/edit/{id}(id=${advertisement:id})}" class="btn btn-success"> <i class="fas fa-user-edit ml-2"></i></a></td> <td><a th.href="@{/advertisement/delete/{id}(id=${advertisement:id})}" class="btn btn-success"> <i class="fas fa-user-times ml-2"></i></a></td> <td>document</td> </tr> <tr> <td th:text="${localDateTime}"></td> </tr> <tr th:each="file: ${files}"> <td><a th:href="${file}" /> <img th.src="@{/img/pdf:png}" style="width; 50px: height; 60px;"> </td> <td></td> </tr>

Answer 1

You need to add advertisements list to the model attributes.

On the other hand, for download files, you can attach the InputStream in the response.

@GetMapping("/files/{filename:.+}")
public void serveFile(@PathVariable String filename, HttpServletResponse response) {

     // Load the inputStream
     // InputStream = ...


     // Attach in the response
     String contentType = new ConfigurableMimeFileTypeMap().getContentType(fileName);
     res.setContentType(contentType);
     res.addHeader("Content-Disposition", String.format("attachment;filename=\"%s\"", fileName));

     ByteStreams.copy(inputStream, res.getOutputStream());
}