[Tutorial] Upload File atau Image Dengan JSP

Beberapa hari terakhir di forum programmer Kaskus lagi rame pertanyaan tentang caranya upload file pakek JSP. Daripada pusing-pusing mendingan gw pake library bawaan apache, yaitu Apache Commons FileUpload.

Aplikasi sederhana ini terdiri dari 1 buah JSP sebagai presentation layer dan 1 Servlet buat handle uploading file-nya. Konsep-nya sederhana, semua file yang keupload akan disimpan didalam folder /image yang terletak 1 folder dengan file index.jsp.

Oke, langsung kita mulai kalo gitu. Ini file index.jsp gw,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <form action="upload" method="POST" enctype="multipart/form-data">
            Select file : <input type="file" name="fileSelect" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

dan ini servlet buat handle upload file ataupun image,

package com.baculsoft.servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class UploadServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        // get your absolute path
        String uploadTo = getServletContext().getRealPath("/") + "image/";

        try {

            boolean isMultipart = ServletFileUpload.isMultipartContent(request);

            // no multipart form
            if (!isMultipart) {
                out.println("<html>");
                out.println("<head>");
                out.println("<title>Servlet UploadServlet</title>");
                out.println("</head>");
                out.println("<body>");
                out.println("<h1>No Multipart Files</h1>");
                out.println("</body>");
                out.println("</html>");
            }
            // multipart form
            else {
                // Create a new file upload handler
                ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());

                // parse requests
                List<FileItem> fileItems = upload.parseRequest(request);

                // Process the uploaded items
                for (FileItem fileItem : fileItems) {
                    // a regular form field
                    if (fileItem.isFormField()) {
                        
                    }
                    // upload field
                    else {
                        String fileName = fileItem.getName();
                        File fileTo = new File(uploadTo + fileName);
                        fileItem.write(fileTo);

                        out.println("<html>");
                        out.println("<head>");
                        out.println("<title>Servlet UploadServlet</title>");
                        out.println("</head>");
                        out.println("<body>");
                        out.println("<h1> success write to " + fileTo.getAbsolutePath() + "</h1>");
                        out.println("</body>");
                        out.println("</html>");

                    }
                }
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        } finally {
            out.close();
        }
    }
   
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
}

abis itu gw register servlet gw di web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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_2_5.xsd">
    <servlet>
        <servlet-name>upload</servlet-name>
        <servlet-class>com.baculsoft.servlet.UploadServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>upload</servlet-name>
        <url-pattern>/upload</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>
</web-app>

ini struktur project gw di Netbeans.

Nah gampang kan 😉

nb.
untuk tutorial lebih lengkapnya bisa dicek disini

51 thoughts on “[Tutorial] Upload File atau Image Dengan JSP”

  1. mas web.xmlnya taro dimana ya? taro didalam web-inf ato dimananya? :-S terus kok uploadservletnya masih error banyak? ;-( kendalanya gimana nih? thx. 😀

    1. web.xml dibawahnya web-inf
      lalu apa error yg di uploadservlet? coba paste kesini mana tau gw bisa bantu.

  2. mas edwin kok saya ikuti langkah langkah di atas dan saya sudah download lib tambahannya commons file upload nya tapi kok tidak terjadi apa apa yah .. file yang saya pilih ga bisa di upload , tapi di web browsernya tidak muncul kesalahan cuma pas saya submit menampilkan halaman kosong dan saya liahat ke folder image nya tidak ada apa2 .. hmm kira kira kenapa yah?? mohon petunjuknya makasih. arif

    1. hi arif,
      kamu deploy lewat netbeans atau via tomcat langsung? Coba cek di consolenya tomcat ada error atau tidak? Biasanya kalo gagal dia akan cetak stackTrace errornya di console. 🙂

  3. saya deploy via netbeans mas,
    Kira kira beginilah erornya :
    Jul 14, 2011 8:31:53 PM org.apache.catalina.core.StandardWrapperValve invoke
    SEVERE: Servlet.service() for servlet upload threw exception
    java.lang.ClassNotFoundException: org.apache.commons.io.output.DeferredFileOutputStream
    at java.net.URLClassLoader$1.run(URLClassLoader.java:202)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(URLClassLoader.java:190)
    at sun.misc.Launcher$ExtClassLoader.findClass(Launcher.java:229)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:307)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:248)
    at org.apache.commons.fileupload.disk.DiskFileItemFactory.createItem(DiskFileItemFactory.java:199)
    at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:361)
    at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:126)
    at upload.upload.processRequest(upload.java:51)
    at upload.upload.doPost(upload.java:93)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:637)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
    at org.apache.coyote.http11.Http11AprProcessor.process(Http11AprProcessor.java:859)
    at org.apache.coyote.http11.Http11AprProtocol$Http11ConnectionHandler.process(Http11AprProtocol.java:579)
    at org.apache.tomcat.util.net.AprEndpoint$Worker.run(AprEndpoint.java:1555)
    at java.lang.Thread.run(Thread.java:662)

    pada eror terdapat :
    at upload.upload.processRequest(upload.java:51)
    at upload.upload.doPost(upload.java:93)
    kelas upload adalah kelas servletnya ,
    line 51 menunjuk ke baris program ,
    List fileItems = upload.parseRequest(request);
    line 93 menunjuk ke baris program ,
    processRequest(request, response);

    apakah library yang saya pakai kurang yah mas?? mohon petunjuknya. mkasih banyak sudah di respon

    1. hi Arif,
      wah berarti kamu harus tempelin library Apache Commons IO
      coba kamu cek tutorial gw yang satu lagi
      http://edwin.baculsoft.com/2011/01/tutorial-upload-file-dan-isi-form-sederhana-ke-database-dengan-jsp/

      disitu gw tempelin lib commons-io-2.0.1.jar
      coba tempelin itu dulu, kali aja bisa jalan.
      🙂

  4. sip mas udah bisa jalan emang kurang library nya.. mkasih yah mas atas tutrial dan tanggapannya.. (Y) (Y) 🙂

  5. mas edwin,
    gw ikutin tutorial diatas kok ketemu error seperti dibawah, tu waktu sumbit munculnya tampilan kosong n image nya g masuk ke folder image.

    Error :

    java.lang.ClassCastException: org.apache.commons.fileupload.disk.DiskFileItem cannot be cast to org.apache.tomcat.util.http.fileupload.FileItem
    at com.sample.UploadServlet.processRequest(UploadServlet.java:60)
    at com.sample.UploadServlet.doPost(UploadServlet.java:113)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:637)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
    at org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
    at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:845)
    at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
    at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
    at java.lang.Thread.run(Thread.java:619)

    Terima Kasih sebelumnya.. 😀

    1. Hi Cover,
      coba diatas class loe kan ada tulisan import org.apache.tomcat.util.http.fileupload.FileItem, itu loe remove aja, ganti jadi import org.apache.commons.fileupload.FileItem;. Kayaknya loe salah import class bro, jadinya engga jalan. Nama class-nya sama (FileItem), tapi lokasi dan fungsinya beda.

  6. mas edwin,,
    mau tanya,,

    ane coba file upload pake spring ama jsp,,

    diservletnya ane uda daftarin. seperti ini

    UploadController
    com.icon.ukp4.mobile.server.controller.UploadController

    UploadController
    /UploadController

    akan tetapi,,,saat ane execusi,, itu dia gagal upload dikarenakan pada proses
    List items = upload.parseRequest(request);
    nah pada items saat ane cetak dia mengahasilkan []

    gw uda coba cari tau kesana kemari, tapi belum dapet dapet juga,,hehe…
    mohon bantuannya mas edwin

    tks

  7. ane coba ikutin saran ente n ane coba tulisan yang ini.
    kena exception: java.io.FileNotFoundException: H:\samplesource 2\FileUpload\build\web\image\PLTU 1 Pacitan – 01.jpg (The system cannot find the path specified)

    untuk library nya yang ane pake uda ane masukin semua..
    dan folder image jg uda ane tambahin di bawah webpage…

    huff…. bingung ane kenapa si request ga nangkep yang ane kirim yah …

    ane uda coba googling sana kemari,, ga nemu2…hiks 🙁

  8. oh iya,, soalnya kalo ane implementasikan sama GXT-js ga ada masalah,,
    tapi karen di sisi view nya ane mau ganti pake jsp.
    timbul masalah seperti ini..huff..
    eh salah bukan ganti tapi gw implementasikan ke jsp. ehehe…jadi ane bikin 2,,

    1. hi Yoga, java.io.FileNotFoundException: H:\samplesource 2\FileUpload\build\web\image\PLTU 1 Pacitan – 01.jpg itu terjadi karena aplikasi engga bisa menemukan file PLTU 1 Pacitan – 01.jpg. Itu errornya ada dimana? Coba paste penggalan source code dan stacktrace exceptionnya secara lengkap kesini. Mana tau gw bisa bantu 🙂

  9. nah permasalahan baru muncul lagi mas, hehe..
    ini bikin tambah saya lebih bingung lagi.

    saya coba bikin dan jalan kan pake netbeans, semuanya ok, normal n berjalan,,
    begitu saya jalan kan di eclipse, boommm….
    request ga nyampe ke controller.
    padahal semua setingan uda ane sama in,
    oh yaah disini ane pake spring mvc,

    yang bikin bingung kenapa di netbeans jalan di eclipse kagak… :((

    ada ide n masukan ga mas?

    1. hi Yoga, coba eclipsenya di refresh, clean lalu build lagi. Emang kadang suka rada oon, ga langsung detect ada perubahan di source code.

  10. mas edwin,,

    mau tanya dunk,,
    kalo pake jsp, kita mau setTextField hasil return dari database bisa ga?
    kalo ada contoh nya, terima kasih banget..hehe…

    thanx

    1. bisa bro, ada 2 pendekatan.
      Cara jelek = loe langsung query aja di jspnya.
      Cara bagus = bikin konsep mvc, querynya di servlet lalu lempar ke jsp.

  11. hallo mas saya lagi nih, hehe,

    mas saya mengalami masalah serupa dengan mas yoga kira kira begini:
    type Exception report

    message

    description The server encountered an internal error () that prevented it from fulfilling this request.

    exception

    org.apache.jasper.JasperException: An exception occurred processing JSP page /uploadfile.jsp at line 28

    25: }else {
    26: String fileName = fileItem.getName();
    27: File fileTo = new File(uploadTo + fileName);
    28: fileItem.write(fileTo);
    29:
    30:
    31: }

    Stacktrace:
    org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:510)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:407)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    root cause

    java.io.FileNotFoundException: C:\Documents and Settings\arif\My Documents\NetBeansProjects\upload\build\web\Gambar\gaplek.JPG (The system cannot find the path specified)
    java.io.FileOutputStream.open(Native Method)
    java.io.FileOutputStream.(FileOutputStream.java:194)
    java.io.FileOutputStream.(FileOutputStream.java:145)
    org.apache.commons.fileupload.disk.DiskFileItem.write(DiskFileItem.java:449)
    org.apache.jsp.uploadfile_jsp._jspService(uploadfile_jsp.java:88)
    org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:377)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    note The full stack trace of the root cause is available in the Apache Tomcat/6.0.26 logs.

    bagian ini:
    java.io.FileNotFoundException: C:\Documents and Settings\arif\My Documents\NetBeansProjects\upload\build\web\Gambar\gaplek.JPG (The system cannot find the path specified)

    jadi kayak ga mau membaca direktori tempat upload di sisi server,
    lib commons io nya baik baik aja ga ada maslah..
    tapi path untuk upload kok kebaca
    C:\Documents and Settings\arif\My Documents\NetBeansProjects\ padahal itu kan directory client..
    apa yah msalahnya ..?? mungkin mas edwin bisa bantu..

  12. hmm ternyata butuh restart tomcat …. wah jadi malu saya.. 🙂
    tapi malah timbul masalah baru….
    jadi saya pakai ide netbeans .. file yang saya uload tadi bisa ke upload tapi kok malah larinya ke project/build/web/Gambar

    nah kok jadi saat saya ambil ga mau di tampilkan untuk upload saya gunakan
    File savedFile = new File(getServletContext().getRealPath(“/Gambar/”), fullFile.getName());

    sedangkan untuk nampilkannya:
    out.println(““);

    gambar nya kok malah di folder build sedangkan di folder web nya tempat aslinya project saya gambar nya kosong mlompong.. 🙁

    1. nah gini,
      folder build itu lokasi hasil buildnya Netbeans
      jadi semua yg udah kebuild masuk kesana.

      btw coba source loe paste ke pastebin(dot)com , lalu taro disini link hasil paste-nya. Jadi gw bisa lihat sekilas code loe gimana. Atau email ke gw edwin[at]baculsoft[dot]com

  13. maaf mas udah terselesaikan saya yang salah ternyata kesalahan kecil tapi sangat basic, file nama gambarnya ternyata belum saya rename, jadi file gambar yang saya upload masih sama dengan nama aslinya padahal di database saya tambahin variable waktu upload di belakang nya.. maaf tpi btw gara gara scriptnya mas ini saya bisa upload gambar saya .. makasih sekali lagi
    salam,
    arif
    😀 🙂

    1. yup betul sekali mas… di pikir serius eh ternyata.. bener bener harus teliti .. apa lagi kalau coding kita salah cuma kurang titik atau koma..hahaha

    1. tergantung bro
      sebenernya servlet versi baru bisa pakek annotations, namun sayangnya belum semua appserver support servlet 3.

  14. Saya mau tanya,
    saya sudah mengikuti code nya seperti diatas,
    tetapi setelah upload file, yg tampil hanya tampilan kosong, dan file tersebut tidak ter upload.
    Bagaimana yah mengatasi nya?
    Mohon bantuan nya.
    Terima kasih 🙂

    1. aneh, coba paste sourcecode-nya ke pastebin.
      mana tau ada exception tapi di catch engga di print stacktrace-nya

    1. Hi Pandi,
      kamu bisa pake absolute path tapi belum tentu bisa kepanggil dari dalam webapps.

    1. hi Ajim
      ada errornya engga?
      klo misalkan ada, coba paste kesini errornya.

  15. HTTP Status 404 – /IniResepkuApaResepmu/upload

    type Status report

    message /IniResepkuApaResepmu/upload

    description The requested resource (/IniResepkuApaResepmu/upload) is not available.

    kalo kaya gitu kenapa ya kak? mohon bantuannya

    1. //Welda Aprilia HTTP Status 404
      coba dicek lagi path folder untuk upload, folder tidak terbaca/tidak ada.
      //Edwin
      Kalo saya tampilannya blank mas dan ngga ada exception apapun yang muncul, kira2 kenapa ya?mohon bantuannya, makasih

    2. Hi Patriot Muslim,
      coba di cek, berhasil upload engga?
      mungkin perlu loe tambahin, misalkan ketika berhasil upload, dia otomatis redirect ke halaman lain.

  16. mau tanya dong, kenapa gak keluar exception/error ya padahal gak masuk ke halaman yang boolean multipart itu?

    aku udah pake yang library dari Oreillly hasil nya sama. kalo pake yang library Oreilly udah bisa ngeluarin pesan gambar telah disimpan tapi kok difolder image nya gak ada ya ?? bingung mas, mohon tutor nya :))

    1. coba paste sourcecode loe lalu taro di github,
      mana tau ada masalah di codingan loe.
      agak susah kalo hanya nebak2 dan ga lihat sourcecode-nya

  17. mas edwin, kalo caranya untuk retrieve nya lagi ke halaman jsp gimana caranya? terimakasih.

    1. halo Hamdan,
      bisa aja, kamu simpen kan nama filenya di db lalu tinggal kamu query
      kasih absolute path dari url browser aja.

  18. mas edwin,saya upload file common apache nya kok gak bisa ya??
    malahan program saya jadi error..gimana solusinya mas?

  19. ini kenapa ya gan pertama saya taru di jsp gagal teru yang ke dua taru di serlet juga gagal

    error di glassfishnya :
    type Exception report

    messageInternal Server Error

    descriptionThe server encountered an internal error that prevented it from fulfilling this request.

    exception

    javax.servlet.ServletException: Error instantiating servlet class com.tolearnjava.owl.servlet.upload
    root cause

    java.lang.NoClassDefFoundError: org/apache/commons/fileupload/FileItemFactory
    root cause

    java.lang.ClassNotFoundException: org.apache.commons.fileupload.FileItemFactory

Leave a Comment

Your email address will not be published.