Wicket multiuploadField Auto submit

Question

I have created a multiuploadField object in wicket project which allows to select files and submit the files after clicking on submit button. But I want to auto submit the form once the file are selected by the user and upload the file without clicking the submit button. Is it possible to do this? Is there any way of doing it using onChange event or anything else.

<form wicket:id="simpleUpload">
            <fieldset>
                <legend>Upload form</legend>
                <p>
                <div wicket:id="fileInput" class="mfuex" />
                </p>
               <input type="submit" value="Upload!" />
            </fieldset>
</form>

Thanks in advance.

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

Yes, you have to use AjaxFormSubmitBehavior with change event for file input field.

As I can see, you use MultiFileUploadField, so just add:

fileInput.add ( new AjaxFormSubmitBehavior(form/*optional*/, 'change') 
                {
                   @Override
                   protected void onSubmit ( AjaxRequestTarget target )
                   {
                      super.onSubmit ( target );
                   }
                   /* you can also override other methods here, 
                      but note that Form's submit method will
                      be called too.*/
                } );

Where fileInput is file upload field, and form is form where your field is stored. If there is no submit event occurs, then check onError method if your form has some validations.

Note, that this behavior will be called each time you choose file from system file chooser. MultiFileUploadField does not allow to select multiple files at the same time. Adds only one by one.

To select some files at once you can use FileUploadField and HTML5 tag multiple, so in your markup will be the following:

<input wicket:id="fileInput" type="file" multiple="multiple"/>

It will work only with HTML5, and for other version it will allows to load only one file, but submit approach, described above will work for this too.

UPDATE

Actually I have already describe most of this for you here. You should react somehow by accepting the answer or describing why this does not solve your problem.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 16 '14 at 10:53

Michael Zhavzharov

1,727
13
26

Hi Thanks for your time and reply. Actually I have this wicket multiple upload working correctly but I dont want to a seperate submit button for that. When user clicks on the upload button it should be auto submited on selecting the files. But I am still confused with the usage of above code in my java code. – sam Oct 18 '14 at 05:48
@user2840965, yes, I've realized that and suggested you to use `AjaxFormSubmitBehavior`. You only need to add it to your file upload field and remove submit button from markup. The `Form` will submited after user choose file. – Michael Zhavzharov Oct 18 '14 at 05:52
Thanks Michael I will try doing it. – sam Oct 18 '14 at 06:41
@user2840965, let me know if it does not work for you. – Michael Zhavzharov Oct 18 '14 at 14:57
Last cause: null WicketMessage: Can't instantiate page using constructor 'public com.mycompany.HomePage(org.apache.wicket.request.mapper.parameter.PageParameters)' and argument ''. An exception has been throw – sam Oct 20 '14 at 06:25
@user2840965, ok you have NPE in line 92 of your HomePage. Check it. And there is my fault too, because you need to add form into your behavior and not into `MultiFileUploadField`. Or you can do not add form at all, as I mentioned before. Check answer's update. – Michael Zhavzharov Oct 20 '14 at 06:44
@user2840965, you have `fileInput` as null, you need to set `fileInput = new MultiFileUploadField(..)` as you do in line `89` and only then `add(fileInput)`, and then call `fileInput.add(...)`. It's about your java skills, not about wicket :) – Michael Zhavzharov Oct 20 '14 at 06:47
Thanks @Michael its working now. but the files are not getting uploaded to the upload folder ie Current files in /tmp/wicket-uploads: – sam Oct 20 '14 at 07:12
@user2840965, try to set breakpoint in your form's `onSubmit()` method and run your programm in debug mode, choose file from filechooser and see if programm will enter into your breakpoint after you 'open' this file. Also, check error messages in your console. Finally, try to create behavior as follows: `...new AjaxFormSubmitBehavior (this, "onchange"){...}...`. You can also override `onError()` method for form or behavior and check if your programm gets there. – Michael Zhavzharov Oct 20 '14 at 07:28
@user2840965, if you are confused about working with debugger, simply use `System.out.println("something");` to ensure if `onSubmit()` or `onError()` methods called. – Michael Zhavzharov Oct 20 '14 at 09:58
HI I have tried checking it using the breakpoint but it is not goin in onSubmit method after selecting the files. @Michael Zhavzharov – sam Oct 23 '14 at 03:28
@user2840965, you should use `
` in your markup, instead of `` if you use `MultiFileUploadField` component. I've tried your code and it works, with the above-mentioned correction, but you should also note, that if you'll choose files another time, then previous selected files will post again, so you should check this behavior. Also, if you want to update `FileListView` when submiting form - place it in `WebMarkupContainer` and update this container via `target.add(...)` in `onSubmit` method. – Michael Zhavzharov Oct 23 '14 at 06:15
Hi Thanks a Lot it is working fine. @Michael Zhavzharov. Yes Actual I wanted to create a menu list of files which are selected so that is fine even the previously chosen files are seen I want the upload folder to be empty when user opens the page for the first time. that only a browse button should appear when the user open the page and list should be create when user uploads the file. – sam Oct 23 '14 at 08:13
can we also change the style of wicket upload field that is instead of browse can we make label it as LOAD LIST. Thanks – sam Oct 23 '14 at 08:17
@user2840965, if you achieve what you want to, then you should accept an answer, as well as [this](http://stackoverflow.com/a/26230505/2168532) answer too :). Сustomizing your file upload component is not an obvious issue, you better ask new question, but you can easily google it, for example [this](http://stackoverflow.com/a/5813384/2168532). – Michael Zhavzharov Oct 23 '14 at 08:24

Wicket multiuploadField Auto submit

1 Answers1