Primefaces p:fileUpload not working [duplicate] - file-upload

This question already has an answer here:
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
(1 answer)
Closed 7 years ago.
Im using Primefaces4.0 with JSF2.0, i know some basics of Primefaces.
For me p:fileUpload is not working, it was working before. don't know what happend
when i select any file from the file chooser no file populated in file pan of p:fileUpload.
here is my code:
<p:panel style="font-size:15px;" header="Upload">
<p:fileUpload fileUploadListener="#{addAgentxls.handleFileUpload}" mode="advanced" dragDropSupport="true"
update="messages status" sizeLimit="100000" style="font-size:12px;" />
<p:growl id="messages" showDetail="true"/>
<p:outputLabel id="status" style="font-size:13px;" value="#{addAgentxls.status }"/>
</p:panel>
class file:
#ManagedBean(name = "addAgentxls", eager = true)
#SessionScoped
public class AddAgentUsingXLS {
public AddAgentUsingXLS(){
}
public void handleFileUpload(FileUploadEvent event) {
FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
web.xml:
<!-- File Uploading Constraints -->
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
i also see This done nothing for me
there is an error on google chrome browser
Uncaught TypeError: Object [object Object] has no method 'fileupload'
fileupload.js.xhtml?ln=primefaces&v=4.0:1
does it worth anything?

Solved.. ! i was using newer version of jQuery.js which was conflicting with Primefaces

please consider the suggestion on the following stack overflow link.
In JavaScript can I make a "click" event fire programmatically for a file input element?
Same issue. jQuery(".primeFacesHiddenAwayButton type=['file']").click() worked fine on IE as well as firefox ( My firefox is not the latest due to Selenium driver constraints). In any case, in chrome the JS button simply did not work. This is, apparently, a security feature built into the browser. You can try the suggestion on the provided link.

Related

bamboo: my custom action in xWork not decorated, the page shows without tabs

I am new to Atlasian Bamboo development and have a problem, if you could help me.
I develop a bamboo plugin and I have this xwork:
<xwork key="viewNFTResults" name="View NFT Results">
<package name="nftResults" extends="buildResultView">
<action name="viewNFTLogs" class="com.atlassian.sap.nftresults.impl.NFTLogsView">
<result name="success" type="freemarker">/fragments/view-nft-results-log.ftl</result>
<result name="error" type="freemarker">/fragments/error.ftl</result>
</action>
</package>
</xwork>
<web-item key="NFT:\${planKey}-\${buildNumber}" name="chainNFTResults" section="chainResults.subMenu/chainResults"
weight="80">
<label key="NFT logs"/>
<link linkId="NFT:\${planKey}-\${buildNumber}">/build/result/viewNFTLogs.action?buildKey=${planKey}&buildNumber=${buildNumber}</link>
</web-item>
In my ftl file I put in head:
<head>
<meta name="decorator" content="result"/>
<meta name="tab" content="chainNFTResults"/>
</head>
and the NFTLogsView class extends BuildResultsAction.
Now when I click the NFt logs tab when the build is running, the content of this tab is appears and the action performed and the page decorator is ok also, like that:
But when I refresh the page or when the build is finished, and I am showing the tab (I mean inside the tab), I get this page:
The other tabs disappeared and I git many exceptions in logs, like:
BambooActionSupport.getWebSectionsForLocation(String) threw an exception.
and...
`[INFO] [talledLocalContainer] ==> fn.hasPlanPermissionForKey("BUILD",
stage.planKey) [in template "lib/chains.ftl" at line 369, column 49]`
and...
BambooActionSupport.hasPlanPermission(String, String) threw an exception.
And many other exceptions. Although the action URL is the same when I click the tab and when refresh the page.
Any suggestions please.
Finally, after a week of effort and help from the Atlassian Development team, we have found the cause and a workaround till this gets fixed in Bamboo.
JIRA:
[https://jira.atlassian.com/browse/BAM-19884]
Cause: Following dependencies are not injected for Xwork action.
BambooPermissionManager, BambooAuthenticationContext, JiraApplinksService,
WebInterfaceManager, VcsRepositoryConfigurationService, PlanExecutionManager, TriggerManager, PlanManager
Workaround
Add the following in the class that extends ViewBuildResult, spring scanner will find these dependencies and make them visible for plugin class loader when xwork action gets instantiated.
#ComponentImport
private BambooPermissionManager bambooPermissionManager;
#ComponentImport
private BambooAuthenticationContext bambooAuthenticationContext;
#ComponentImport
private JiraApplinksService jiraApplinksService;
#ComponentImport
private WebInterfaceManager webInterfaceManager;
#ComponentImport
private VcsRepositoryConfigurationService vcsRepositoryConfigurationService;
#ComponentImport
private PlanExecutionManager planExecutionManager;
#ComponentImport
private TriggerManager triggerManager;
#ComponentImport
private PlanManager planManager;
In pom.xml add the following (this might not be needed for the most recent version of spring scanner)
<Import-Package>
org.springframework.osgi.*;resolution:="optional",
org.eclipse.gemini.blueprint.*;resolution:="optional",
com.atlassian.bamboo.applinks.*;resolution:="optional",
com.atlassian.bamboo.build.*;resolution:="optional",
com.atlassian.bamboo.plan.*;resolution:="optional",
com.atlassian.bamboo.plan.trigger.*;resolution:="optional",
com.atlassian.bamboo.security.*;resolution:="optional",
com.atlassian.bamboo.user.*;resolution:="optional",
com.atlassian.bamboo.vcs.configuration.service.*:="optional",
com.atlassian.plugin.web.*;resolution:="optional",
*
</Import-Package>
Link: Atlassian Forum
https://community.developer.atlassian.com/t/problem-with-decorator-in-xwork-the-page-is-displayed-without-tabs-and-lot-of-exceptions-in-the-log/18516/26

Primefaces file upload changes browser tab title to file name

If I upload a file with primefaces dialog the browser tab title is changed form the application name to the file name after the upload. This occurs with Firefox (41.0.2) and Chrome (46.0.2490.80). With Internet Explorer it does not occur. I am using Mojarra 2.2.12 and Primefaces 5.3. How can I suppress this?
<p:fileUpload id="docUploadId" widgetVar="docUploadWidgetVar" fileUploadListener="#{uploadDocumentBL.handleDocumentUpload}" mode="advanced"
dragDropSupport="true" multiple="true" fileLimit="#{uploadDocumentBL.fileCountUploadLimit}" sequential="true"
sizeLimit="#{uploadDocumentBL.fileSizeUploadLimitForOneFile}" cancelLabel="#{msgs['label.button.fileUpload.resetButton']}"
uploadLabel="#{msgs['label.button.fileUpload.uploadButton']}" label="#{msgs['label.button.fileUpload.chooseButton']}"
fileLimitMessage="#{msgs.getTextWithParams('msg.error.validation.upload.tooMuchFiles', uploadDocumentBL.fileCountUploadLimit)}"
invalidSizeMessage="#{uploadDocumentBL.getMaxFileSizeExceededValidationMessage()}" styleClass="uploadDocument" update="#this">
<h:panelGroup id="dropZoneTextId" styleClass="dropZoneTextDiv" layout="block">
<h:outputText value="#{msgs['label.documentUpload.fileDropZone']}" styleClass="dropZoneText" />
</h:panelGroup>
</p:fileUpload>

ReactJS.net unable to debug

I've created a small app using ReactJS.Net and ASP.NET 5. If I render a component serverside using #Html.React and tie that to the MVC
#using System.Threading.Tasks
#using React.AspNet
#model Models.DashboardViewModel
#Html.React("MessageBoard", new
{
recentPosts = Model.RecentPosts
})
messageBoard.jsx
"use strict";
var MessageBoard = React.createClass({
render: function(){
return (<table className="table forum table-striped">
<thead>
<tr>
<th className="cell-stat"></th>
<th>Topic</th>
<th className="cell-stat text-center hidden-xs hidden-sm">Replies</th>
<th className="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
</tr>
</thead>
<tbody>
{this.props.recentPosts.map(function(boardPost){
return <BoardPostRow post={boardPost}/>;
}, this)}
</tbody>
</table>)
}
});
This all works great. The problem is that when I go to sources, there is no .js file so I have no way to debug. This is probably ok for some simple read-only elements. But now I want to render some interactive elements that contain state, a form for creating a new Post to the "message board". Here's the code in the same *.cshtml file.
<div id="newPost"></div>
#section scripts
{
<script src="#Url.Content("~/scripts/Components/Board/boardPostForm.jsx")"></script>
<script src="#Url.Content("~/scripts/Components/Common/textInput.jsx")"></script>
<script>React.render(BoardPostForm({}), document.getElementById("newPost"))</script>
#Html.ReactInitJavaScript()
}
The error I get in the console is:
Uncaught SyntaxError: Unexpected token <
textInput.jsx:19 Uncaught SyntaxError: Unexpected token <
(index):69 Uncaught ReferenceError: BoardPostForm is not defined(anonymous function) # (index):69
(index):70 [.NET] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MessageBoard. See http://fb.me/react-warning-keys for more information.
(index):71 [.NET] Warning: Unknown DOM property class. Did you mean className?
(index):71 Uncaught ReferenceError: MessageBoard is not defined
It seems an error trying to read the .jsx, because it takes me to the render function when I click on the error. What am I missing here? Maybe I need to do the jsx->js conversion as part of my build process (I am using Gulp) instead of relying on ReactJS.NET?
What happens if you hit /scripts/Components/Board/boardPostForm.jsx in your web browser? It should show the compiled JSX and have some ReactJS.NET info at the top of the file. If it doesn't, make sure the *.jsx handler is configured in your Web.config. It should look something like this:
<add name="ReactJsx" verb="GET" path="*.jsx" type="React.Web.JsxHandlerFactory, React.Web" preCondition="integratedMode" />
What am I missing here? Maybe I need to do the jsx->js conversion as part of my build process (I am using Gulp) instead of relying on ReactJS.NET?
You can use Gulp if you like, up to you. I have a sample here that uses Webpack for bundling, and ReactJS.NET for server-side rendering: https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack

Is there an easy way to make the fileupload work with IE11 without updating zk

In IE11 file upload button of ZK is not working.
I got few replies, It says after updating ZK it will fix the problem.
But we can't update ZK, So in this scenario is there any way to work out this problem any how.
If you can't upgrade ZK then you can try to "downgrade" the IE using "X-UA-Compatible" either as meta-tag or as a response header
here an example using the meta tag:
<?meta http-equiv="X-UA-Compatible" content="IE=10" ?>
<zk>
<fileupload label="upload" onUpload="alert(event.getMedia().getName())"/>
</zk>
and what it looks like in the browser (in the IE dev tools F12 you can check if the meta tag had an effect, you'll see that IE falls back to version 10):
http://screencast.com/t/ftheLA9Ud8
Finally I got the Solution.
AS IE 11 having problem to attach event for listening to open File chooser.
You just manually add the listener.
<button id="browsebtn" upload="true,maxsize=-1" visible="true" sclass="text">
<attribute w:name="doMouseDown_">
function (evt) {
}
</attribute>
</button>
Its simple and weird, However what I found is make the parent component as draggable="true"
<row draggable="true">
<div style="text-align : right;">
<label value="Image File:" />
</div>
<fileupload id="fileUpload" label="Upload" tooltiptext="Click to upload image file."/>
</row>
Now suddenly you will see your fileupload button in ZK started working correctly for IE11 as well.

How can I react to a finished upload with <h:inputFile>?

I'm using Richfaces-4.3.5 on Wildfly-8.0.0.CR1 here, migrating from <rich:fileUpload> which doesn't work with JSF-2.2/Servlet-3.0. I'm replacing it with this snippet:
<rich:popupPanel id="testPop" autosized="true">
<h:form id="uploadF" enctype="multipart/form-data">
<h:inputFile value="#{bean.file}">
<a4j:ajax listener="#{bean.storeFile()}" render="#form,:fileListTbl"
oncomplete="#{rich:component('testPop')}.hide();" />
</h:inputFile>
</h:form>
</rich:popupPanel>
This works fine in that the storeFile method is called and I can access bean.file just fine. However, I'd like to close the rich:popupPanel when I'm done uploading, so I need to react to the success/complete events of the ajax request. But that doesn't seem possible - the popup stays visible and the response is clearly incomplete (indented for better readability):
<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
<changes>
<update id="j_id1:javax.faces.ViewState:0">
<[CDATA[-1186354868983349335:-5499969782208038164]]>
</update>
<extension id="org.richfaces.extension"><render>#component</render></extension>
</changes>
</partial-response>
Though the richfaces debug messages indicate the handlers are being called:
RichFaces: Received 'success' event from <input id=uploadF:j_idt1136 ...>
RichFaces: Received 'complete' event from <input id=uploadF:j_idt1136 ...>
So, simple question: how can I get the popup to close and the components to be re-rendered?
i'm not sure if the problem is directly related to a4j:ajax or what's needed to be done to make it work with a4j:ajax, but the code below seems to work with f:ajax.
<h:form id="formId">
<h:commandLink value="popup"
onclick="#{rich:component('testPop')}.show(); return false;" />
</h:form>
<rich:popupPanel id="testPop" autosized="true">
<h:form id="uploadF" enctype="multipart/form-data">
<h:inputFile value="#{bean.file}">
<f:ajax listener="#{bean.storeFile()}" render="#form :fileListTbl"
onevent="eventHandler"/>
</h:inputFile>
</h:form>
</rich:popupPanel>
<script>
function eventHandler(event)
{
if (event.status == 'success')
{
#{rich:component('testPop')}.hide();
}
}
</script>