[WICKET-6002] FileUploadField makes form-component models become null on submit

• Type: Bug
• Status: Resolved
• Priority: Major
• Resolution: Fixed
• Affects Version/s: 7.0.0
• Fix Version/s: 7.2.0, 8.0.0-M1
• Component/s: wicket
• Environment: Spring Boot 1.2.6, wicket-bootstrap 0.10.3, Tomcat 8
• Assignee: Martin Tzvetanov Grigorov
• Reporter: Hendy Irawan
• Created: 16/Oct/15 11:19
• Updated: 14/Nov/15 12:46
• Resolved: 14/Nov/15 12:45

Description

First form: (not working)

        final Form<Void> form = new Form<>("form");

        final ListModel<FileUpload> filesModel = new ListModel<>();
        final FileUploadField fileFld = new FileUploadField("fileFld", filesModel);
        form.add(fileFld);

        final Model<GrayscaleMode> modeImageModel = new Model<>(GrayscaleMode.WHITE_ON_BLACK);
        final RadioChoice<GrayscaleMode> modeImage = new RadioChoice<>("modeImage",
                modeImageModel, ImmutableList.copyOf(GrayscaleMode.values()));
        form.add(modeImage);

        form.add(new AjaxButton("loadBtn2") {
            @Override
            protected void onAfterSubmit(AjaxRequestTarget target, Form<?> form) {
                super.onAfterSubmit(target, form);
                log.info("modeimageModel: {}", modeImageModel.getObject());
            }
        });
        add(form);

Second form: exactly same as above, but remove the fileUploadField.

final Form<Void> form2 = new Form<>("form2");
final Model<GrayscaleMode> modeImage2Model = new Model<>(GrayscaleMode.WHITE_ON_BLACK);
final RadioChoice<GrayscaleMode> modeImage2 = new RadioChoice<>("modeImage2",
        modeImage2Model, ImmutableList.copyOf(GrayscaleMode.values()));
form2.add(modeImage2);
form2.add(new AjaxButton("loadBtn3") {
    @Override
    protected void onAfterSubmit(AjaxRequestTarget target, Form<?> form) {
        super.onAfterSubmit(target, form);
        log.info("modeimageModel: {}", modeImage2Model.getObject());
    }
});
add(form2);

Markup:

<form class="col-md-3" wicket:id="form">
    <p><strong>Original</strong></p>
    <div>
        <input type="file" wicket:id="fileFld" accept="image/*"/>
        <p>
            <label>Mode</label>:
            <span wicket:id="modeImage"></span>
        </p>
        <button class="button" wicket:id="loadBtn2">Load Biasa</button>
    </div>
</form>

<form class="col-md-3" wicket:id="form2">
    <p><strong>Original</strong></p>
    <div>
        <p>
            <label>Mode</label>:
            <span wicket:id="modeImage2"></span>
        </p>
        <button class="button" wicket:id="loadBtn3">Load 3</button>
    </div>
</form>

With the non-working form, the request is multipart. This seems to cause all form components' model.getObject() become null.

POST /chaincode?0-1.IBehaviorListener.0-form-loadBtn2&wicket-ajax=true&wicket-ajax-baseurl=chaincode%3F0 HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 576
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:8080
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryv78rJ8mvP8YbHtBy
Referer: http://localhost:8080/chaincode?0
Accept-Encoding: gzip, deflate
Accept-Language: id,en-US;q=0.8,en;q=0.6,ms;q=0.4
Cookie: JSESSIONID=746B6931A8791427E02FCE5C1D20F1B7

------WebKitFormBoundaryv78rJ8mvP8YbHtBy
Content-Disposition: form-data; name="form3_hf_0"


------WebKitFormBoundaryv78rJ8mvP8YbHtBy
Content-Disposition: form-data; name="fileFld"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundaryv78rJ8mvP8YbHtBy
Content-Disposition: form-data; name="modeImage"

0
------WebKitFormBoundaryv78rJ8mvP8YbHtBy
Content-Disposition: form-data; name="msgImage"


------WebKitFormBoundaryv78rJ8mvP8YbHtBy
Content-Disposition: form-data; name="loadBtn2"

1
------WebKitFormBoundaryv78rJ8mvP8YbHtBy--

With the working form, the request is urlencoded form:

POST /chaincode?0-1.IBehaviorListener.0-form2-loadBtn3 HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 36
Origin: http://localhost:8080
Wicket-FocusedElementId: loadBtn32
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: application/xml, text/xml, */*; q=0.01
X-Requested-With: XMLHttpRequest
Wicket-Ajax: true
Wicket-Ajax-BaseURL: chaincode?0
Referer: http://localhost:8080/chaincode?0
Accept-Encoding: gzip, deflate
Accept-Language: id,en-US;q=0.8,en;q=0.6,ms;q=0.4
Cookie: JSESSIONID=746B6931A8791427E02FCE5C1D20F1B7

form21_hf_0=&modeImage2=0&loadBtn3=1

"Probably" related with WICKET-5924, but I don't have issue with FileUploadField, my issue is with other form components in the same form as FileUploadField. Probably related to: http://stackoverflow.com/questions/28784942/fileupload-field-wicket-error

Test case:

git clone https://github.com/tmdgitb/pengenalan_pola_shih.git -t WICKET-6002

1. Run DaemonApp
2. Go to "ChainCode" page
3. click "Load Biasa" on the left, you'll see "modeimageModel: null". --> not working: using FileUploadField + multipart
4. click "Load 3" on the right, you'll see "modeimageModel: WHITE_ON_BLACK" --> works: using urlencoded

Issue Links

• depends upon: WICKET-5924 FileUploadField does not work with Servlet 3.0 multipart config