This question already has answers here:
How to use PrimeFaces p:fileUpload? Listener method is never invoked or UploadedFile is null / throws an error / not usable
(11 answers)
Closed 5 years ago.
I am trying to save the image file but the call is not going to the fileHandler method. We have already added filter to the web.xml as mentioned in the primefaces document. This demo I am trying. I also have commons-io and commons-fileupload. How can I correct it?
XHTML page
<h:form enctype="multipart/form-data">
<p:fileUpload
fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages" label="Choose a file"
auto="true" sizeLimit="10485760"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
invalidSizeMessage="The maximum file size allowed is 10 Megabytes !"
invalidFileMessage="You are allowed to upload only images !" />
<p:growl id="messages" showDetail="true" life="5000" />
</h:form>
Bean
#ManagedBean(name = "topicUploadBean")
#RequestScoped
public class TopicUploadBean {
//Primitives
private static final int BUFFER_SIZE = 6124;
/** Create a new instance of UploadBean */
public TopicUploadBean(){
System.out.println("created FileUploadController instance");
}
public void handleFileUpload(FileUploadEvent event){
ExternalContext extContext = FacesContext.getCurrentInstance().getExternalContext();
File result = new File(extContext.getRealPath("//WEB-INF//files//"+event.getFile().getFileName()));
System.out.println(extContext.getRealPath("//WEB-INF//files//"+event.getFile().getFileName()));
try {
FileOutputStream fileOutputStream = new FileOutputStream(result);
byte[] buffer = new byte[BUFFER_SIZE];
int bulk;
InputStream inputStream = event.getFile().getInputstream();
while(true){
bulk = inputStream.read(buffer);
if (bulk < 0){
break;
}
fileOutputStream.write(buffer,0,bulk);
fileOutputStream.flush();
}
fileOutputStream.close();
inputStream.close();
FacesMessage msg = new FacesMessage("File Description", "file name: " + event.getFile().getFileName() +" File size: "+ event.getFile().getSize()/1024 +" Kb Content type: "+ event.getFile().getContentType() + " the file was uploaded.");
} catch(IOException e){
e.printStackTrace();
FacesMessage error = new FacesMessage(FacesMessage.SEVERITY_ERROR, " the files were not uploaded!", "");
FacesContext.getCurrentInstance().addMessage(null, error);
}
}
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name>emyed-web</display-name>
<context-param>
<param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name>
<param-value>1</param-value>
</context-param>
<context-param>
<param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Production</param-value>
</context-param>
<context-param>
<param-name>javax.faces.SEPARATOR_CHAR</param-name>
<param-value>_</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>javax.faces.VALIDATE_EMPTY_FIELDS</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>#{userPreferences.theme}</param-value>
</context-param>
<context-param>
<param-name>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.allowTextChildren</param-name>
<param-value>true</param-value>
</context-param>
<!-- Custom filter to check for user login -->
<filter>
<filter-name>EmyEdAccessFilter</filter-name>
<filter-class>com.zreflect.emyed.filter.EmyEdAccessFilter</filter-class>
</filter>
<!-- Filter for uploading files -->
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
<init-param>
<param-name>thresholdSize</param-name>
<param-value>10240</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<filter-mapping>
<filter-name>EmyEdAccessFilter</filter-name>
<url-pattern>/pages/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!--servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>com.icesoft.faces.webapp.CompatResourceServlet</servlet-class>
<load-on-startup>1</load-on-startup> </servlet -->
<servlet>
<servlet-name>ImageRenderServlet</servlet-name>
<servlet-class>com.zreflect.emyed.servlets.ImageRenderServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>DownloadAttachmentServlet</servlet-name>
<servlet-class>com.zreflect.emyed.servlets.DownloadAttachmentServlet</servlet-class>
</servlet>
<!-- Atmos newly added -->
<servlet>
<description>MeteorServlet</description>
<servlet-name>MeteorServlet</servlet-name>
<servlet-class>org.atmosphere.cpr.MeteorServlet</servlet-class>
<init-param>
<param-name>org.atmosphere.servlet</param-name>
<param-value>com.zreflect.emyed.managedbean.circle.MeteorAtmosphereSharePostServlet</param-value>
</init-param>
<init-param>
<param-name>org.atmosphere.useNative</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>MeteorServlet</servlet-name>
<url-pattern>/meteor</url-pattern>
</servlet-mapping>
<!-- Atmos done -->
<!--servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
<load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Resource
Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<!--url-pattern>*.iface</url-pattern -->
<url-pattern>*.jspx</url-pattern>
<url-pattern>/xmlhttp/*</url-pattern>
<url-pattern>*.faces</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ImageRenderServlet</servlet-name>
<url-pattern>/photo/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>DownloadAttachmentServlet</servlet-name>
<url-pattern>/download/attachment/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<error-page>
<error-code>500</error-code>
<location>/errors/500.xhtml</location>
</error-page>
<error-page>
<exception-type>java.lang.Throwable</exception-type>
<location>/errors/500.xhtml</location>
</error-page>
<!-- error-page> <exception-type>javax.faces.application.ViewExpiredException</exception-type>
<location>/errors/viewExpired.xhtml</location> </error-page -->
</web-app>
Because of your managed bean is "topicUploadBean", not "fileUploadController". Please check your beans, or also post your fileUploadController bean if you have.
Related
I am creating a simple jsf login form for spring security authentication:
<form action="#{request.contextPath}/j_spring_security_check" method="post">
<h:outputLabel for="j_username" value="Username"/>
<h:inputText id="j_username"/>
<br/>
<h:outputLabel for="j_password" value="Password"/>
<h:inputSecret id="j_password"/>
<br/>
<h:commandButton value="Login"/>
</form>
And this is applicationContext.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:security="http://www.springframework.org/schema/security"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/security
http://www.springframework.org/schema/security/spring-security.xsd">
<security:http auto-config="true" use-expressions="true">
<security:intercept-url pattern="/login.xhtml" access="hasRole('IS_AUTHENTICATED_ANONYMOUSLY')"/>
<security:intercept-url pattern="/**" access="hasRole('ROLE_USER')"/>
<security:form-login login-page="/login.xhtml" default-target-url="/" authentication-failure-url="/login?login_error=1"/>
</security:http>
<security:authentication-manager>
<security:authentication-provider>
<security:user-service>
<security:user name="sajjad" password="200200" authorities="ROLE_USER"/>
</security:user-service>
</security:authentication-provider>
</security:authentication-manager>
</beans>
And web.xml:
<filter>
<filter-name>springSecurityFilterChain</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter-mapping>
<filter-name>springSecurityFilterChain</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
and faces-context.xml:
<application>
<el-resolver>org.springframework.web.jsf.el.SpringBeanFacesELResolver</el-resolver>
</application>
What is wrong with the code?
Add login-processing-url="/j_spring_security_check" to <security:http>
Try to add <dispatcher>REQUEST</dispatcher> to springSecurityFilterChain mapping
I'm kinda new to Spring Security, i tried to view some tutorials, but most of them are talking about Spring web mvc + spring security, or spring + spring security,
now i just want to add to my JSF application some role management, authentication and authorization which Spring Security provide very well.
Here is my login page:
<h:form>
<h:outputLabel value="username" for="j_username"
style="float:left" />
<h:inputText id="j_username" style="float:left" />
<h:outputLabel value="password" for="j_password"
style="float:left; clear:both" />
<h:inputSecret id="j_password" style="float:left" />
<h:commandButton value="login"
actionListener="#{loginController.login}" style="float:left;clear:both" />
</h:form>
my logging bean:
#Named(value = "loginController")
#SessionScoped
public class LoginController implements Serializable {
private String username;
private String password;
public String login() throws ServletException, IOException {
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
externalContext.dispatch("/j_spring_security_check");
facesContext.responseComplete();
return null;
}
and for my spring security file:
<form-login login-page="/faces/login.xhtml" default-target-url="/faces/index.xhtml"
authentication-failure-url="/faces/login.xhtml?status=failed"/>
<logout logout-success-url="/faces/logout.xhtml"/>
</http>
and if for some reason someone wanted to look at my web.xml, here it is:
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<filter>
<filter-name>springSecurityFilterChain</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter-mapping>
<filter-name>springSecurityFilterChain</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring-security.xml</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
One last thing, can Spring Security prevent users from navigating to "/index.xhtml" (instead of "/faces/index.xhtml") ? or maybe redirect them to the "/faces/..." if it is missing?
I have a problem with primefaces file uploader, when the uploading finish the handler method in the fileUploadListener doesn't called i placed a break point in the method start and the execution proceeds normally as it's not exists, there are no exceptions occurred:
this is my file uploader:
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages" sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
<h:message style="color:red;margin:8px;"/>
<p:growl id="messages" showDetail="true" />
</h:form>
and this is the handler:
#ManagedBean(name="fileUploadController")
#SessionScoped
public class FileUploadController {
public void handleFileUpload(FileUploadEvent event) {
FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>Ga</display-name>
<welcome-file-list>
<welcome-file>pages/HomePage.jsf</welcome-file>
</welcome-file-list>
<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>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
You should add the following filter to the web.xml :
<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>
EDIT1 :
Also this question can be helpful ;)
EDIT2 :
Dear friend please eliminate one of the filter mapping in your web.xml, it's duplicated.
I have tried a dumb solution that use two "DispatcherServlets" to use facelets as a view technology for a Spring MVC web application, it was nice for a moment, facelets pages can get models from controllers, the problem is when a facelets page send a form object, here is how this web application is set up:
web.xml:
<servlet>
<servlet-name>Example</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring/mvc-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Example</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
With this configuration this controller's method is working fine:
#RequestMapping(value = "/garage", method = RequestMethod.GET)
public ModelAndView get(){
ModelAndView mav = new ModelAndView() ;
mav.setViewName("/faces/garage.xhtml") ;
mav.addObject("listOfCars", carService.getCarList()) ;
mav.addObject("hello", "Hello World From Spring Controller") ;
return mav ;
}
The problem in this application, is when submitting a form, the jsf tag , is always trying to resolve a "faces/*.xhtml" view.
solutions like this simply don't change anything.
<h:form>
<p>
<h:inputText
id="carMarque"
title="Quelle est la marque du nouveau véhicule"
value="#{NewCar.marque}">
</h:inputText>
<h:commandButton id="submit" value="Ajouter" action="/garage/new" />
</p>
</h:form>
It just ends up with a ServletException
javax.servlet.ServletException: /newcar.xhtml #22,50 value="#{NewCar.marque}": Target Unreachable, identifier 'NewCar' resolved to null
I don't know if there is a way to fix that up.
I am using jsf2.0 with tomcat7 in eclipse ide.I have just do a image cropping,when i crop the image and submit the form there is a error in my code.i dont know where i am struct.
My view page is:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<script src="jquery-1.4.2.js"></script>
<script src="jquery.Jcrop.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
<p:imageCropper value="#{imageCropperBean.croppedImage}"
image="/detroit-nights.jpg" />
<p:graphicImage id="localCroppedImage"
value="#{imageCropperBean.newFileName}.jpg" />
</h:panelGrid>
<p:commandButton value="Crop"
update="localCroppedImage" action="#{imageCrop.crop}"
/>
</h:form>
</h:body>
</html>
The Backing Bean is:
package bean;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import javax.imageio.stream.FileImageOutputStream;
import javax.servlet.ServletContext;
import org.primefaces.model.CroppedImage;
#ManagedBean (name ="imageCrop")
#RequestScoped
public class ImageCropperBean {
private CroppedImage croppedImage;
private String newFileName;
public String getNewFileName() {
return newFileName;
}
public void setNewFileName(String newFileName) {
this.newFileName = newFileName;
}
public CroppedImage getCroppedImage() {
return croppedImage;
}
public void setCroppedImage(CroppedImage croppedImage) {
System.out.println("cRRRRRRRRRRRRR"+croppedImage);
this.croppedImage = croppedImage;
}
public String crop() {
System.out.println("WELCOMEMMMMMMMMMMMMMM");
ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
newFileName = servletContext.getRealPath("") + File.separator +"croppedImage.jpg";
System.out.println("FILE ANE"+newFileName);
FileImageOutputStream imageOutput;
try {
//File file = new File(newFileName);
imageOutput = new FileImageOutputStream(new File(newFileName));
System.out.println("HHHHHHHHHH=="+imageOutput);
imageOutput.write(croppedImage.getBytes(), 0, croppedImage.getBytes().length);
imageOutput.close();
} catch (FileNotFoundException e) {
System.out.println("NOT FOUND EXCEPTION"+e);
e.printStackTrace();
} catch (IOException e) {
System.out.println("IOEXCEPTION"+e);
e.printStackTrace();
}
//return newFileName;
return null;
}
}
The web.xml is:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee /web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<context-param>
<description>Context param for JSTL 1.2 to work in Tomcat 6 sun RI
</description>
<param-name>com.sun.faces.expressionFactory</param-name>
<param-value>com.sun.el.ExpressionFactoryImpl</param-value>
</context-param>
<context-param>
<description>Parameter required by Mojarra 2.0</description>
<param-name>com.sun.faces.allowTextChildren</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.VALIDATE_EMPTY_FIELDS</param-name>
<param-value>true</param-value>
</context-param>
<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>
org.primefaces.resource.ResourceServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
<init-param>
<param-name>thresholdSize</param-name>
<param-value>2097152</param-value>
</init-param>
<init-param>
<param-name>uploadDirectory</param-name>
<param-value>/temp</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>image.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Your references to the managed bean are wrong. Use the name as written in the name attribute of the #ManagedBean annotation.
So replace:
<p:imageCropper value="#{imageCropperBean.croppedImage}"
image="/detroit-nights.jpg" />
<p:graphicImage id="localCroppedImage"
value="#{imageCropperBean.newFileName}.jpg" />
with
<p:imageCropper value="#{imageCrop.croppedImage}"
image="/detroit-nights.jpg" />
<p:graphicImage id="localCroppedImage"
value="#{imageCrop.newFileName}.jpg" />
(You did it correctly for the p:commandButton).