0

How to upload files to the @ModelAttribute using Thymeleaf? I'am doing something that:

upload.html

<form method="POST" action="#" th:action="@{/sending}" th:object="${collage}" enctype="multipart/form-data" >
            <input type="file" th:field="*{picture}" />
            <input type="file" th:field="*{picture}"  />
            <input type="submit" value="upload" />
</form>

My controller:

@Controller
public class MainController {

@GetMapping(value = { "/" })
public String index(){
    return "upload";
}

@GetMapping("/collage")
public String paintPicture(Model model){        
    return "collage";
}

@PostMapping("/sending")
public String redirect(@ModelAttribute(value="collage") Collage collage, RedirectAttributes redirectAttr) {

        Collections.shuffle(Arrays.asList(collage.getCollage()));
        redirectAttr.addFlashAttribute("pictures",collage.getCollage());
        return "redirect:/collage"; 
}
}

Collage.class:

public class Collage {

private MultipartFile[] pictures;

public Collage(){}

public MultipartFile[] getCollage() {
    return pictures;
}

public void setCollage(MultipartFile[] pictures) {
    this.pictures = pictures;
}
}

I'm getting: java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'collage' available as request attribute in the console and a text on "/" page:enter image description here

Flora
  • 533
  • 1
  • 8
  • 19
  • it's duplicate, please see https://stackoverflow.com/questions/36726525/thymeleaf-neither-bindingresult-nor-plain-target-object-for-bean-name-person-a – Jorge L. Morla Nov 24 '17 at 16:12
  • @Jorge L. Morla Thank you. But I think, my main problem is I cannot display the main page. When I use just I can display the main page, choose images to upload but finally I get null from collage object. – Flora Nov 24 '17 at 16:39

2 Answers2

2

One picture is better than 1000 words:

enter image description here

Now code example to upload an array of multipartfiles inside of Entity:

<form action="#" th:action="@{/distribution/save}" class="form-horizontal"
                              role="form" method="post" th:object="${news}" enctype="multipart/form-data">

    <input type="hidden" name="id" value="id" th:field="*{id}"> <div class="form-group has-label"> <label for="inputTitle" th:text="#{news.title}">Título</label>
    <input type="text" class="form-control" id="inputTitle"  th:placeholder="#{news.title}" th:field="*{title}"></div>
    <input type="file" name = "multipartFilesDocument" value="multipartFilesDocument"  th:field="*{multipartFilesDocument}" multiple="multiple"/>
<button type="submit" class="btn btn-default"><span th:text="#{common.save}"></span></button>
</div>
</form>

Controller Code:

 @PostMapping("/save")
    public String saveMultiparthFile(Model model,@ModelAttribute NewsDTO eventDTO){

        eventDTO.getId();
        return getrDetail(model);
    }

Entity code:

public class NewsDTO {
private List<MultipartFile> multipartFilesDocument;
  public List<MultipartFile> getMultipartFilesDocument() {
        return multipartFilesDocument;
    }

    public void setMultipartFilesDocument(List<MultipartFile> multipartFilesDocument) {
        this.multipartFilesDocument = multipartFilesDocument;
    }
}

In this code is really important enctype="multipart/form-data" and name = "multipartFilesDocument" value="multipartFilesDocument" in form

Jose Pose S
  • 1,175
  • 17
  • 33
1

you can apply this changes

1) change @ModelAttibute to @RequestParam

2) use MultipartFile[] as param and only use a single input file html

//name of input html should be collage
@PostMapping("/sending")
public String redirect(@RequestParam("collage") MultipartFile[] files, RedirectAttributes redirectAttr) {

        Collections.shuffle(Arrays.asList(files));
        redirectAttr.addFlashAttribute("pictures",files);
        return "redirect:/collage"; 
}

and your html page 

<form method="POST" th:action="@{/sending}" enctype="multipart/form-data" >
            <input type="file" name="collage" multiple="multiple"/>
            <input type="submit" value="upload" />
</form>
Flora
  • 533
  • 1
  • 8
  • 19
Jorge L. Morla
  • 630
  • 5
  • 14