jsf upload file upload immediately

Question

I have a little problem and I wonder is it possible to resolve it in JSF 2.2.3 I use relatively new inputFile tag and it works ok:

<h:form enctype="multipart/form-data">
                    <h:inputFile id="auctionImage" value="#{auctionBean.image}"/>
                    <h:commandButton value="Add">
                        <f:ajax execute="auctionImage" render="images"/>
                    </h:commandButton>
                    <h:panelGroup id="images">
                        <ui:repeat value="#{auctionBean.productImages}" var="oneImage">
                            <h:graphicImage value="/image/#{oneImage.url}" width="200" height="171" />
                        </ui:repeat>
                    </h:panelGroup>
                </h:form>

I want to show every submitted img on the website and have one main sumbit button to submit them all at once. It works ok. The problem is I have three buttons to browse for image, to submit image and to submit all images. Is it possible to submit it after clicking OK in explorator window?

Answer 1

Ok after day of trying with javascript i realized that it's very simple to achieve by just an ajax tag.

            <h:form class="imageForm" enctype="multipart/form-data">
                <div class="browseButton"><span class="browseString">BROWSE...</span>
                    <h:inputFile id="auctionImage" value="#{auctionBean.image}"> 
                        <f:ajax execute="auctionImage" render=":mainForm:repeatImages"/>
                    </h:inputFile>
                </div>
            </h:form>

Yes, that's it.

PS I used wrapper div and opacity trick for button to change standard html 5 appearance.