jsf - example - primefaces p:/ fileupload

Cómo deshabilitar el botón Elegir en PrimeFaces FileUpload hasta que se complete la carga

Question

¿Es posible bloquear / deshabilitar el botón "Elegir" en FileUpload?

Uso p: fileUpload en modo avanzado y establezco multiple = "true". Si hago clic en el botón Cargar para iniciar la carga de todos los archivos, quiero evitar que se agreguen más archivos hasta que se carguen todos los archivos.

La versión de PrimeFaces es 5.1.

Definición de p: fileUpload:

<p:fileUpload id="fileUpload" update=":form:uploadTable :msg :msgs" fileUploadListener="#{fileUploadBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
              multiple="true" sizeLimit="3221225472" fileLimit="100" style="margin:15px 0px;width:900px;" />

Solución con p: blockUI
Encontré una solución con el uso del elemento blockUI. Por lo tanto, al inicio, se muestra el bloqueUI y, una vez completadas todas las cargas, blockUI se oculta. Para ese código javascript es necesario.

<p:fileUpload id="fileUpload" update=":form:uploadTable :msg :msgs" fileUploadListener="#{fileUploadBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
                  multiple="true" sizeLimit="3221225472" fileLimit="100" style="margin:15px 0px;width:900px;"
                  onstart="setUploadFilesCount()" oncomplete="handleUploadComplete()" />  
<p:blockUI block="fileUpload" widgetVar="wVarBFileUpload" />

Código Javascript:

<script type="text/javascript">
    var fileCounter;
    var numberOfFiles;
    function setUploadFilesCount() {
        PF(''wVarBFileUpload'').show();
        fileCounter = 0;
        numberOfFiles = $(''.ui-fileupload-preview'').size();
    }

    function handleUploadComplete() {
        fileCounter++;
        if(fileCounter == numberOfFiles) {
            PF(''wVarBFileUpload'').hide();
        }
    }
</script>

Answer 1

Puede usar onstart y oncomplete para lograr esto:

<p:fileUpload onstart="disableChoosing()" 
              oncomplete="enableChoosing()"
              widgetVar="uploadWV"/>

<script>
   function disableChoosing() {
     PF(''uploadWV'').disableButton(PF(''uploadWV'').chooseButton);
     PF(''uploadWV'').chooseButton.find(''input[type="file"]'').attr(''disabled'', ''disabled'');
   }

   function enableChoosing() {
    if(!PF(''uploadWV'').files.length) {
        PF(''uploadWV'').enableButton(PF(''uploadWV'').chooseButton);
        PF(''uploadWV'').chooseButton.find(''input[type="file"]'').removeAttr(''disabled'');
    }
   }
</script>