As a developer there are lots of challenges that come in a developer's life. One similar challenge I faced a few days ago, which is the reason I am writing this blog.
Sometimes we need to upload and pass data without refreshing the page. This type of requirement can be achieved by Ajax. Now I am going to explain how to upload multiple files using Ajax in Liferay.
Here is what we need to do..
2. Main.js (Include jquery.js before main.js)
That is it..Enjoy .... 😉
Sometimes we need to upload and pass data without refreshing the page. This type of requirement can be achieved by Ajax. Now I am going to explain how to upload multiple files using Ajax in Liferay.
Here is what we need to do..
1. View.jsp
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<portlet:defineObjects /><portlet:resourceURL id="uploadFiles" var="uploadFiles" /><form id="uploadForm" action="#" method="post" enctype="multipart/form-data" ><div><div class="add-title-frm-field"><label class="control-label">Title</label><input type="text" name="<portlet:namespace/>title" id="<portlet:namespace/>title" /></div><div class="add-title-frm-field"><label class="control-label">File 1</label><input type="file" name="<portlet:namespace/>file[]" /></div><div class="add-title-frm-field"><label class="control-label">File 2</label><input type="file" name="<portlet:namespace/>file[]" /></div><div class="add-title-frm-field"><label class="control-label">File 3</label><input type="file" name="<portlet:namespace/>file[]" /></div><div><input type="submit" value="Submit" class="btnSubmit" /></div></div></form><script type="text/javascript" >var uploadFiles = '<%=uploadFiles%>';</script>
2. Main.js (Include jquery.js before main.js)
$( document ).ready(function() {
3. FileUploadController.java$("#uploadForm").on('submit',(function(e) {e.preventDefault();$.ajax({url: uploadFiles,type: "POST",data: new FormData(this),contentType: false,cache: false,processData:false,success: function(data){alert(data);document.getElementById("uploadForm").reset();},error: function(data, status, e){alert("File upload failed");}});}));});
package com.multiple.file.upload;
import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.portal.kernel.upload.FileItem;
import com.liferay.portal.kernel.upload.UploadPortletRequest;
import com.liferay.portal.kernel.util.ParamUtil;
import com.liferay.portal.util.PortalUtil;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Map;
import java.util.Map.Entry;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.portlet.bind.annotation.RenderMapping;
import org.springframework.web.portlet.bind.annotation.ResourceMapping;
@Controller(value = "FileUploadController")
@RequestMapping("VIEW")
public class FileUploadController {
@RenderMapping
public String handleRenderRequest(RenderRequest request,
RenderResponse response, Model model) {
return "view";
}
@ResourceMapping(value = "uploadFiles")
public void uploadFiles(ResourceRequest resourceRequest,
ResourceResponse resourceResponse, Model model) throws IOException,
SystemException, com.liferay.portal.kernel.search.ParseException {
UploadPortletRequest uploadPortletRequest = PortalUtil
.getUploadPortletRequest(resourceRequest);
String title = ParamUtil.getString(uploadPortletRequest, "title");
Map<String, FileItem[]> files = uploadPortletRequest
.getMultipartParameterMap();
String uploadDirectory = "d://myfiles//";
for (Entry<String, FileItem[]> file2 : files.entrySet()) {
FileItem item[] = file2.getValue();
for (FileItem fileItem : item) {
String fileName = fileItem.getFileName();
File newFile = new File(uploadDirectory + "/" + fileName);
OutputStream os = new FileOutputStream(newFile);
InputStream is = new FileInputStream(fileItem.getStoreLocation());
byte[] buff = new byte[is.available()];
is.read(buff);
os.write(buff);
is.close();
os.close();
}
}
System.out.println("Title : " + title);
resourceResponse.getWriter().write("Successfully uploaded.");
}
}
That is it..Enjoy .... 😉
