Blocking while uploading a file

UI Components for JSF
Post Reply
DaBe1812
Posts: 17
Joined: 11 Jun 2021, 14:32

02 Feb 2023, 15:33

Hi,

I have the following issue. Users have to upload excel-files of which the data will be imported into the system.
While uploading the system is checking the data if everything is fine and consistent.
This check can take some time.
I want to have a blockUI so the user can see that the system is still working and I want to show a progress bar.

But the blockUI isn't blocking.

Code: Select all

<div class="card">
  <h:form id="hwImportWizardFrm">
    <p:growl id="messages" sticky="false" showDetail="true" escape="false" />
    <p:panel id="wizardPnl">
      <p:wizard flowListener="#{hwimportwiz.onFlowProcess}" backLabel="Zurück" nextLabel="Weiter" effect="slide" effectDuration="250">
        <p:tab id="command" title="Command" titleStyleClass="#{hwimportwiz.loggedIn ? 'comLogin' : 'comNotLogin'}">
          <p:panel id="logindaten" header="Logindaten">
             <!-- things -->
          </p:panel>
        </p:tab>
        <p:tab id="file" title="Datei">
          <p:panel id="quelldaten" header="Quelldaten">
            <p:messages />
            <h:panelGrid columns="2" columnClasses="label, value">

              <h:outputText value="Auswahl" />
              <p:fileUpload label="Datei auswahl" mode="simple" multiple="false" auto="true" allowTypes="/(\.|\/)(xlsx?m?|csv)$/"
                invalidFileMessage="nur xls | xlsx | csv | erlaubt" update="messages tablePanel quelldaten"
                listener="#{hwimportwiz.handleFileUpload}" skinSimple="true" id="fileUpBtn" onstart="PF('fileReadBlock').block()"
                oncomplete="PF('fileReadBlock').unblock()" />
            </h:panelGrid>
          </p:panel>
        </p:tab>

        <p:tab id="specification" title="Vorgaben">
          <p:panel header="Importvorgaben">
            <!-- things -->
          </p:panel>
        </p:tab>

        <p:tab id="summary" title="Zusammenfassung">
          <p:panel header="Zusammenfassung">
            <!-- things -->
          </p:panel>
        </p:tab>
      </p:wizard>
    </p:panel>

    <pe:blockUI widgetVar="fileReadBlock" block="tablePanel">
      <em class="fa fa-spinner fa-spin"></em>
    </pe:blockUI>
  </h:form>
</div>
I've tried both pe:blockUI and p:blockUI both aren't showing.

I don't know what to do furthermore.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

06 Feb 2023, 19:35

See the docs: https://primefaces.github.io/primefaces ... fileupload

You are using mode="simple" which is NOT AJAX its a normal HTML5 file input so there is no `onstart` or `oncomplete` events in Simple mode only in AJAX mode fileuploads.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

DaBe1812
Posts: 17
Joined: 11 Jun 2021, 14:32

07 Feb 2023, 10:16

Hi,
that was the solution, didn't see that ajax problem.

What matters me now is that the block comes up, but isn't showing the bean-values. My updated block:

Code: Select all

<p:blockUI widgetVar="fileReadBlock" block="wizardPnl">
  <p:graphicImage value="../resources/images/loader.gif" />
  <p:progressBar id="uploadProgress" widgetVar="uploadProgress" ajax="true" value="#{hwimportwiz.tableCheckProgress}"
    labelTemplate="#{hwimportwiz.tableCheckLabel}" global="false" interval="500">
  </p:progressBar>
</p:blockUI>
And the upload-button has this advanced-frame around it.

Code: Select all

<p:fileUpload label="Datei auswahl" mode="advanced" multiple="false" auto="true" allowTypes="/(\.|\/)(xlsx?m?|csv)$/"
  invalidFileMessage="nur xls | xlsx | csv | erlaubt" update="messages tablePanel quelldaten"
  listener="#{hwimportwiz.handleFileUpload}" skinSimple="true" id="fileUpBtn" onstart="PF('fileReadBlock').show()"
  oncomplete="PF('fileReadBlock').hide()" />
Can I remove this frame?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

07 Feb 2023, 14:36

As for the progress bar part not sure you will have to debug it.

Not sure what you mean about "frame" around it.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

DaBe1812
Posts: 17
Joined: 11 Jun 2021, 14:32

07 Feb 2023, 15:01

Tried debugging, but it isn't calling the getters, so I have to look for other reasons.

But the frame I mean I can show you:
If you look here:
http://primefaces.org/showcase/ui/file/ ... fwid=c67eb
There is only the upload button

And here:
http://primefaces.org/showcase/ui/file/ ... fwid=c67eb
There is the button embedded in a table.

But in the code those buttons are the same exept for the mode.

I've tried allready

Code: Select all

skinSimple="true"
but this wasn't the solution.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 18 guests