The "multiple files" feature enables to select more files for uploading. The listener is called after each transmission. But I don't know how many files will be uploaded by the component at all.
I would like to navigate to the next page after all the selected files were processed. Any suggestion is highly appreciated.
fileUploadListener="#{uploadBean.handleFileUpload}"
maybe not a good solution but you can use the oncomplete from p:fileUpload to trigger a hidden button, which invokes a action to navigate.
<p:fileUpload ... oncomplete="$('#btn').click()" />
and
<p:commandButton id="btn" action="#{myBean.actionToNavigate}" style="display:none;" />
Related
I'm using PrimeFaces' p:fileUpload with attribute mode="advanced" so there are 3 buttons (Choose, Upload, Cancel) for uploading files. Below those buttons there is a field in which the chosen files appear after using the choose button. If a file with a correct data type is chosen, the file's name, size, a process bar for the upload and a button to delete the file appear.
First question: Is there a way to add a tooltip to this button?
Also, if a file with an incorrect data type is chosen, an error message appears in the field below the 3 buttons. This error message also has a button to remove the message. Neither the message itself nor its button are focusable by the tab key which makes it inaccessible for non-mouse users.
Second question: Is there a way to make the error message focusable by the tab key?
<p:fileUpload id="fileUpload"
fileUploadListener="#{ShowcaseHandler.handleFileUpload}"
mode="advanced"
multiple="true"
auto="false"
dragDropSupport="false"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" chooseButtonTitle="Test"/>
Tooltip: See https://www.primefaces.org/showcase/ui/file/upload/tooltips.xhtml for examples using PFv10. Also look at the PrimeFaces documentation for p:tooltip.
It appears tooltips were only supported natively in fileUpload from PrimeFaces v10 and I suspect from the question that you're using PF7 or earlier, in which case please see this PrimeFaces issue log for a potential workaround: https://github.com/primefaces/primefaces/issues/5831. Unfortunately the example does not cover the second delete file button that you mentioned, which is an element of a repeating row. You may need to submit an enhancement request to get this added to PrimeFaces natively.
I've created a TabControl following this and similar guides:
https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/
The relevant code on my test Tabs.razor page is:
<TabControl>
<TabPage Text="Tab 1">
<h1>The first tab</h1>
</TabPage>
<TabPage Text="Tab 2">
<h1>The second tab</h1>
</TabPage>
<TabPage Text="Tab 3">
<h1>The third tab</h1>
</TabPage>
</TabControl>
The pages inside the tabs themselves will have a lot more content than just one sentence. All the tabbed examples I've found just have the tab contents like this, flat on the page. Is there some way to make the tab content more modular, possibly having it live in separate files? I'd want it all to load on the page initialization, I'd just like to not have a big monster .razor page with the contents of all the tabs.
I'm not sure if I need nested layouts here or what, or how the rendering would work (I'll need the tab contents to behave like top-level razor pages with functions and submit actions, etc...).
Pretty new to this, obviously, and haven't been able to find an answer. Thanks in advance.
<TabPage Text="Tab 1">
<MyFirstTabbedComponent />
</TabPage>
and then develop MyFirstTabbedComponent.razor as a page/component.
enfin, you have already done something similar.
I'm creating one web application using ASP.NET MVC 4.0 and Jquery .
Me use uploadify for uploading files from client and i want to upload file on post action of my form, so basically my problem is while i'm selecting file it shows progressbar with file list and uploading progressbar but i want to show only file not progress bar.
stuck at this point - Any suggestion ?
so you don't need uploadify you just want multi file select
make form like this
<form action="processThem.php" method="post" enctype="multipart/form-data">
<input type="file" value="" name="upload[]" multiple>
<button type="submit">Upload!</button>
</form>
Square brackets in name of input type file are important also attribute multiple
see this post
http://www.hyperorg.com/blogger/2012/09/09/beginner2beginner-javascript-multi-file-upload-php-to-process-it/
I'm using Primefaces 3.5 and I have ran into a pretty disturbing problem. The component looks like this in the xhtml:
<p:tab id="installApp" title="Install application">
<h:form enctype="multipart/form-data">
<p:panel header="Upload status" id="upld_status">
<p:dataTable id="errorTable" var="error"
value="#{applicationInstallerBean.uploadMsgs}">
<p:column headerText="Application">
<h:outputText value="#{error.filename}" />
</p:column>
<p:column headerText="Status">
<h:outputText value="#{error.errorMsg}" />
</p:column>
</p:dataTable>
</p:panel>
<p:remoteCommand name="clearPrevious" update="upld_status uploader" action="#{applicationInstallerBean.clearPrevious}" process="#this" />
<p:fileUpload id="uploader" multiple="true" dragDropSupport="true" onstart="clearPrevious()"
fileUploadListener="#{applicationInstallerBean.install}" uploadLabel="Install"
mode="advanced" update="#this upld_status" auto="false"
allowTypes="/(\.|\/)(zip)$/" styleClass="install_app_fileupload" />
</h:form>
<p:panel header="Help" toggleable="true">
<ui:include src="applicationInstallHelp.xhtml" />
</p:panel>
</p:tab>
Now the behaviour I'm experiencing is pretty strange:
For the first few times, uploading files with drag'n'drop method works fine. After a few uploads, the following errors appear totally undetermenistic:
FileUpload component disappears after pressing Upload button, only to reappear when I refresh the page
the onstart method gets called a lot of times during upload
the table containing the status of the upload does not refresh or only one of the files appear there, when multiple are uploaded
I also get a message from the browser that a script is running on this page and I can abort or continue
What I have tried:
Removing the h:form element, since this is an include in the index file, which already has a h:form element in it
Result: basicly the same, with the difference, that dropping a file for the first time onto the component automatically uploads it, but auto is set to false
I have also tried emptying the browser cache, redeploying the application from a scratch, turning off multiple...all with no luck.
The files I'm uploading are 80k to 9mb.
From this it looks to me, that uploading too much files makes the whole thing go crazy, but I cannot really think of a solution. Any help would be appreciated.
Update: During testing I found that the onstart method ALWAYS fires more than once after the first upload. For the first time it only fires once. On the second upload about 7-10 times, on the third time it seems it keeps firing until I end the session. This is pretty strange and I think it may be the root of the problems. Any ideas on this?
Thank you in advance!
How can I detect when someone has indeed picked some files from the file explorer and has hit select? I want to add an event on the selection of files.
I figured it out. You have to tie the input form to the onChange method.
<input type="file" data-dojo-attach-event="onChange:_onUpload" data-dojo-type="dojox/form.Uploader"/>
_onUpload: function(evt){
}