Search code examples
javawicket-6

Setting id attribute on input field using Wicket MultiFileUploadField


In my panel class I have the following code:

private Fragment fileUploadField(String id, UploadFeedbackPanel feedbackPanel, ComponentFeedbackPanel componentFeedbackPanel) {
    String uploadType = isJSEnabled ? "multiple" : "single";
    Fragment uploadFragment = new Fragment( "uploadContainer", uploadType, this );

    if (isJSEnabled) {
        multipleUpload = new MultiFileUploadField( id, new PropertyModel<Collection<FileUpload>>( this, "multiUploads" ), MAX_FILES );
        uploadFragment.add( multipleUpload = multipleUpload);
        multipleUpload.add( newOnChangeAjaxBehavior( feedbackPanel, componentFeedbackPanel ) );
    } else {
        uploadFragment.add( singleUpload = new FileUploadField( id ) );
        singleUpload.add( newOnChangeAjaxBehavior( feedbackPanel, componentFeedbackPanel ) );
    }
    return uploadFragment;
}

I want to add a label for this field but I'm unable to get the actual input fields ID. You can see this working for the single upload field because the input field itself is render without any surrounding elements. This however doesn't seem to be exposed when using MultiFileUploadField.

An alternative acceptable answer would be using FileUploadField and a collection of files with the multiple=true attribute. However I am unsure how to limit the number of files to be MAX_FILES only.

    <label wicket:for="file"><wicket:msg key="file">File:</wicket:msg></label>
    <div wicket:id="uploadContainer" class="col-right">[upload fragment shows here]</div>
    <wicket:fragment wicket:id="single">
        <input wicket:id="file" type="file"/>
    </wicket:fragment>
    <wicket:fragment wicket:id="multiple">
        <div wicket:id="file" class="mfuex"></div>
    </wicket:fragment>

Wicket version 6.15.0.


Solution

  • MultiFileUploadField uses JavaScript to generate the input fields: https://github.com/apache/wicket/blob/master/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.js#L91 See whether you can plug there somehow. If you find an elegant way we would be glad to include it in the next version of Wicket!

    If you use 'multiple' attribute then check: How do I limit the number of file upload in html?