Multiple FileUploay Liferay 6.1 CE

[Jan Bub, geändert vor 12 Jahren.]

Hi,

shortly after fail implementing a multiple file uplaod with jsf I tried it with the swfUpload integrated in liferay. I looked into the DocumentLibrary Portlet and simply tried to copy an adapt the code of the jsp file from there. I can show the upload button and select more then one file now. But my Portlet don't call the action I defined in the UploadCompnent. First I didn't use struts action but tried called an Action in MVCPortlet.
Then i tried to call the struts/action of the DocumentLibrary. It fails, too. Is there anybody who used it succesfully in his own portlet, especially with Liferay 6.1? I need a muliselect fileUpload. Please help me.

<%
String allowedFileExtensions  = StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA));
String tempFolderName = UploadPortlet.tempFolderName;
String[] tempFileEntryNames = TempFileUtil.getTempFileEntryNames(user.getUserId(), tempFolderName);
long folderId  = 0;
long repositoryId = themeDisplay.getScopeGroupId();
%>

<aui:layout>
	<aui:column columnwidth="50">
		<aui:form name="fm1">
			<div class="lfr-dynamic-uploader">
				<div class="lfr-upload-container" id="<portlet:namespace />fileUpload"></div>
			</div>
		</aui:form>

		&lt;%
		Date expirationDate = new Date(System.currentTimeMillis() + GetterUtil.getInteger(PropsUtil.get(PropsKeys.SESSION_TIMEOUT)) * Time.MINUTE);
		Ticket ticket = TicketLocalServiceUtil.addTicket(user.getCompanyId(), User.class.getName(), user.getUserId(), TicketConstants.TYPE_IMPERSONATE, null, expirationDate, new ServiceContext());

		if (portletName.equals(PortletKeys.MEDIA_GALLERY_DISPLAY)) {
			Set<string> extensions = new HashSet<string>();
			String[] mimeTypes = DLUtil.getMediaGalleryMimeTypes(portletPreferences, renderRequest);

			for (String mimeType : mimeTypes) {
				extensions.addAll(MimeTypesUtil.getExtensions(mimeType));
			}

			allowedFileExtensions = StringUtil.merge(extensions.toArray(new String[extensions.size()]));
		} else {
			allowedFileExtensions = StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA));
		}
		%&gt;

		<aui:script use="liferay-upload">
			new Liferay.Upload(
				{
					allowedFileTypes: '&lt;%= allowedFileExtensions %&gt;',
					container: '#<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>&amp;ticketKey=&lt;%= ticket.getKey() %&gt;<liferay-ui:input-permissions-params modelName="<%= DLFileEntryConstants.getClassName() %>" />',
					fileDescription: '&lt;%= StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA)) %&gt;',
					maxFileSize: '&lt;%= PrefsPropsUtil.getLong(PropsKeys.DL_FILE_MAX_SIZE) %&gt; B',
					metadataContainer: '#<portlet:namespace />commonFileMetadataContainer',
					metadataExplanationContainer: '#<portlet:namespace />metadataExplanationContainer',
					namespace: '<portlet:namespace />',
					tempFileURL: {
						method: Liferay.Service.DL.DLApp.getTempFileEntryNames,
						params: {
							groupId: &lt;%= scopeGroupId %&gt;,
							folderId: &lt;%= folderId %&gt;,
							tempFolderName: 'com.liferay.portlet.documentlibrary.action.EditFileEntryAction'
						}
					},
					uploadFile: '<liferay-portlet:actionurl windowstate="<%= LiferayWindowState.POP_UP.toString() %>" 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>&amp;ticketKey=&lt;%= ticket.getKey() %&gt;<liferay-ui:input-permissions-params modelName="<%= DLFileEntryConstants.getClassName() %>" />'
				}
			);
		</aui:script>
	</string></string></aui:column>
	<aui:column columnwidth="50">
		<portlet:actionurl var="editMultipleFileEntriesURL">
			<portlet:param name="struts_action" value="document_library/edit_file_entry" />
			<portlet:param name="<%= Constants.CMD %>" value="<%= Constants.ADD_MULTIPLE %>" />
		</portlet:actionurl>

		<aui:form action="<%= editMultipleFileEntriesURL %>" method="post" name="fm2" onsubmit="<%= &quot;event.preventDefault(); &quot; + renderResponse.getNamespace() + &quot;updateMultipleFiles();&quot; %>">
			<div class="no-files-selected-info portlet-msg-info aui-helper-hidden" id="<portlet:namespace />metadataExplanationContainer">
				<liferay-ui:message key="select-documents-from-the-left-to-add-them-to-the-document-library" />
			</div>

			<div class="common-file-metadata-container aui-helper-hidden selected" id="<portlet:namespace />commonFileMetadataContainer">
				<liferay-util:include page="/html/portlet/document_library/upload_multiple_file_entries_resources.jsp" />
			</div>
		</aui:form>

		<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 &lt; 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 jsonArray = this.get('responseData');

									for (var i = 0; i &lt; jsonArray.length; i++) {
										var item = jsonArray[i];

										var checkBox = A.one('input[data-fileName="' + item.fileName + '"]');

										var li = checkBox.ancestor();

										checkBox.remove(true);

										li.removeClass('selectable').removeClass('selected');

										var cssClass = null;
										var childHTML = null;

										if (item.added) {
											cssClass = 'file-saved';

											childHTML = '<span class="success-message">&lt;%= UnicodeLanguageUtil.get(pageContext, "successfully-saved") %&gt;</span>';
										}
										else {
											cssClass = 'upload-error';

											childHTML = '<span class="error-message">' + item.errorMessage + '</span>';
										}

										li.addClass(cssClass);
										li.append(childHTML);
									}

									<liferay-portlet:resourceurl copycurrentrenderparameters="<%= false %>" var="uploadMultipleFileEntries">
										<portlet:param name="struts_action" value="/document_library/edit_file_entry" />
										<portlet:param name="repositoryId" value="<%= String.valueOf(repositoryId) %>" />
										<portlet:param name="folderId" value="<%= String.valueOf(folderId) %>" />
									</liferay-portlet:resourceurl>

									commonFileMetadataContainer.load('&lt;%= uploadMultipleFileEntries %&gt;');

									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">&lt;%= UnicodeLanguageUtil.get(pageContext, "an-unexpected-error-occurred-while-deleting-the-file") %&gt;</span>');

									selectedItems.all('input').remove(true);

									commonFileMetadataContainer.loadingmask.hide();
								}
							}
						}
					);
				},
				['aui-base']
			);
		</aui:script>
	</aui:column>
</aui:layout>

[Neil Griffin, geändert vor 11 Jahren.]

The PrimeFaces p:fileUpload component has an Ajax-based multiple file-upload feature and the 3.0.0-BETA2/3.1.0-BETA2 release of Liferay Faces will support it. The primefaces3-portlet demo will also be updated to demonstrate usage of p:fileUpload.

One of the development goals in the future is to support the out-of-the-box Liferay Flash mutliple file uploader with JSF, but we haven't started work on that yet.

[Jan Bub, geändert vor 11 Jahren.]

The primefaces p:fileUpload is all I need. Thank you for making it work.

[Neil Griffin, geändert vor 11 Jahren.]

Liferay Faces 3.0.0-BETA2 (Liferay 6.0.x) and 3.1.0-BETA2 (Liferay 6.1.x) just released. You can download artifacts directly from the artifact repository. The Liferay website will be updated on Monday or Tuesday.

[Christian Reitz, geändert vor 11 Jahren.]

Hi,

multiple fileuplaod using primefaces woks great.

But i have a question:
com.liferay.faces.bridge.context.map.RequestParameterMapMultiPartImpl

...
protected String stripIllegalCharacters(String fileName) {

		// FACES-64: Need to strip out invalid characters.
		// http://technet.microsoft.com/en-us/library/cc956689.aspx
		String strippedFileName = fileName;

		if (fileName != null) {
			strippedFileName = fileName.replaceAll("[\\\\/\\[\\]:|<>+;=.?\"]", "-");
		}

		return strippedFileName;
}
...

I guess it is not a good idea to replace all "trouble"-making chars creating the uploaded file. So the extension marker of a file will be replaced too ...
In fact of that, you never had a chance to reconstruct the original filename of the client.

Example:

test.pdf will converted to test-pdf

Is there a simple way to keep the original filename?

[Neil Griffin, geändert vor 11 Jahren.]

I was able to reproduce the problem you're seeing with the extension being replaced too. As I study the PrimeFaces UploadedFile interface, I see that there is no method for deleting the uploaded file. Instead, getFileName() is only supposed to return the file name like "test.pdf" and the developer is expected to get the file contents by calling getBytes() or getInputStream(). Do you agree?

[Neil Griffin, geändert vor 11 Jahren.]

@Christian: Please see my latest comments in FACES-1204. I made some changes just now that will enable you to get the original filename by calling getName(). But in order get access to the file, you will have to call the get() or getInputStream() method. I've updated the primefaces3-demo portlet accordingly.

[Christian Reitz, geändert vor 11 Jahren.]

Thanks @Neil. Now it works perfectly ;)

[Neil Griffin, geändert vor 11 Jahren.]

My pleasure, glad to hear that it's working.