Liferay 6.1 Multiple Image Upload Complete solution

Uploading Multiple images in liferay 6.1

There are many blogs that tells you   how to upload multiple images  using liferay portlet , but majority of them fails  when a  new developer tries . In this blog  i'l be telling you how to achieve it in most simple way

Before we start up you must be familiar  with liferay portlet development .
Sample project:

let us create a liferay portlet project PhotoUpload-portlet that and its portlet class must extends MVC portlet class .This picture shows us the layout of the project


Point to be noted is that  you must add 4 jar files as shown in WEB-INF/lib folder(this can be easily downloaded from http://commons.apache.org site)

















In view.jsp.
Step1: create action url
        <portlet:actionURL var="uploadURL" name="uploadURL"></portlet:actionURL>
Step 2:create an aui:form with enctype as:
       <aui:form action="<%=uploadURL.toString() %>" enctype="multipart/form-data" >
 and within that tag create  a  normal input  tag of file type
        <input type="file" name="fileupload[]" multiple> 
view.jsp should look like this :

concept: When ever we upload any file along with other form elements it goes in as multipart data  along with the request object .On server side we can not retrieve any form element form normal request object
For Example :
req.getParameter("normal");
        OR
ParamUtil.getString(request, "normal");
will give null value.
    so the request object  has to  parsed to read the multipart form data. And to do that we have to use commons fileupload API.

Question:what if we upload images with the same name ?
Answer: it will override the earlier image This creates a problem now
Solution : here we are generating a unique name for the image  form the timestamp and that is attached with the original name of the image.So first time when you upload the image it gets stored with the original name of the image.Next time when we upload the same image it takes the unique name and gets uploaded.

Storing the image in the server side folder 
To do this the code required is:

Properties properties = PortalUtil.getPortalProperties();
File directory = new File(properties.getProperty("liferay.home") + 
"/idata/upload_data");
if(!directory.exists()){
directory.mkdirs();
System.out.println("type------dir existed");
}

Now its time to do some action on the server side:
In UploadMVC.java file

Enhancement : 
1) Suppose if we want to  save name of the image in database than additional code is required In the above code we are saving   boolean value bool after  renaming the image file ,( its  false  if no file with the same name  exists and true if the same name file is already present in .).
 so we must check the  the condition to get the filename .
String filename_db ="";
if(!bool){
        filename_db =file.getName();
}else{
 filename_db =tempFile.getName();
}
Now you can write your logic to store this filename_db  in the database table.

2) suppose if we upload other input text data along with the  file then we can fetch the data as

                      if(fileItem.isFormField())
{
if(fileItem.getFieldName().equals("your input tagname")){
textvalue=fileItem.getString();
}
}
 Note: in case of aui:input tag  the name is not the name that we give to the tag. Its portlet_id+ name.
you can get that when you give a SOP
System.out.println("aui:input tag name -  "+fileItem.getFieldName());

I hope I was able to demonstrate my idea clearly .