i am having difficulties in trying to submit a form which includes the image of the user to the database using ajax. The form data alone works well but on including the image it throws a FileUploadBase$InvalidContentTypeException
Is there another way of doing this without reloading the page. i will appreciate any help
JSP FILE
<form id="doc_form" class="form-horizontal tasi-form" enctype="multipart/form-data" method="POST">
<div class="modal-body">
<div class="form-group" id="err">
</div>
<div class="form-group has-success">
<label class="col-sm-2 control-label col-lg-3" for="doc_Image">Doctor Image</label>
<div class="col-lg-9">
<img id="ppic" src="assets/img/ui-zac.jpg" class="img-circle " width="160" height="160" style="margin-left: 70px; margin-bottom: 20px;" />
<input name="d_Image" type="file" class="form-control" id="doc_image" size="50" accept="image/*" onchange="loadFile(event)">
</div>
<script type="text/javascript">
var loadFile = function (event){
var output = document.getElementById('ppic');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</div>
<div class="form-group has-success">
<label class="col-sm-2 control-label col-lg-3" for="doctorID">Doctor ID</label>
<div class="col-lg-9">
<input name="doc_ID" type="text" class="form-control" id="doctorID">
</div>
</div>
<div class="form-group has-success">
<label class="col-sm-2 control-label col-lg-3" for="fName">First Name</label>
<div class="col-lg-9">
<input name="doc_fName" type="text" class="form-control" id="doc_fName">
</div>
</div>
<div class="form-group has-success">
<label class="col-sm-2 control-label col-lg-3" for="sName">Second Name</label>
<div class="col-lg-9">
<input name="doc_sName" type="text" class="form-control" id="doc_sName">
</div>
</div>
<div class="form-group has-success">
<label class="col-sm-2 control-label col-lg-3" for="inputError">Date Of Birth</label>
<div class="col-lg-9">
<input name="doc_DOB" type="date" class="form-control" id="doc_dob">
</div>
</div>
<div class="form-group has-success">
<label class="col-sm-2 control-label col-lg-3" for="inputError">Password</label>
<div class="col-lg-9">
<input name="doc_pass" type="text" class="form-control" id="doc_pass">
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-theme" type="button" id="submitDoc">Submit</button>
</div>
</form>
<script src="assets/js/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submitDoc').click(function (event) {
event.preventDefault();
var d_fName = ('#doc_fName');
$.ajax({
type: 'POST',
data: $("#doc_form").serialize(),
url: "AddDoctorServlet",
enctype:'multipart/form-data',
success: function (result) {
$('#err').html(result);
}
});
});
});
</script>
Servlet
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/plain");
String doc_ID = request.getParameter("doc_ID");
String fName = request.getParameter("doc_fName");
String sName = request.getParameter("doc_sName");
String pass = request.getParameter("doc_pass");
String dob = request.getParameter("doc_DOB");
InputStream inputStream = null;
Part filePart = request.getPart("d_Image");
PrintWriter out = response.getWriter();
if (doc_ID.isEmpty() || fName.isEmpty() || sName.isEmpty() || pass.isEmpty() || dob.isEmpty() ) {
out.print(" <div id='err' class='alert alert-danger' style='margin-right: 20px; margin-left: 20px; margin-top: 10px;' >Error !Fields are empty </div>");
} else {
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
inputStream = filePart.getInputStream();
try {
//convert string input to date
java.util.Date result = format.parse(dob);
//add details to model
DoctorModel doctorModel = new DoctorModel(0, fName, sName, pass, doc_ID, result,inputStream);
//check if doc exists
if (!doctorDao.checkDoctor(doctorModel)) {
//if does not exist,,,add him/her
if (doctorDao.addDoctor(doctorModel)) {
out.print(" <div id='err' class='alert alert-success' role='alert' style='margin-right: 20px; margin-left: 20px; margin-top: 10px;' >Doctor added successfully.... </div>");
} else {
out.print(" <div id='err' class='alert alert-danger' role='alert' style='margin-right: 20px; margin-left: 20px; margin-top: 10px;' >Error in adding the doctor </div>");
}
}else{
out.print(" <div id='err' class='alert alert-danger' role='alert' style='margin-right: 20px; margin-left: 20px; margin-top: 10px;' >A doctor with that id already exists.. </div>");
}
} catch (ParseException ex) {
Logger.getLogger(AddDoctorServlet.class.getName()).log(Level.SEVERE, null, ex);
}
The error
04-Nov-2016 08:58:22.877 SEVERE [http-nio-8084-exec-10] org.apache.catalina.core.StandardWrapperValve.invoke Servlet.service() for servlet [AddDoctorServlet] in context with path [/SuperAdmin] threw exception [org.apache.tomcat.util.http.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded; charset=UTF-8] with root cause
org.apache.tomcat.util.http.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded; charset=UTF-8 at org.apache.tomcat.util.http.fileupload.FileUploadBase$FileItemIteratorImpl.(FileUploadBase.java:800) at org.apache.tomcat.util.http.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:256) at org.apache.tomcat.util.http.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:280) at org.apache.catalina.connector.Request.parseParts(Request.java:2734) at org.apache.catalina.connector.Request.getParts(Request.java:2643) at org.apache.catalina.connector.Request.getPart(Request.java:2827) at org.apache.catalina.connector.RequestFacade.getPart(RequestFacade.java:1089) at javax.servlet.http.HttpServletRequestWrapper.getPart(HttpServletRequestWrapper.java:362) at controlla.AddDoctorServlet.processRequest(AddDoctorServlet.java:54) at controlla.AddDoctorServlet.doPost(AddDoctorServlet.java:123)
