How to retrieve the file from SlingHttpServletRequest? - ajax

Question

I am entirely new to development. So please forgive me if I ask anything wrong. I am trying to upload multiple files to the webserver. The webserver is running on Adobe Enterprise Manager. I have a JSP page that submits my form through an AJAX Call to a servlet as a SlingHttpServletRequest.
My Jsp page along with the AJAX CALL:
<div class="content">
<form method="POST" action="/servletpath" enctype="multipart/form-data" id="form-id">
<table>
<tr>
<td><label>...</label></td>
<td>
<select id="id1">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</td>
</tr>
<tr>
<td><label>...</label></td>
<td>
<select id="id2">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</td>
</tr>
<tr>
<td><label>Choose Files</label></td>
<td><input id="fileInput" type="file" name="uploadingFiles" onchange="updateSize();" multiple>
selected files: <span id="fileNum">0</span>;
total size: <span id="fileSize">0</span></td>
</tr>
<tr>
<td><input type="submit" value="Upload files" onclick="uploadFiles()"></td>
<td><input type="button" value="Start Comparison" onclick="location.href='/startComparison'"></td>
</tr>
</table>
</form>
<script type="text/javascript">
var uploadFiles = function () {
alert("inside uploadFiles");
var formData = new FormData();
formData = formData.append("file1",document.getElementById("fileInput").files[0].name);
alert("appended file..."+document.getElementById("fileInput").files[0].name);
var statusWin = CQ.Ext.Msg.wait("Processing request", "Uploading Files...");
CQ.Ext.Ajax.request({
url: CQ.HTTP.externalize("/servletpath"),
method: "POST",
processData:false,
contentType:false,
scope: this,
params: {
"file1":document.getElementById("fileInput").files[0],
"file2":document.getElementById("fileInput").files[1]
},
success:...,
failure: function (response) {
if (statusWin.isVisible()){
statusWin.hide();
}
alert("Response Body :: "+response);
alert("Response Status :: "+response.status);
}
});
}
</script>
</div>
Servlet Class:
#SlingServlet(paths="/servletPath", methods = "POST", metatype=true)
public class SampleServlet extends SlingAllMethodsServlet {
#Reference
private ResourceResolverFactory resolverFactory;
protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response)
throws IOException,ServletException {
log.info("I am inside POST method of Sample Servlet");
log.info("SlingHTTPRequest content type is :: "+request.getContentType());
log.info("getParamter Attached file is :: "+request.getParameter("file1"));
}
boolean isMultipart = org.apache.commons.fileupload.servlet.ServletFileUpload.isMultipartContent(request);
log.info("Is this a Multipart Request :: "+isMultipart);
}
Log Output:
I am inside POST method of Sample Servlet
SlingHTTPRequest content type is :: :: application/x-www-form-urlencoded; charset=UTF-8 getParamter
Attached file is :: [object File]
Is this a Multipart Request :: false
I tried the below approaches but did not work
https://helpx.adobe.com/experience-manager/using/uploading-files-aem1.html -> This uses jquery ajax call to upload file, but chrome did not support it. So not able to pursue this.
Tried to get the files from the form using document.getElementById("fileInput").files[i] then appended it to FormData() object then sent it. But still don't know how to retrieve the file from the request Object.
ISSUES:
Even though I submit the request as Multipart, isMultipart check always returns false for me inside the doPOST method inside the servlet.
request.getParameter(String) returns a String and I am not sure How to retrieve the file object
request.getParameter("file2") returns [object File]. Not sure how to retrieve the file from this one
I am really stuck guys. Any help or any direction would be much appreciated.Since my entire code runs on AEM I am not able to debug with breakpoints. I am able to get log outputs only :(