Uploaded image upon redirect returned as type JSON instead of jpg

[Vojislav Kovacevic]

Hi there, I am newish to Spring and Java.

I have an spring boot / thymeleaf app where I can add a product, which contains some product info and an image.

When I edit a product, if I change the image, I redirect back to the same page, however even though the new image is successfully uploaded, it is not showing up (error 404 and type of image is  json), but I can for example inspect the image src and open that source and actually see the image, and also if I again refresh the page (after the initial redirect) the image is there.

So the image is there but it is simply not showing up upon initial redirect.

Relevant code from the POST request:

@PostMapping("/edit")
    public String edit(@Valid Product product, BindingResult bindingResult, MultipartFile file,
            RedirectAttributes redirectAttributes, Model model) throws IOException {
...
byte[] bytes = file.getBytes();
    String filename = file.getOriginalFilename();
    Path path = Paths.get("src/main/resources/static/media/" + filename);

        product.setSlug(slug);

        if (!file.isEmpty()) {
            product.setImage(filename);
            Files.write(path, bytes);
        } else {
            product.setImage(currentProduct.getImage());
        }

        productRepo.save(product);

    return "redirect:/admin/products/edit/" + product.getId();

}

The GET request (the redirect url)

@GetMapping("/edit/{id}")
    public String edit(@PathVariable int id, Model model) {

        List<Category> categories = categoryRepo.findAll();

        Product product = productRepo.getOne(id);

        model.addAttribute("product", product);
        model.addAttribute("categories", categories);

        return "admin/products/edit";
    }

In the view I render the image like so:

<img style="width:200px;" th:src="@{'/media/' + ${product.image}}" />

in chrome when I inspect network/img, I can see that upon the redirect the image is of type json(this is when the image is not showing up), and then when I refresh again and the image does show - then the type is jpg

guess the problem is that the image is of type json, why is it of type json, maybe I am not saving the image correctly?

[Rob Spoor]

Path src/main/resources/static/media will not work. While this is indeed the location where you put the files, it's not where Spring Boot serves them from. Files are instead served from the class path, starting with /static. The contents of src/main/resources/static/media are made part of the class path when the application is built, but afterwards that's no longer true. When you run the application from your IDE, the actual path is instead target/classes/static/media. When you build your Spring Boot application and run the resulting JAR file, you can't even change contents on the class path.

A better idea is to take an external path (configured in application.yml / application.properties) where you store files (or hard code it), and add that to your Spring Boot application's resource path. To do this, create a class that implements WebMvcConfigurer (or modify your possibly existing one), override addResourceHandlers and add a resource handler to your ResourceHandlerRegistry. For an example, see section 3 of https://www.baeldung.com/spring-mvc-static-resources.

[Vojislav Kovacevic]

Hi Rob and thank you for your time!

Honestly I'm struggling, I come from a PHP background and am not used to all this configuration for simple stuff.

I am using Spring Tools 4 so I do have a class that implements WebMvcConfigurer.

I also have the application.properties file.

I've visited the link you gave me however I don't get it, since you know the location of my media folder, any change of you just telling me the correct code for the WebConfig class?

Also, you said that

Path src/main/resources/static/media will not work

- Do you mean that just for serving the images or uploading them as well, since uploading works fine?

EDIT:

I tried the following however it is still not working (I can see the image when I first go to the edit page, but not after submitting the form, basically the same situation as before).

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/media/").addResourceLocations("/static/media/");
    }

[Vojislav Kovacevic]

OK I finally did it like so:

registry
          .addResourceHandler("/media/**")
          .addResourceLocations("file:/C:/Users/Voja/Desktop/project/src/main/resources/static/media/"); 

So is this a must because I am developing locally, and also if I deployed this application, would it be enough to just get rid of this code or would I need to actually modify it so that it works as expected online as well?

Also, why doesn't it work upon redirect (as soon as the image is uploaded), but if I refresh the page after uploading or just go the page before uploading it does work?

[Rob Spoor]

Vojislav Kovacevic wrote:OK I finally did it like so:

registry
          .addResourceHandler("/media/**")
          .addResourceLocations("file:/C:/Users/Voja/Desktop/project/src/main/resources/static/media/"); 

So is this a must because I am developing locally, and also if I deployed this application, would it be enough to just get rid of this code or would I need to actually modify it so that it works as expected online as well?

If you want to run this online, you need to change the location, but that would be the only change. You still need a path external to your application's source / resources if you want to store data.

Also, why doesn't it work upon redirect (as soon as the image is uploaded), but if I refresh the page after uploading or just go the page before uploading it does work?

What doesn't work? Do you still get 404 errors?

[Vojislav Kovacevic]

First of all for what it's worth, out of few forums you are the only one that helped me with the correct suggestions, so thanks a lot!

What doesn't work? Do you still get 404 errors?

It all works now, I meant before I set the path.

All static files that already exist (images, css, js) are rendered as is, without needing to specify the path, so why doesn't this apply straight after storing data (uploading the image in my case) as well?

Basically if I just want to just get static data (images, css, js) I don't need to set paths, but if I want to upload files and view them as soon as I upload them then for some reason I need to set the paths for that, why?

[Rob Spoor]

Because src/main/resources isn't used at runtime anymore. Its contents are copied to target/classes, which is part of the class path. When you add something to src/main/resources while the application is running, it's not copied to target/classes anymore, and therefore it's not on your class path.