Unable to fetch Input File in servlet from request object

Question

I have a requirement to fetch the uploaded input file from form and save it into mysql database. Here I am unable to fetch the input file from request object.

My servlet:

@Component(service = Servlet.class, property = {

"service.description=" + "************** Servlet",

"sling.servlet.methods=" + HttpConstants.METHOD_POST,

"sling.servlet.paths=" + "/bin/uploadtestservlet" })

public class UploadTestServlet extends SlingAllMethodsServlet{


@Reference

UploadAdmissionFormService uploadService; 

private static final long serialVersionUID = 1L;

private final Logger LOGGER = LoggerFactory

.getLogger(UploadTestServlet .class); 

protected void doPost(SlingHttpServletRequest request,

SlingHttpServletResponse response) {



try{

if(ServletFileUpload.isMultipartContent(request)){

List<File> multiparts = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);

for(File item : multiparts){

LOGGER.info("Name :::"+new File(item.getName()).getName()); //

}

}catch(Exception e){

}

}

My js:

$("#uploadSubmit").click(function(e) {

$.ajax({

type: "POST",

            url: "/bin/uploadAdmissionForm",

            data: 'passport=' +$('#uploadPhoto').get(0).files.item(0),

            success: function(msg) {          

        },
        });
    });

HTML:

<form method="POST" enctype="multipart/form-data" id="upload-details-form">

<input type="file" name="uploadPhoto" id="uploadPhoto" class="uploadPhoto">

<div class="upload-photo">

<div class="upload-photo-content">

<h4>UPLOAD PHOTO</h4>

<p>Upload your recent passport size (3.5 x 4.5cm) color photograph (format should be jpg, gif, png, jpeg, bmp and maximum file size alloted is 1 MB)</p>

</div></div><form>

Exception:

Exception occurred in doPost :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

Even though I have added enctype="multipart/form-data" at form level, this error is getting throw. Can someone please help me here. Thanks

score 0 · Answer 1 · answered Apr 02 '18 at 15:03

Your ajax does not specify a file. You have to add processData:false,contentType:false to your method.

$("#uploadSubmit").click(function(e) {
 $.ajax({
  type: "POST",
  url: "/bin/uploadAdmissionForm",
  data: new FormData( this ), //this is needed
  processData: false, //this is needed
  success: function(data) {  
    //handle return here
        },
contentType: false //this is needed
      });
    });

Here are some links about it:

jQuery AJAX file upload PHP

upload file through ajax

How to upload a file using jQuery.ajax and FormData

Unable to fetch Input File in servlet from request object

1 Answers1