File upload destination:

Uploaded files are saved in the fileupload directory in the parent root dirctory. If fileupload directory doesn't exist, File Upload portlet creates a new directory in the root directory. 

File upload directory can be configured in the portlet.xml file. Set the value for the portlet init parameter default-upload-location in the portlet.xml. 


Temporary files upload location:

If Portlet is configured to use chunk upload feature refer to Options. Portlet stories all the chunks in the temp directory. temporary file location can be configured in the portlet.xml as shown below.


Default chunks are storied in fileupload/temp location where fileupload is the file destination folder. Once all the chunks are uploaded, file will be named and copied to file upload destination folder.

Note: Make sure to update to security manager details in "" with File Upload destination folder details.

Custom File Upload Implementation:

HTML5 Ajax File Upload portlet uploads files to a physical server folder. Plug-in provides extension points for customizing the file upload implementation.  Customers can write their own implementations like storing the uploaded file into the database, without changing the portlet code.

Below are the steps to configure custom file upload manager implementation:

1.Create an File upload implementation class by implementing interface or by extending OOTB class.

2.Override the saveFile and/or saveChunkedFile methods as per the requirment.

public interface FileUploadManager {

public boolean saveFile(FileUploadVO fileUploadVO) throws FileUploadException;
public boolean saveChunkedFile(FileUploadVO fileUploadVO) throws FileUploadException;

Where FileUploadVO is a value object which holds the uploaded files information. Upload file data can be retrieved using the below statement.

FileItemIterator fileItemIterator = fileUploadVO.getFileItemIterator();

To get the form fields see below code snippets.

    if(fileItemStream.isFormField()) { // Condition to check for form fileds
           // Normal field
           String name = fileItemStream.getFieldName();
           String value = Streams.asString(fileItemStream.openStream());
           System.out.println(name+" Name -- > Value "+value);

3.Configure the custom file upload implementation class in the portlet.xml file.


Customize messages:

    We can customize message displayed in the plugin using two approaches.


        Plugin messages can be modified in utils.js, update the values for the "messagesMap".


        messagesMap["status-files-error"] = "Please clear errors";


        Create a messages map and add to options as shown below.

        var messagesMap = new Object();
        messagesMap["status-files-error"] = "Please clear New method ";
        messagesMap["max-file-upload-limit"] = "Maximum number of files upload limit ({0}) exceeded New method";
        messagesMap["file-type-not-allowed"] = "\"{0}\" file type is not allowed New method ";

        jQuery(document).ready(function() {
            var options = {


 Caution: We need to create messages for all available keys defined in the utils.js with this approach.

View Templates:

HTML5 File upload plugin is developed using mustache template system. Mustache is a logic-less template syntax, it's very simple to create our own view template and use with this plug-in. This plug-in OOTB provide two templates "previewTemplate.jsp" and "simpleTemplate.jsp" to showcase the use of templates.