uploaded image does not display until I refresh the page Spring Mvc

Question

I'm using spring mvc with thymeleaf to upload an image to the server and display it after submitting the form in a separate page "result".

the problem is the image is not displayed until I refresh resources folder "resources/static/images" in Spring Tool Suite and then refresh the page. I modified eclipse workspace options to refresh automatically and the ide part solved but still need to refresh the result page to get the image displayed

This is the controller code

@RequestMapping(value = "/save", method = RequestMethod.POST)
public String contentSubmit(@Valid @ModelAttribute ContentEntity cm, BindingResult result,
        @RequestParam("file") MultipartFile file, Model model) {
    if (!file.isEmpty()) {
        try {
            cm.setImgUrl(file.getOriginalFilename());
            byte[] bytes = file.getBytes();
            BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File("src/main/resources/static/images/"+cm.getImgUrl())));
            stream.write(bytes);
            stream.close();
        } catch (Exception e) {
            //return error page
        }
    }

    if (result.hasErrors()) {
        return "cms";
    }

    contentDao.addContent(cm);
    return "view";
}

and this is the view code

<img th:src="@{'images/'+${contentEntity.imgUrl}}" class="image-responsive thumbnail" />

The server doesn't serve images from `src/main/resources/`. It serves them from a web application built from this directory (and others). Consider the web application as a big war file that you can't modify at runtime (because that's what it should be). Consider the uploaded images as data, stored somewhere **out of the application** on the production web server or in a database, because that's what they are. You need a servlet or controller that takes an image ID, reads the corresponding file or database blob, and sends back the data to the browser, with the appropriate content type. — JB Nizet, Aug 08 '15 at 14:14
I was facing the same problem. And I solved it by following this post. So now I am wondering if this will happen in server (production state) also, or this is just a problem for local environment (development state)? Is this process of saving an image/file safe? — Partho63, Jul 30 '19 at 08:09

score 7 · Answer 1 · answered Nov 25 '16 at 23:14

You are pragmatically creating a resource (image file) in "src/resources/..." directory. However it appears that your server is serverig images fromm different directory( say target/** or bin/**). So when you refreshing the resource directory, STS does detect the new file is recently created and then it copy the file under target directory.

There is an option in eclipse "native hooks or polling" which constantly monitor the resources for changes (even though the are made externally to STS/eclipse) . As soon as it detect the changes, resources will get refreshed automatically.

You may want to set this option via: Preferences > General > Workspaces > "Refresh using native hooks or polling"

Hope this helps.

Is there any possibility that it will happen in server (production state) also, or this is just a problem for local environment (development state)? Is this process of saving an image/file safe? — Partho63, Jul 30 '19 at 08:04

score 0 · Answer 2 · answered Mar 09 '21 at 14:58

0

Another way I solved it was, instead of storing images only in resources/static/images you can also save them in target/classes/static/images and the server will be able to see newly added images without refreshing.

answered Mar 09 '21 at 14:58

Hercules270

38
5

uploaded image does not display until I refresh the page Spring Mvc

2 Answers2