How to serve uploaded Images from external Folder with Vaadin?

Question

Dear all I am using Vaadin v24 and created an upload feature for images. I know how to read and serve single images by using Vaadin Resource Classes, but I am wondering how I can configure the Vaadin Servlet in general to treat and map a specific image URL like /media/** to an external folder on the filesystem outside of the project or deployed jar.

I tried to register a ResourceHandler but not sure if this will work With Vaading because it seems to be related to the Spring MVC framework. The setup of the registry get called, but then later on the image not served by Vaadin Servlet.

Remark: I know I can do this outside of the Spring Boot Tomcat by using a Front Webserver, but for developing purposes it would be easier to have everything served by one server instance.

@Configuration
public class MyConfig implements WebMvcConfigurer {

   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/media/**")
     .addResourceLocations("file:./media/")
     .setCachePeriod(3600);
     registry.setOrder(Integer.MAX_VALUE);

and in my JavaScript generated HTML Code

<img src='/media/abc.png'/>

I tried with absolute and relative paths but it seems not to work

Any ideas or hints?

Answer 1

Ok I found 3 kind of solutions

1. Use of Property vaadin.exclude-urls with WebMvcConfigurer.addResourceHandlers()

In your application.properties make sure that you specify the pattern(s) which you like not to be processed by the VaadinServlet

vaadin.exclude-urls=/media/**

After that specify in a Spring Boot Configuration class your additional resource handler

@Configuration
public class MyConfig implements WebMvcConfigurer {

   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/media/**")
     .addResourceLocations("file:./media/")
     .setCachePeriod(3600);
     registry.setOrder(Integer.MAX_VALUE);
   }
...

2. Make use of RouterFunction

This seems to be a new kind of method and mainly used in conjunction with WebFlux. However it seems to work also in other cases. At the moment it works also without specifying any vaadin.exclude-urls. Just create a Bean of the type:

@Configuration
public class MyConfig {

   @Bean
   public RouterFunction<ServerResponse> mediaRouter() {
      return RouterFunctions
            .resources("/media/**", new FileSystemResource("./media/"));
   }
...

3. Use Property spring.web.resources.static-locations

By default static resources will be routed and resolved by looking at the "static locations". Adding property spring.web.resources.static-locations=file:./myresources/ helps to add other locations. At the moment it works also without specifying any vaadin.exclude-urls.

I assume the first approach is the most interesting one, because it is most transparent and allows to add even a caching rule. However all three kind seem to work.