Skip to content

Instantly share code, notes, and snippets.

@cmaggiulli
Created July 22, 2018 22:08
Show Gist options
  • Save cmaggiulli/11b0d284e4e3f402907e179d1c261f31 to your computer and use it in GitHub Desktop.
Save cmaggiulli/11b0d284e4e3f402907e179d1c261f31 to your computer and use it in GitHub Desktop.
Multi File upload can be done any way you like in Liferay 6.2 since the platform let's you write any code you want. However, there is an entire SDK ( Java and JavaScript ), amd a bunch of taglibs that make it easier. Here is the best example of a multi uploader you can find, done the Liferay way, modified from the portals source code
<%@page import="com.liferay.portlet.PortletURLFactoryUtil"%>
<%@ include file="../init.jsp"%>
<liferay-portlet:resourceURL copyCurrentRenderParameters="<%= false %>" var="uploadMultipleFileEntries">
<portlet:param name="struts_action" value="/document_library/upload_multiple_file_entries" />
<portlet:param name="repositoryId" value="<%= String.valueOf(themeDisplay.getScopeGroupId())%>" />
<portlet:param name="folderId" value="0" />
</liferay-portlet:resourceURL>
<portlet:actionURL var="uploadMultipleFileEntriesURL">
<portlet:param name="struts_action" value="document_library/upload_multiple_file_entries" />
<portlet:param name="backURL" value='<%= PortletURLFactoryUtil.create(renderRequest, themeDisplay.getPortletDisplay().getId(), themeDisplay.getLayout().getPlid(), "RENDER_PHASE").toString() %>' />
</portlet:actionURL>
<c:choose>
<c:when test="<%= true %>">
<aui:row>
<aui:col width="70">
<aui:form name="fm1">
<div class="lfr-dynamic-uploader">
<div class="lfr-upload-container" id="<portlet:namespace />fileUpload"></div>
</div>
</aui:form>
<%
Date expirationDate = new Date(System.currentTimeMillis() + 30 * Time.MINUTE);
Ticket ticket = TicketLocalServiceUtil.addTicket(user.getCompanyId(), User.class.getName(), user.getUserId(), TicketConstants.TYPE_IMPERSONATE, null, expirationDate, new ServiceContext());
%>
<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/upload_multiple_file_entries" /><portlet:param name="<%= Constants.CMD %>" value="<%= Constants.DELETE_TEMP %>" /><portlet:param name="folderId" value="<%= String.valueOf(DLFolderConstants.DEFAULT_PARENT_FOLDER_ID) %>" /></liferay-portlet:actionURL>&ticketKey=<%= ticket.getKey() %><liferay-ui:input-permissions-params modelName="com.liferay.portlet.documentlibrary.model.DLFileEntryConstants" />',
fileDescription: '<%= StringUtil.merge(PrefsPropsUtil.getStringArray(RequestConstants.FILE_VALID_EXT, StringPool.COMMA)) %>',
maxFileSize: '<%= String.valueOf(PrefsPropsUtil.getLong(RequestConstants.FILE_VALID_SIZE)) %>',
namespace: '<portlet:namespace />',
tempFileURL: {
method: Liferay.Service.bind('/dlapp/get-temp-file-entry-names'),
params: {
groupId: <%= themeDisplay.getScopeGroupId() %>,
folderId: <%= DLFolderConstants.DEFAULT_PARENT_FOLDER_ID %>,
tempFolderName: 'com.liferay.portlet.documentlibrary.action.EditFileEntryAction'
}
},
tempRandomSuffix: '--tempRandomSuffix--',
uploadFile: '<liferay-portlet:actionURL doAsUserId="<%= user.getUserId() %>"><portlet:param name="struts_action" value="/document_library/upload_multiple_file_entries" /><portlet:param name="<%= Constants.CMD %>" value="<%= Constants.ADD_TEMP %>" /><portlet:param name="folderId" value="0" /></liferay-portlet:actionURL>&ticketKey=<%= ticket.getKey() %>'
}
);
</aui:script>
</aui:col>
<aui:col width="30">
<div class="common-file-metadata-container selected" id="<portlet:namespace />commonFileMetadataContainer">
<aui:form method="post" action="<%=uploadMultipleFileEntriesURL %>" name="fm2" onSubmit='<%="event.preventDefault(); " + liferayPortletResponse.getNamespace() + "updateMultipleFiles();" %>'>
<aui:input name="<%= Constants.CMD %>" type="hidden" value="<%= Constants.ADD_MULTIPLE %>" />
<aui:input name="repositoryId" type="hidden" value="<%= String.valueOf(themeDisplay.getScopeGroupId()) %>" />
<aui:input name="folderId" type="hidden" value="0" />
<div class="no-files-selected-info alert alert-info hide" id="<portlet:namespace />metadataExplanationContainer">
<liferay-ui:message key="select-documents-from-the-left-to-add-them-to-the-documents-and-media" />
</div>
<liferay-ui:panel-container extended="<%= false %>" id="documentLibraryAssetPanelContainer" persistState="<%= true %>">
<div class="selected-files-count">
<liferay-ui:message key="no-files-selected" />
</div>
</liferay-ui:panel-container>
<span id="<portlet:namespace />selectedFileNameContainer"></span>
<aui:button type="submit" value="Save" cssClass="" />
</aui:form>
</div>
<aui:script>
Liferay.provide(window, '<portlet:namespace />updateMultipleFiles',
function() {
var A = AUI();
var Lang = A.Lang;
var commonFileMetadataContainer = A.one('#<portlet:namespace />commonFileMetadataContainer');
var selectedFileNameContainer = A.one('#<portlet:namespace />selectedFileNameContainer');
var inputTpl = '<input id="<portlet:namespace />selectedFileName{0}" name="<portlet:namespace />selectedFileName" type="hidden" value="{1}" />';
var values = A.all('input[name=<portlet:namespace />selectUploadedFileCheckbox]:checked').val();
var buffer = [];
var dataBuffer = [];
var length = values.length;
for (var i = 0; i < length; i++) {
dataBuffer[0] = i;
dataBuffer[1] = values[i];
buffer[i] = Lang.sub(inputTpl, dataBuffer);
}
selectedFileNameContainer.html(buffer.join(''));
commonFileMetadataContainer.plug(A.LoadingMask);
commonFileMetadataContainer.loadingmask.show();
A.io.request(
document.<portlet:namespace />fm2.action,
{
dataType: 'json',
form: {
id: document.<portlet:namespace />fm2
},
after: {
success: function(event, id, obj) {
var items = A.all('input[data-fileName]');
console.log(items);
for (var i = 0; i < items.size(); i++) {
var item = item.get(i);
var li = item.ancestor();
item.remove(true);
li.removeClass('selectable').removeClass('selected');
var cssClass = null;
var childHTML = null;
if (item.added) {
cssClass = 'file-saved';
var originalFileName = item;
var pos = originalFileName.indexOf('--tempRandomSuffix--');
if (pos != -1) {
originalFileName = originalFileName.substr(0, pos);
}
if (originalFileName === item.fileName) {
childHTML = '<span class="success-message"><%= UnicodeLanguageUtil.get(pageContext, "successfully-saved") %></span>';
}
else {
childHTML = '<span class="success-message"><%= UnicodeLanguageUtil.get(pageContext, "successfully-saved") %> (' + item.fileName + ')</span>';
}
}
else {
cssClass = 'upload-error';
childHTML = '<span class="error-message">' + item.errorMessage + '</span>';
}
li.addClass(cssClass);
li.append(childHTML);
}
if (commonFileMetadataContainer.io) {
commonFileMetadataContainer.io.start();
}
else {
commonFileMetadataContainer.load('<%= uploadMultipleFileEntries %>');
}
Liferay.fire('filesSaved');
},
failure: function(event, id, obj) {
var selectedItems = A.all('#<portlet:namespace />fileUpload li.selected');
selectedItems.removeClass('selectable').removeClass('selected').addClass('upload-error');
selectedItems.append('<span class="error-message"><%= UnicodeLanguageUtil.get(pageContext, "an-unexpected-error-occurred-while-deleting-the-file") %></span>');
selectedItems.all('input').remove(true);
commonFileMetadataContainer.loadingmask.hide();
}
}
}
);
},
['aui-base']
);
</aui:script>
</aui:col>
</aui:row>
</c:when>
<c:otherwise>
<div class="alert alert-error">
<liferay-ui:message key="you-do-not-have-the-required-permissions-to-access-this-application" />
</div>
</c:otherwise>
</c:choose>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment