3

I am using PrimeFaces File Upload with mode="advanced" and multiple="true" just like the demo shows here https://www.primefaces.org/showcase/ui/file/upload/multiple.xhtml?jfwid=50dd6

In this case, the user uploads multiple files and is shown the files to edit the list. The user must then click "upload" to upload the files. If they fail to click upload and submit the form on the page, the files don't get uploaded. I know about the auto="true" option, but we want to keep the ability to edit the list.

How can I prevent form submission if the user has pending file uploads?

Sam Donato
  • 471
  • 6
  • 12

2 Answers2

2

You can block the submit button by checking the number of files in the onclick attribute:

<h:form>
    <p:fileUpload widgetVar="upload" .../>
    <p:commandButton onclick="return PF('upload').files.length===0" .../>
</h:form>

Of course it would be better to extend this check and show a message to the user if they forgot to upload any files. For example by adding a message to a p:growl component:

PF('growl').add({detail:'Please upload files first',severity:'warn'});

See also:

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
0

Well I don't know if you are using some other "dirty" form logic but can't you just set your dirty flag in the onAdd JS function of the FileUploader?

onAdd="setDirty(true);"

Then you can use onBeforeUnload to display the dirty dialog like in this post: What is the easiest way to detect if at least one field has been changed on an HTML form?

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Melloware
  • 10,435
  • 2
  • 32
  • 62