Liferay.Upload Component Usage for Multi-file Upload
Developing a custom portlet to upload multiple files in Liferay 6.2. Found the Liferay.Upload component while going through Liferay Source Code in the Document Library Portlet at the following location:
We want to reuse this component, but unable to find any documentation regarding the usage.
- How do we use the
Liferay.Uploadcomponent? What do each of the inputs mean & do? - Can we re-use this
Liferay.Uploadin our custom portlet? - Any concrete documentation on the usage of
Liferay.Upload? - Any already implemented portlets available on the web with the Source Code available on the web?
Given below is the extract of the usage of the Liferay Upload component:
<aui:script use="liferay-upload">
new Liferay.Upload(
{
boundingBox: '#<portlet:namespace />fileUpload',
deleteFile: '<liferay-portlet:actionURL doAsUserId="<%= user.getUserId() %>"><portlet:param name="struts_action" value="/document_library/edit_file_entry" /><portlet:param name="<%= Constants.CMD %>" value="<%= Constants.DELETE_TEMP %>" /><portlet:param name="folderId" value="<%= String.valueOf(folderId) %>" /></liferay-portlet:actionURL>&ticketKey=<%= ticket.getKey() %><liferay-ui:input-permissions-params modelName="<%= DLFileEntryConstants.getClassName() %>" />',
fileDescription: '<%= StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA)) %>',
maxFileSize: '<%= PrefsPropsUtil.getLong(PropsKeys.DL_FILE_MAX_SIZE) %> B',
metadataContainer: '#<portlet:namespace />commonFileMetadataContainer',
metadataExplanationContainer: '#<portlet:namespace />metadataExplanationContainer',
namespace: '<portlet:namespace />',
tempFileURL: {
method: Liferay.Service.bind('/dlapp/get-temp-file-entry-names'),
params: {
groupId: <%= scopeGroupId %>,
folderId: <%= folderId %>,
tempFolderName: 'com.liferay.portlet.documentlibrary.action.EditFileEntryAction'
}
},
tempRandomSuffix: '<%= EditFileEntryAction.TEMP_RANDOM_SUFFIX %>',
uploadFile: '<liferay-portlet:actionURL doAsUserId="<%= user.getUserId() %>"><portlet:param name="struts_action" value="/document_library/edit_file_entry" /><portlet:param name="<%= Constants.CMD %>" value="<%= Constants.ADD_TEMP %>" /><portlet:param name="folderId" value="<%= String.valueOf(folderId) %>" /></liferay-portlet:actionURL>&ticketKey=<%= ticket.getKey() %><liferay-ui:input-permissions-params modelName="<%= DLFileEntryConstants.getClassName() %>" />'
}
);
</aui:script>
Any pointers are highly appreciated!!
Answer
I gave it a shot based on Pawel's links and succeeded in a sort-of POC.
view.jsp
<%@page import="com.liferay.portal.kernel.util.ParamUtil"%>
<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%@page import="com.liferay.portal.kernel.util.StringPool"%>
<%@page import="com.liferay.portal.kernel.util.PropsKeys"%>
<%@page import="com.liferay.portal.kernel.util.PrefsPropsUtil"%>
<%@page import="com.liferay.portal.kernel.util.StringUtil"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<portlet:defineObjects />
This is the <b>Liferay File Upload</b> portlet in View mode.
<portlet:actionURL name="uploadFile" var="uploadFileURL" >
<portlet:param name="jspPage" value="/html/singefileuploadaction/view.jsp" />
</portlet:actionURL>
<portlet:resourceURL var="importPortletURL" id="uploadSubmit">
<portlet:param name="jspPage" value="/html/singefileuploadaction/view.jsp" />
</portlet:resourceURL>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<aui:form action="<%= importPortletURL %>" cssClass="lfr-export-dialog" method="post" name="fm1">
<div class="lfr-dynamic-uploader">
<div class="lfr-upload-container" id="<portlet:namespace />fileUpload">
</div>
</div>
<div id="<portlet:namespace/>fallback"></div>
<aui:button-row>
<aui:button cssClass='hide' name="continueButton" type="submit" value="Continue" />
</aui:button-row>
<aui:script use="liferay-upload,aui-base">
var liferayUpload = new Liferay.Upload({
allowedFileTypes: '<%= StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA)) %>',
container: '#<portlet:namespace />fileUpload',
maxFileSize: <%=Long.parseLong(PrefsPropsUtil.getString(PropsKeys.DL_FILE_MAX_SIZE)) %> / 1024,
namespace:'<portlet:namespace />',
uploadFile: '<%=uploadFileURL.toString()%>',
tempFileRemoved: function(){console.log('Temp File Removed');},
'strings.dropFilesText': 'Drop Files Here to Upload.',
'strings.dropFileText': 'Drop File Here to Upload.',
'strings.selectFileText': 'Select File to Upload.',
'strings.selectFilesText': 'Select Files to Upload.',
'strings.fileCannotBeSavedText': 'File cannot be saved.',
'strings.pendingFileText': 'This file was previously uploaded but not actually saved',
'strings.uploadsCompleteText': 'Upload is complete. Please save.',
multipleFiles: false
});
<!-- ASHOK: !IMPORTANT-DO NOT REMOVE-This code is to re-position the Upload Component HTML code which is placed on top of the page by default: Might be a BUG?? -->
$( document ).ready(function() {
$('.component.liferayupload').appendTo("#<portlet:namespace />fileUpload");
});
var continueButton = A.one('#<portlet:namespace />continueButton');
function toggleContinueButton() {
var uploadedFiles = liferayUpload._fileListContent.all('.upload-file.upload-complete');
if (uploadedFiles.size() == 1) {
console.log('One file Upload');
console.log(uploadedFiles);
continueButton.show();
}
else {
console.log(uploadedFiles);
continueButton.hide();
}
}
<!-- Ashok: Upload Component Events BEGIN-->
<!-- Ashok: Fired when File Upload STARTS-->
liferayUpload._uploader.on(
'fileuploadstart',
function(event) {
console.log('File Upload Start');
}
);
<!-- Ashok: Fired when File Upload is COMPLETE-->
Liferay.on(
'uploadcomplete',
function(event) {
console.log('File Upload Complete');
}
);
<!-- Ashok: Fired when All Uploads are COMPLETE-->
liferayUpload._uploader.on(
'alluploadscomplete',
function(event) {
console.log('All Uploads Complete');
toggleContinueButton();
}
);
<!-- Ashok: Fired when Temp file is REMOVED-->
Liferay.on(
'tempFileRemoved',
function(event) {
console.log('Temp File Removed');
toggleContinueButton();
}
);
<!-- Ashok: Upload Component Events END-->
$('#<portlet:namespace />continueButton').on(
'click',
function(event) {
event.preventDefault();
$('#<portlet:namespace />fm1').ajaxSubmit(
{
success: function(responseData) {
<%-- $('#<portlet:namespace />exportImportOptions').html(responseData); --%>
}
}
);
}
);
</aui:script>
</aui:form>
SingeFileUploadAction.java
package com.ashok.liferay.upload;
import java.io.File;
import java.io.IOException;
import java.util.Arrays;
import java.util.Map;
import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.PortletException;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;
import com.liferay.portal.kernel.upload.UploadPortletRequest;
import com.liferay.portal.util.PortalUtil;
import com.liferay.util.bridges.mvc.MVCPortlet;
/**
* Portlet implementation class SingeFileUploadAction
*/
public class SingeFileUploadAction extends MVCPortlet {
public void uploadFile(ActionRequest actionRequest,
ActionResponse actionResponse) throws IOException, PortletException {
System.out.println("In SingeFileUploadAction");
UploadPortletRequest uploadRequest=PortalUtil.getUploadPortletRequest(actionRequest);
File file =uploadRequest.getFile("file");
String fileName = uploadRequest.getFileName("file");
System.out.println("FileName:"+fileName);
//Mike Test
Map<String, String[]> reqMap = actionRequest.getParameterMap();
System.out.println("Printing all actionRequest Params");
for (Map.Entry<String, String[]> entry : reqMap.entrySet())
{
System.out.println(entry.getKey() + "/" + Arrays.toString(entry.getValue()));
}
System.out.println("----------\nPrinting all uploadRequest Params");
Map<String, String[]> upReqMap =uploadRequest.getParameterMap();
for (Map.Entry<String, String[]> entry : upReqMap.entrySet())
{
System.out.println(entry.getKey() + "/" + Arrays.toString(entry.getValue()));
}
System.out.println(file.getName());
}
public void uploadSubmit(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) {
System.out.println("In uploadSubmit");
UploadPortletRequest uploadRequest=PortalUtil.getUploadPortletRequest(resourceRequest);
// File file =uploadRequest.getFile("file");
// System.out.println(file.getName());
}
}
