Capita spesso di dover realizzare un form con cui fare l'upload di un file; a seconda della dimensione del file e di altri fattori legati alla rete, l'operazione potrebbe richiedere un pò di tempo durante il quale l'utente aspetta speranzoso senza avere nessun tipo di feedback dal portale.
Fortunatamente Liferay ha già pensato e risolto questa problematica, consentendo in maniera relativamente semplice di visualizzare una progress bar durante tutta la fase di upload del file. Tutto il lavoro viene svolto direttamente all'interno della JSP che contiene il form; vediamo quindi come fare.
La prima cosa da fare è definire un identificativo univoco per la progress bar:
<% String uploadProgressId = PortalUtil.generateRandomKey(request, "portlet_mia_portlet_uploadProgressId"); %>
Dopodichè andiamo a definire il form HTML, con qualche piccola modifica:
<aui:form action="..." enctype="multipart/form-data" method="post" name="fm" onSubmit='<%= "event.preventDefault(); " + renderResponse.getNamespace() + "uploadFile();" %>'>
Ovviamente dobbiamo definire l'attributo enctype
, ma quello che innesca la magia è l'attributo onSubmit
che non fa altro che inibire il normale submit del form ed invocare una funzione Javascript che andremo a definire come segue:
<aui:script>
function <portlet:namespace />uploadFile() {
<%= uploadProgressId %>.startProgress();
submitForm('#<portlet:namespace />fm');
}
</aui:script>
Questa funzione non fa altro che avviare l'animazione della progress bar ed innescare il submit del form.
Ok, ma la progress bar dov'è? Decidete dove volete metterla ed inserite questa taglib:
<liferay-ui:upload-progress
id="<%= uploadProgressId %>"
message="uploading"
redirect="<%= HtmlUtil.escape(PortalUtil.escapeRedirect(redirectURL)) %>"
/>
Buon upload!