[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

Google+

50 Comments

teguh

about 6 years ago

mas edwin saya masih bingung untuk web.xml nya ditaruh dmana yah ?

Reply

edwin

about 6 years ago

Hi Teguh, web.xml itu ditaro dibawahnya WEB-INF :)

Dimas

about 6 years ago

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

Reply

edwin

about 6 years ago

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

arif

about 6 years ago

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

Reply

edwin

about 6 years ago

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. :)

arif

about 6 years ago

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

Reply

edwin

about 6 years ago

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. :)

arif

about 6 years ago

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

Reply

edwin

about 6 years ago

sama-sama arif, senang bisa bantu loe :)

cover

about 6 years ago

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.. :-D

Reply

edwin

about 6 years ago

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.

yoga

about 6 years ago

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

Reply

edwin

about 6 years ago

hi yoga, Kalo List fileItems isinya kosong, kemungkinan si request engga bisa menangkap apa yg loe kirim. Coba kamu deploynya pakek tomcat atau lewat netbeans? bisa di cek ada error apa di console? biasanya kalo error dia akan cetak errornya di console. Btw, tulisan gw yg ini http://edwin.baculsoft.com/2011/01/tutorial-upload-file-dan-isi-form-sederhana-ke-database-dengan-jsp/ kayaknya lebih lengkap, coba kamu pelajarin dulu. :)

yoga

about 6 years ago

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

Reply

yoga

about 6 years ago

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

Reply

edwin

about 6 years ago

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

yoga

about 6 years ago

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?

Reply

edwin

about 6 years ago

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

yoga

about 6 years ago

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

Reply

edwin

about 6 years ago

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.

arif

about 6 years ago

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

Reply

arif

about 6 years ago

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.. :-(

Reply

arif

about 6 years ago

untuk nampilinnya saya pakai : out.println("");

edwin

about 6 years ago

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

arif

about 6 years ago

makasih atas tanggapannya mas, hehe maaf ngerepotin, ini code untuk handler upload nya: http://pastebin.com/p3UNgnzc ini untuk code view gambarnya: http://pastebin.com/gFEB5DtV

Reply

arif

about 6 years ago

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 :-D :-)

Reply

edwin

about 6 years ago

hahahaa, kesalahan sederhana tapi bikin panik yah. Gw sering tuh kayak gitu :D

arif

about 6 years ago

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

anonymous

about 5 years ago

tks, kalo register servlet di web.xml sebenernya perlu ga si?

Reply

edwin

about 5 years ago

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

May

about 5 years ago

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

Reply

edwin

about 5 years ago

Hi May, ada exceptionnya engga?

May

about 5 years ago

Exception pun tidak ada. Tidak muncul apapun :-(

edwin

about 5 years ago

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

pandi

about 4 years ago

kalo mau ganti directories gimana ya ? ga ngerti akses gambarnya kalo masih di build

Reply

edwin

about 4 years ago

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

Aji

about 4 years ago

Mas, problem saya sama seperti May. Mohon penjelasannya

Reply

edwin

about 4 years ago

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

Welda Aprilia

about 4 years ago

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

Reply

Patriot Muslim

about 3 years ago

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

edwin

about 3 years ago

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

rifqi

about 3 years ago

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

Reply

edwin

about 3 years ago

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

hamdan

about 3 years ago

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

Reply

edwin

about 3 years ago

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

kayum

about 2 years ago

gan,mau tanya ??

Reply

edwin

about 2 years ago

ya tanya apa ya gan?

Didit

about 12 months ago

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

Reply

edwin

about 12 months ago

errornya apa? coba paste kesini isi errornya

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked


:-[ (B) (^) (P) (@) (O) (D) :-S ;-( (C) (&) :-$ (E) (~) (K) (I) (L) (8) :-O (T) (G) (F) :-( (H) :-) (*) :-D (N) (Y) :-P (U) (W) ;-)