Wednesday, 15 September 2010

java - Wicket: FileUploadField with ListView -



java - Wicket: FileUploadField with ListView -

i have page used upload several files. each file, user must specify type , description, that's why can't utilize multifileuploadfield... utilize repeatingview fileuploadfield in each element along other 2 fields need.

the problem whenever "add file" button clicked (ajaxlink), fileuploadfields had file, reset null...

what can do?

here listview (sorry, wasn't repeatingview listview):

imodel<list<etddokument>> listmodel = getlistmodel(); listview<etddokument> dokumentelist = new listview<etddokument>("dokumentelist", listmodel) { private static final long serialversionuid = 1l; @override protected void populateitem(listitem<etddokument> item) { final boolean showheaders = ((getlist() == null) || getlist().size() == 0); final webmarkupcontainer headrow = new webmarkupcontainer("headrow"); headrow.setvisible(showheaders); item.add(headrow); etddokumentrowpanel etddokumentrow = new etddokumentrowpanel("bodyrow", item.getmodel()); item.add(etddokumentrow); } }; dokumentelist.setreuseitems(true); add(dokumentelist); ajaxlink<void> addlink = new ajaxlink<void>("adddokument") { private static final long serialversionuid = 1l; @override public void onclick(ajaxrequesttarget target) { etdconfiguration etdconfig = etdconfigform.this.getmodelobject(); final etddokument newvalue = new etddokument(etdconfig); tempetddokumente.add(newvalue); target.addcomponent(etdconfigform.this); } }; add(addlink); the etddokumentrowpanel has nil interesting, show fileuploadfield, textfield file description , dropdownchoice select type of document (our own classification).

ok, it's bit tricky, because html's <input type="file"> losts it's selection after update, , real model object (choosen file) fileuploadfield set when post event occurs. so, if add together ajaxeventbehavior onchange event our file panel - it's model null after user selects file.

actually, have access chosen file before post request js , can implement 'saving' script, hold selected files in array, while ajax update proccessed, , set them back, tediously.

so, way solve issue proccess update on newly added component , don't touch others.

i utilize repeatingview, because need generate new wicket ids when click addlink , not according model. here's code (read comments carefully):

/* method, init form */ private void init() { /* container, hold fileuploadfields, repeatingview adds children it's parent object. */ webmarkupcontainer container = new webmarkupcontainer("container"); /* need dom id container component. */ container.setoutputmarkupid(true); add(container); final repeatingview rv = new repeatingview("dokumentelist"); container.add (rv); /* need add together default model values ourselfs repeatingview: */ for(etddokument doc : getlistmodel().getobject()) { createdocumentrow(rv, doc); } final ajaxlink<string> addlink = new ajaxlink<string>("adddokument") { @override public void onclick(ajaxrequesttarget target) { final etddokument newvalue...; final etddokumentrowpanel r = createdocumentrow(rv, newvalue); ... /* it. dynamicly adding created before component markup. allows update component via ajax. */ target.prependjavascript( "var item=document.createelement('div');" + //creating empty 'div' tag "item.id='" + r.getmarkupid() + "'; " + // set markup id 'div'. "wicket.$('" + container.getmarkupid() + "').appendchild(item);" // add together 'div' container child. ); /* added 'div' still empty, update replace it, real component's markup.*/ target.add(r); } }; add(addlink); } /* method creates new instance of edrowp (with random id) , adds repeatingview. have dropped implementation of headrow, can include edrowpanel or implement similar. */ private etddokumentrowpanel createdocumentrow( repeatingview rv, etddokument doc ) { etddokumentrowpanel row = new etddokumentrowpanel(rv.newchildid(), doc); rv.add(row); homecoming row; }

and in markup:

class="lang-html prettyprint-override"><form...> ... <div wicket:id="container"> <div wicket:id="dokumentelist"></div> </div> <a href wicket:id="adddokument">add</a> .... </form>

it looks cumbersome solution little problem, think, there no more elegant 1 (or may sleepy now, see ). , should work.

java file-upload wicket

No comments:

Post a Comment