Februari 9, 2007

Upload gambar dengan JSF (Java Server Faces)

Posted in Java, komputer pada 11:03 am oleh fuad

Saat ini JSF tidak menyediakan implementasi standar untuk mengupload file ke Server. Sehingga implementasi standar (JSF Reference Implentation) yang dibuat oleh Sun tidak menyediakannya. Untuk itu dibutuhkan beberapa library tambahan yaitu common-fileupload yang disediakan oleh proyek Apache Jakarta Common dan Apache MyFaces. Sebagai catatan MyFaces adalah implementasi JSF yang dibuat oleh orang orang Apache. MyFaces meyediakan beberapa komponen tambahan diluar standar salah satunya komponen untuk mengupload file.

Dalam tutorial ini saya akan memperlihatkan bagaimana mengupload file pada JSF menggunakan JSF yang dibuat oleh Sun. Langkah pertama yang harus anda lakukan adalah mengkopi semua library yang dibutuhkan ke ClassPath aplikasi anda .Berikut library-library yang anda butuhkan:

JSF 1.1 RI

jsf-api.jar jsf-impl.jar

JSTL 1.1 RI

jstl.jar standard.jar

MyFaces Extensions

myfaces-extensions.jar

Apache Commons (used by JSF and MyFaces Extensions)

commons-collections.jar

commons-digester.jar

commons-beanutils.jar

commons-logging.jar

commons-fileupload-1.0.jar

commons-io.jar

MyFaces extension adalah library MyFaces yang telah dikeluarkan paket javax.* nya hal ini dilakukan untuk mencegah bentrok dengan paket JSF RI. Untuk itu anda cukup mengekstrak file myfaces-*.jar yang berisi kelas org.apache.myfaces.custom.fileupload.UploadedFile biasanya ada pada file myfaces-all.jar. Hapus folder javax dan kompress kembali dengan nama myfaces-extension.jar atau nama lain yang anda inginkan.

Selanjutnya edit file web.xml dengan menambahkan filter org.apache.myfaces.component.html.util.ExtensionsFilter sebagai berikut:

<?xml version=”1.0″ encoding=”UTF-8″?>

<web-app version=”2.4″ xmlns=”http://java.sun.com/xml/ns/j2ee&#8221; xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd”&gt;

<context-param>

<param-name>com.sun.faces.verifyObjects</param-name>

<param-value>false</param-value>

</context-param>

<context-param>

<param-name>com.sun.faces.validateXml</param-name>

<param-value>true</param-value>

</context-param>

<context-param>

<param-name>javax.faces.STATE_SAVING_METHOD</param-name>

<param-value>client</param-value>

</context-param>

<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>

<session-config>

<session-timeout>30</session-timeout>

</session-config>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

<filter>

<filter-name>ExtensionsFilter</filter-name>

<filter-class>org.apache.myfaces.component.html.util.ExtensionsFilter</filter-class>

<init-param>

<param-name>uploadMaxFileSize</param-name>

<param-value>10m</param-value>

</init-param>

<init-param>

<param-name>uploadThresholdSize</param-name>

<param-value>100k</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>ExtensionsFilter</filter-name>

<servlet-name>Faces Servlet</servlet-name>

</filter-mapping>

</web-app>

uploadThresholdSize dan uploadMaxFileSize berfungsi memberitahu MyFaces untuk menyimpan file yang kurang dari 100k pada memori dan menolak file dengan ukuran lebih dari 10m. Sedang untuk file yang ada diantara keduanya akan disimpan sebagai file temporary.

Setelah itu buat form untuk mengupload file dengan komponen yang disediakan MyFaces (upload.jsp) dan file untuk menampilkan hasil upload (MyResult.jsp).

Kode upload.jsp

<%@page contentType=”text/html”%>

<%@page pageEncoding=”UTF-8″%>

<%@ taglib uri=”http://java.sun.com/jsf/core&#8221; prefix=”f”%>

<%@ taglib uri=”http://java.sun.com/jsf/html&#8221; prefix=”h”%>

<%@ taglib uri=”http://myfaces.apache.org/extensions&#8221; prefix=”x”%>

<f:view>

<h:form id=”MyForm” enctype=”multipart/form-data” >

<h:panelGrid columns=”3″ border=”0″ cellspacing=”5″>

<h:outputText value=”Gambar:”/>

<x:inputFileUpload id=”myFileId” value=”#{uploadBean.myFile}” storage=”file”/>

<h:commandLink action=”#{uploadBean.upload}” value=”Create”/>

</h:panelGrid>

</h:form>

</f:view>

 

Kode MyResult.jsp

<%@ taglib uri=”http://java.sun.com/jsf/core&#8221; prefix=”f”%>

<%@ taglib uri=”http://java.sun.com/jsf/html&#8221; prefix=”h”%>

<f:view>

<h:panelGrid columns=”2″ border=”0″ cellspacing=”5″>

<h:outputText value=””/>

<h:graphicImage value=”/gambar.jpg” title=”gambar”/>

<h:outputText value=”FileName:”/>

<h:outputText value=”#{uploadBean.myFile.name}”/>

<h:outputText value=”FileSize:”/>

<h:outputText value=”#{uploadBean.myFile.size}”/>

</h:panelGrid>

</f:view>

Buat definisi backup bean uploadBean pada faces-config.xml

<faces-config>

<managed-bean>

<managed-bean-name>uploadBean</managed-bean-name>

<managed-bean-class>upload.UploadBeanController</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

<navigation-rule>

<from-view-id>/upload.jsp</from-view-id>

<navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/MyResult.jsp</to-view-id>

</navigation-case>

</navigation-rule>

</faces-config>

kelas upload.UploadBeanController adalah kelas yang nantinya akan memproses file yang telah kita upload.

package upload;

import java.io.BufferedInputStream;

import java.io.BufferedOutputStream;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import javax.faces.application.FacesMessage;

import javax.faces.context.FacesContext;

import javax.servlet.ServletContext;

import org.apache.myfaces.custom.fileupload.UploadedFile;

 

public class UploadBeanController {

private UploadedFile myFile;

public UploadBeanController() {

}

public UploadedFile getMyFile() {

return myFile;

}

 

public void setMyFile(UploadedFile myFile) {

this.myFile = myFile;

}

public String upload(){

String uploadedFileName=myFile.getName();

System.out.println(uploadedFileName);

int index = uploadedFileName.lastIndexOf(‘/’);

String justFileName=””;

if ( index >= 0) {

justFileName = uploadedFileName.substring( index + 1 );

} else {

// Try backslash

index = uploadedFileName.lastIndexOf(‘\\’);

if (index >= 0) {

justFileName = uploadedFileName.substring( index + 1 );

} else {

// No forward or back slashes

justFileName = uploadedFileName;

}

}

String uploadedFileType = myFile.getContentType();

if ( uploadedFileType.equals(“image/jpeg”) || uploadedFileType.equals(“image/pjpeg”) || uploadedFileType.equals(“image/gif”) || uploadedFileType.equals(“image/png”)|| uploadedFileType.equals(“image/x-png”)) {

// get the path to the /resources/images directory

// from the servlet context

ServletContext theApplicationsServletContext =(ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();

String realPath =theApplicationsServletContext.getRealPath(“/”);

InputStream in = null;

BufferedOutputStream writer = null;

try {

in = new BufferedInputStream(myFile.getInputStream());

File f = new File(realPath + File.separatorChar +”gambar.jpg”);

f.delete();

writer = new BufferedOutputStream(new FileOutputStream(f));

byte[] buffer = new byte[64 * 1024];

int count;

while ((count = in.read(buffer)) > 0)

writer.write(buffer,0,count);

}catch(IOException e){

e.printStackTrace();

FacesMessage message = new FacesMessage(

FacesMessage.SEVERITY_FATAL,

this.getClass().getName(), “You must upload a JPEG, PJPEG, GIF, PNG, or X-PNG file.”);

FacesContext.getCurrentInstance().addMessage(null, message);

return null;

} finally {

try {

in.close();

writer.close();

} catch (IOException ex) {

ex.printStackTrace();

}

}

}

return “success”;

}

}

Metode upload yang dieksekusi saat mengupload file akan terlebih dahulu mengambil nama file yang telah diupload. Selanjutnya untuk mengantisipasi browser yang mengupload keseluruhan path file, maka dilakukan pemisahan dengan path pemisah (“/” atau “\”). Karena yang diupload hanya gambar maka dilakukan penyaringan tipe file lebih dahulu. Penguploadan dilanjutkan dengan menuliskan file gambar yang diupload ke tempat yang dituju. Untuk melakukan ini hal penting pertama yang harus kita tahu adalah path absolut dari aplikasi web kita. Kode

ServletContext theApplicationsServletContext =

(ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();

String realPath =theApplicationsServletContext.getRealPath(“/”);

Melakukan hal ini. Untuk melakukan penulisan maka kita mengambil inputstream dari file yang diupload, membuat outputstream, dan menuliskan (mentransfer) isi file dari inputstream ke outputstream

Referensi:

http://www.onjava.com/pub/a/onjava/2005/07/13/jsfupload.html

7 Komentar »

  1. SeaGate said,

    Ganti template ya? Btw bedanya JSF sama JSP apa sih?

  2. fuad said,

    JSf itu framework nya JSP

  3. eqie said,

    kalau code upload ini dipakai di dalam jsp biasa, apakah bisa?
    jika bisa package apa saja yang harus ditambahkan?

  4. fuad said,

    tidak bisa

  5. mila said,

    mas, saya punya 2 jframe (a dan b). jframe a akan memanggil jframe b utk menyelesaikan tugas, setelah jframe b selesai (dispose), jframe a akan melanjutkan tugasnya lagi. Jadi, gimana caranya supaya jframe a tahu kalo jframe b udah dispose

  6. fuad said,

    Bagaimana kalo pake JDIalog aja, soalnya untuk hal-hal seperti ini biasanya pake JDialog…

  7. nyuby said,

    Wah keren,, dicoba dulu…O iya mas, saya baru belajar JSF nie,, buatin artikel proses CRUD dengan JSF dunk,, coz bingung baiknya gimana…
    Thanks…


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: