How to Upload Multiple Files Using Ajax in Liferay

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..

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() {

$("#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");

}        

});

}));

});

3. FileUploadController.java

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 .... 😉