INTE 30163: LECTURE 4
HTML 5: JSP SERVLET FILE UPLOAD
FILE UPLOAD 1: USING SERVLET
PACKAGE SERVLET
[Link]
package servlet;
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
@WebListener
public class FileLocationContextListener implements ServletContextListener {
public void contextInitialized(ServletContextEvent servletContextEvent) {
String rootPath = [Link]("[Link]");
ServletContext ctx = [Link]();
String relativePath = [Link]("[Link]");
File file = new File(rootPath + [Link] + relativePath);
if(![Link]()) [Link]();
[Link]("File Directory created to be used for storing files");
[Link]("FILES_DIR_FILE", file);
[Link]("FILES_DIR", rootPath + [Link] + relativePath);
}
public void contextDestroyed(ServletContextEvent servletContextEvent) {
//do cleanup if needed
}
}
[Link]
package servlet;
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
@WebServlet("/UploadDownloadFileServlet")
public class UploadDownloadFileServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private ServletFileUpload uploader = null;
@Override
public void init() throws ServletException{
DiskFileItemFactory fileFactory = new DiskFileItemFactory();
File filesDir = (File) getServletContext().getAttribute("FILES_DIR_FILE");
[Link](filesDir);
[Link] = new ServletFileUpload(fileFactory);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String fileName = [Link]("fileName");
if(fileName == null || [Link]("")){
throw new ServletException("File Name can't be null or empty");
}
File file = new File([Link]().getAttribute("FILES_DIR")+[Link]+fileName);
if(![Link]()){
throw new ServletException("File doesn't exists on server.");
}
[Link]("File location on server::"+[Link]());
ServletContext ctx = getServletContext();
InputStream fis = new FileInputStream(file);
String mimeType = [Link]([Link]());
[Link](mimeType != null? mimeType:"application/octet-stream");
[Link]((int) [Link]());
[Link]("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
ServletOutputStream os = [Link]();
byte[] bufferData = new byte[1024];
int read=0;
while((read = [Link](bufferData))!= -1){
[Link](bufferData, 0, read);
}
[Link]();
[Link]();
[Link]();
[Link]("File downloaded at client successfully");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
if(){
throw new ServletException("Content type is not multipart/form-data");
}
[Link]("text/html");
PrintWriter out = [Link]();
[Link]("<html><head></head><body>");
try {
List<FileItem> fileItemsList = [Link](request);
Iterator<FileItem> fileItemsIterator = [Link]();
while([Link]()){
FileItem fileItem = [Link]();
[Link]("FieldName="+[Link]());
[Link]("FileName="+[Link]());
[Link]("ContentType="+[Link]());
[Link]("Size in bytes="+[Link]());
File file = new File([Link]().getAttribute("FILES_DIR")+[Link]+[Link]());
[Link]("Absolute Path at server="+[Link]());
[Link](file);
[Link]("File "+[Link]()+ " uploaded successfully.");
[Link]("<br>");
[Link]("<a href=\"UploadDownloadFileServlet?fileName="+[Link]()+"\">Download "+[Link]()+"</a>");
}
} catch (FileUploadException e) {
[Link]("Exception in uploading file.");
} catch (Exception e) {
[Link]("Exception in uploading file.");
}
[Link]("</body></html>");
}
WEB CONTENT
[Link]
<%@ taglib uri="[Link] prefix="c" %>
<%@ taglib uri="[Link] prefix="fn" %>
<jsp:include page="includes/[Link]"></jsp:include>
<form action="UploadDownloadFileServlet" method="post" enctype="multipart/form-data">
<table class="table table-bordered" style="text-align: center;">
<tr>
<td><h3>Select File to Upload:</h3></td>
<td><input type="file" name="fileName"></td>
</tr>
<tr>
<td colspan=2><input type="submit" value="Upload"></td>
</tr>
</table>
</form>
<c:import url="/includes/[Link]" />
</body>
</html>
FILE UPLOAD 2: 2 JSP FILE
WEB CONTENT
ee_upload.jsp
<%@ taglib uri="[Link] prefix="c" %>
<%@ taglib uri="[Link] prefix="fn" %>
<jsp:include page="includes/[Link]"></jsp:include>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Employee Information Entry</h1>
</div>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<a class="navbar-brand" href="#"><i class="jaedev ja-jaedevit_1"> </i> JAEDEV</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Employee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Payslip</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="col-12">
<form action="[Link]" method="post" enctype="multipart/form-data" name="eeForm" id="eeForm">
<div class="card">
<div class="card-header bg-inverse">
<i class="fas fa-edit"></i>
<a class="card-title"> EMPLOYEE INFORMATION</a>
</div>
<div class="card-body">
<c:if test="${message != null}">
<p><i>${message}</i></p>
</c:if>
<input type="hidden" name="action" value="add">
<div class="form-row">
<div class="col-md-4 mb-3">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" id="date" name="todaydate" class="form-control" readonly/>
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-calendar-alt"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">E-Mail</label>
<div class="input-group">
<input type="text" name="email" class="form-control" required/>
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-at"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">Image</label>
<div class="input-group">
<input type="file" name="image" class="custom-file-input" required/>
<label class="custom-file-label" for="customFile"> Choose file</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label class="control-label">Lastname</label>
<div class="input-group">
<input type="text" name="lname" class="form-control" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-id-card"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">Firstname</label>
<div class="input-group">
<input type="text" name="fname" class="form-control" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-id-card"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">Middlename</label>
<div class="input-group">
<input type="text" name="mname" class="form-control" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-id-card"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label class="control-label">Birthday</label>
<div class="input-group">
<input type="date" id="dob" name="bday" class="form-control" onblur="checkAge()" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-calendar-day"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">Age</label>
<div class="input-group">
<input type="text" id="age" name="age" class="form-control" readonly>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-calendar-plus"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">Birth Place</label>
<div class="input-group">
<input type="text" name="bplace" class="form-control" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-map-marker-alt"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label class="control-label">Department</label>
<div class="input-group">
<input type="text" name="department" class="form-control" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-building"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">Position</label>
<div class="input-group">
<input type="text" name="position" class="form-control" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-user-tie"></i>
</span>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="control-label">Salary</label>
<div class="input-group">
<input type="text" name="salary" class="form-control" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-hand-holding-usd"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer" style="text-align: right;">
<button class="btn btn-rounded btn-primary" onclick="return confirm('Are you sure you want to SAVE this record?');"
type="submit"><i class="fa fa-save"></i> Save</button>
<button class="btn btn-rounded btn-danger" onclick="return confirm('Are you sure you want to Clear this record?');"
type="reset"><i class="fas fa-undo"></i> Reset</button>
</div>
</div>
</form>
</div>
<c:import url="/includes/[Link]" />
</div>
[Link]
<%@ page import="[Link]" %>
<%@ page import="[Link]" %>
<%@ page import="[Link]" %>
<%@ page import="[Link]"%>
<%@ page import="[Link]"%>
<%@ page import="[Link].*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="[Link] prefix="c" %>
<%@ taglib uri="[Link] prefix="fn" %>
<jsp:include page="includes/[Link]"></jsp:include>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Employee Profile has been Uploaded</h1>
</div>
<%!
String todaydate="";
String email="";
String lname="";
String fname="";
String mname="";
String bday="";
String age="";
String bplace="";
String department="";
String position="";
String salary="";
int count1=0,count2=0,count3=0,count4=0,count5=0,count6=0,count7=0,count8=0,count9=0,count10=0,count11=0;
%>
<%
boolean isMultipart = [Link](request);
if (!isMultipart) {}
else {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items = null;
try {
items = [Link](request);
}
catch (FileUploadException e) {
[Link]();
}
Iterator itr = [Link]();
while ([Link]()) {
FileItem item = (FileItem) [Link]();
if ([Link]()) {
String name = [Link]();
String value = [Link]();
if([Link]("todaydate")) {
todaydate=value;
count1=1;
}
if([Link]("email")) {
email=value;
count2=2;
}
if([Link]("lname")) {
lname=value;
count3=3;
}
if([Link]("fname")) {
fname=value;
count4=4;
}
if([Link]("mname")) {
count5=5;
mname=value;
}
if([Link]("bday")) {
count6=6;
bday=value;
}
if([Link]("age")) {
count7=7;
age=value;
}
if([Link]("bplace")) {
count8=8;
bplace=value;
}
if([Link]("department")) {
count9=9;
department=value;
}
if([Link]("position")) {
count10=10;
position=value;
}
if([Link]("salary")) {
count11=11;
salary=value;
}
}
else{
try {
String itemName = [Link]();
File savedFile = new File([Link]().getRealPath("/")+"uploads\\"+itemName);
[Link](savedFile);
%>
<div class="container" style="margin-top:30px">
<div class="col-10">
<div class="card">
<div class="card-header bg-inverse">
<i class="fas fa-edit"></i>
<a class="card-title"> EMPLOYEE INFORMATION</a>
</div>
<div class="card-body">
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="input-group">
<img class="img-thumbnail" src=uploads/<%=itemName%> alt="image">
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="input-group">
<table class="table table-bordered table-hover" style="text-align: center;">
<%
if(count1==1)
[Link]("<tr><td><b>Date</td><td><b>"+todaydate);
if(count2==2)
[Link]("</td><tr><td><b>E-
Mail</td><td><b>"+email);
if(count3==3)
[Link]("</td><tr><td
><b>Lastname</td><td><b>"+lname);
if(count4==4)
[Link]("</td><tr><td
><b>Firstname</td><td><b>"+fname);
if(count5==5)
[Link]("</td><tr><td
><b>Middlename</td><td><b>"+mname);
if(count5==5)
[Link]("</td><tr><td
><b>Birthday</td><td><b>"+bday);
if(count5==5)
[Link]("</td><tr><td ><b>Age</td><td><b>"+age);
if(count5==5)
[Link]("</td><tr><td ><b>Birth
Place</td><td><b>"+bplace);
if(count5==5)
[Link]("</td><tr><td
><b>Department</td><td><b>"+department);
if(count5==5)
[Link]("</td><tr><td
><b>Position</td><td><b>"+position);
if(count5==5)
[Link]("</td><tr><td
><b>Salary</td><td><b>"+salary);
}
catch (Exception e) {
[Link]();
}
}
}
}
%>
</table>
</div>
</div>
</div>
</div>
<div class="card-footer" style="text-align: right;">
<form action="" method="post">
<button class="btn btn-rounded btn-info" onclick="return confirm('Are you sure you want to ENTER
another record?');" type="submit"><i class="fa fa-undo"></i> Back</button>
</form>
</div>
</div>
</div>
</div>
INCLUDES FOLDER
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Employee Record</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ICON -->
<link href="img/[Link]" rel="icon" type="image/png" sizes="16x16">
<!--CSS -->
<link href="css/[Link]" rel="stylesheet"/>
<link href="font/css/[Link]" rel="stylesheet"/>
<link href="jaedevit/[Link]" rel="stylesheet">
</head>
<body>
[Link]
<%@ page import="[Link], [Link]" %>
<%
GregorianCalendar currentDate = new GregorianCalendar();
int currentYear = [Link]([Link]);
%>
<div class="footer fixed-bottom bg-success text-white">
<p>© Copyright <%= currentYear %> JaedevIT by Ethel Fajardo</p>
</div>
<script>
date = new Date();
var month = [Link]()+1;
var day = [Link]();
var year = [Link]();
[Link]("date").value = month + '/' + day + '/' + year;
</script>
<script>
function checkAge(){
var today = new Date();
var d = [Link]("dob").value;
if (!/\d{4}\-\d{2}\-\d{2}/.test(d)) { // check valid format
showMessage();
return false;
}
d = [Link]("-");
var byr = parseInt(d[0]);
var nowyear = [Link]();
if (byr >= nowyear || byr < 1900) { // check valid year
showMessage();
return false;
}
var bmth = parseInt(d[1],10)-1; // radix 10!
if (bmth < 0 || bmth >11) { // check valid month 0-11
showMessage()
return false;
}
var bdy = parseInt(d[2],10); // radix 10!
var dim = daysInMonth(bmth+1,byr);
if (bdy <1 || bdy > dim) { // check valid date according to month
showMessage();
return false;
}
var age = nowyear - byr;
var nowmonth = [Link]();
var nowday = [Link]();
if (bmth > nowmonth) {age = age - 1} // next birthday not yet reached
else if (bmth == nowmonth && nowday < bdy) {age = age - 1}
alert('You are ' + age + ' years old');
[Link]("age").value = age;
[Link]("age").focus();
if (age <= 15) {
alert ("You are 15 years old or less!");
[Link]("age").value = age;
[Link]("age").focus();
}
}
function showMessage() {
if ([Link]("dob").value != "") {
alert ("Invalid date format or impossible year/month/day of birth - please re-enter as nowyearYY-MM-DD");
[Link]("dob").value = "";
[Link]("dob").focus();
}
}
function daysInMonth(month,year) { // months are 1-12
var dd = new Date(year, month, 0);
return [Link]();
}
</script>
</body>
</html>