bloggers bloggers

Marco Napolitano
Messaggi: 79
Stelle: 0
Data: 17/02/22
Jader Jed Francia
Messaggi: 63
Stelle: 0
Data: 18/02/21
Paolo Gambetti
Messaggi: 2
Stelle: 0
Data: 11/11/19
Katia Pazzi
Messaggi: 1
Stelle: 0
Data: 27/06/19
Ezio Lombardi
Messaggi: 11
Stelle: 0
Data: 10/04/18
Chiara Mambretti
Messaggi: 25
Stelle: 0
Data: 27/02/17
Serena Traversi
Messaggi: 3
Stelle: 0
Data: 21/07/16
Francesco Falanga
Messaggi: 8
Stelle: 0
Data: 14/06/16
Antonio Musarra
Messaggi: 2
Stelle: 0
Data: 18/11/13
Simone Celli Marchi
Messaggi: 6
Stelle: 0
Data: 09/07/13
Indietro

Visualizzare la progress bar durante l'upload di un file

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!

Commenti
Nessun commento. Vuoi essere il primo.