Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Jan Bub
Multiple FileUploay Liferay 6.1 CE
April 19, 2012 12:39 AM
Answer

Jan Bub

Rank: Junior Member

Posts: 78

Join Date: March 2, 2011

Recent Posts

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.

  1
  2<%
  3String allowedFileExtensions  = StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA));
  4String tempFolderName = UploadPortlet.tempFolderName;
  5String[] tempFileEntryNames = TempFileUtil.getTempFileEntryNames(user.getUserId(), tempFolderName);
  6long folderId  = 0;
  7long repositoryId = themeDisplay.getScopeGroupId();
  8%>
  9
 10<aui:layout>
 11    <aui:column columnWidth="50">
 12        <aui:form name="fm1">
 13            <div class="lfr-dynamic-uploader">
 14                <div class="lfr-upload-container" id="<portlet:namespace />fileUpload"></div>
 15            </div>
 16        </aui:form>
 17
 18        <%
 19        Date expirationDate = new Date(System.currentTimeMillis() + GetterUtil.getInteger(PropsUtil.get(PropsKeys.SESSION_TIMEOUT)) * Time.MINUTE);
 20        Ticket ticket = TicketLocalServiceUtil.addTicket(user.getCompanyId(), User.class.getName(), user.getUserId(), TicketConstants.TYPE_IMPERSONATE, null, expirationDate, new ServiceContext());
 21
 22        if (portletName.equals(PortletKeys.MEDIA_GALLERY_DISPLAY)) {
 23            Set<String> extensions = new HashSet<String>();
 24            String[] mimeTypes = DLUtil.getMediaGalleryMimeTypes(portletPreferences, renderRequest);
 25
 26            for (String mimeType : mimeTypes) {
 27                extensions.addAll(MimeTypesUtil.getExtensions(mimeType));
 28            }
 29
 30            allowedFileExtensions = StringUtil.merge(extensions.toArray(new String[extensions.size()]));
 31        } else {
 32            allowedFileExtensions = StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA));
 33        }
 34        %>
 35
 36        <aui:script use="liferay-upload">
 37            new Liferay.Upload(
 38                {
 39                    allowedFileTypes: '<%= allowedFileExtensions %>',
 40                    container: '#<portlet:namespace />fileUpload',
 41                    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() %>" />',
 42                    fileDescription: '<%= StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA)) %>',
 43                    maxFileSize: '<%= PrefsPropsUtil.getLong(PropsKeys.DL_FILE_MAX_SIZE) %> B',
 44                    metadataContainer: '#<portlet:namespace />commonFileMetadataContainer',
 45                    metadataExplanationContainer: '#<portlet:namespace />metadataExplanationContainer',
 46                    namespace: '<portlet:namespace />',
 47                    tempFileURL: {
 48                        method: Liferay.Service.DL.DLApp.getTempFileEntryNames,
 49                        params: {
 50                            groupId: <%= scopeGroupId %>,
 51                            folderId: <%= folderId %>,
 52                            tempFolderName: 'com.liferay.portlet.documentlibrary.action.EditFileEntryAction'
 53                        }
 54                    },
 55                    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>&ticketKey=<%= ticket.getKey() %><liferay-ui:input-permissions-params modelName="<%= DLFileEntryConstants.getClassName() %>" />'
 56                }
 57            );
 58        </aui:script>
 59    </aui:column>
 60    <aui:column columnWidth="50">
 61        <portlet:actionURL var="editMultipleFileEntriesURL">
 62            <portlet:param name="struts_action" value="document_library/edit_file_entry" />
 63            <portlet:param name="<%= Constants.CMD %>" value="<%= Constants.ADD_MULTIPLE %>" />
 64        </portlet:actionURL>
 65
 66        <aui:form action="<%= editMultipleFileEntriesURL %>" method="post" name="fm2" onSubmit='<%= "event.preventDefault(); " + renderResponse.getNamespace() + "updateMultipleFiles();" %>'>
 67            <div class="no-files-selected-info portlet-msg-info aui-helper-hidden" id="<portlet:namespace />metadataExplanationContainer">
 68                <liferay-ui:message key="select-documents-from-the-left-to-add-them-to-the-document-library" />
 69            </div>
 70
 71            <div class="common-file-metadata-container aui-helper-hidden selected" id="<portlet:namespace />commonFileMetadataContainer">
 72                <liferay-util:include page="/html/portlet/document_library/upload_multiple_file_entries_resources.jsp" />
 73            </div>
 74        </aui:form>
 75
 76        <aui:script>
 77            Liferay.provide(
 78                window,
 79                '<portlet:namespace />updateMultipleFiles',
 80                function() {
 81                    var A = AUI();
 82                    var Lang = A.Lang;
 83
 84                    var commonFileMetadataContainer = A.one('#<portlet:namespace />commonFileMetadataContainer');
 85                    var selectedFileNameContainer = A.one('#<portlet:namespace />selectedFileNameContainer');
 86
 87                    var inputTpl = '<input id="<portlet:namespace />selectedFileName{0}" name="<portlet:namespace />selectedFileName" type="hidden" value="{1}" />';
 88
 89                    var values = A.all('input[name=<portlet:namespace />selectUploadedFileCheckbox]:checked').val();
 90
 91                    var buffer = [];
 92                    var dataBuffer = [];
 93                    var length = values.length;
 94
 95                    for (var i = 0; i < length; i++) {
 96                        dataBuffer[0] = i;
 97                        dataBuffer[1] = values[i];
 98
 99                        buffer[i] = Lang.sub(inputTpl, dataBuffer);
100                    }
101
102                    selectedFileNameContainer.html(buffer.join(''));
103
104                    commonFileMetadataContainer.plug(A.LoadingMask);
105
106                    commonFileMetadataContainer.loadingmask.show();
107
108                    A.io.request(
109                        document.<portlet:namespace />fm2.action,
110                        {
111                            dataType: 'json',
112                            form: {
113                                id: document.<portlet:namespace />fm2
114                            },
115                            after: {
116                                success: function(event, id, obj) {
117                                    var jsonArray = this.get('responseData');
118
119                                    for (var i = 0; i < jsonArray.length; i++) {
120                                        var item = jsonArray[i];
121
122                                        var checkBox = A.one('input[data-fileName="' + item.fileName + '"]');
123
124                                        var li = checkBox.ancestor();
125
126                                        checkBox.remove(true);
127
128                                        li.removeClass('selectable').removeClass('selected');
129
130                                        var cssClass = null;
131                                        var childHTML = null;
132
133                                        if (item.added) {
134                                            cssClass = 'file-saved';
135
136                                            childHTML = '<span class="success-message"><%= UnicodeLanguageUtil.get(pageContext, "successfully-saved") %></span>';
137                                        }
138                                        else {
139                                            cssClass = 'upload-error';
140
141                                            childHTML = '<span class="error-message">' + item.errorMessage + '</span>';
142                                        }
143
144                                        li.addClass(cssClass);
145                                        li.append(childHTML);
146                                    }
147
148                                    <liferay-portlet:resourceURL copyCurrentRenderParameters="<%= false %>" var="uploadMultipleFileEntries">
149                                        <portlet:param name="struts_action" value="/document_library/edit_file_entry" />
150                                        <portlet:param name="repositoryId" value="<%= String.valueOf(repositoryId) %>" />
151                                        <portlet:param name="folderId" value="<%= String.valueOf(folderId) %>" />
152                                    </liferay-portlet:resourceURL>
153
154                                    commonFileMetadataContainer.load('<%= uploadMultipleFileEntries %>');
155
156                                    Liferay.fire('filesSaved');
157                                },
158                                failure: function(event, id, obj) {
159                                    var selectedItems = A.all('#<portlet:namespace />fileUpload li.selected');
160
161                                    selectedItems.removeClass('selectable').removeClass('selected').addClass('upload-error');
162
163                                    selectedItems.append('<span class="error-message"><%= UnicodeLanguageUtil.get(pageContext, "an-unexpected-error-occurred-while-deleting-the-file") %></span>');
164
165                                    selectedItems.all('input').remove(true);
166
167                                    commonFileMetadataContainer.loadingmask.hide();
168                                }
169                            }
170                        }
171                    );
172                },
173                ['aui-base']
174            );
175        </aui:script>
176    </aui:column>
177</aui:layout>
Neil Griffin
RE: Multiple FileUploay Liferay 6.1 CE
April 27, 2012 6:27 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2179

Join Date: July 26, 2005

Recent Posts

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
RE: Multiple FileUploay Liferay 6.1 CE
April 30, 2012 12:23 AM
Answer

Jan Bub

Rank: Junior Member

Posts: 78

Join Date: March 2, 2011

Recent Posts

The primefaces p:fileUpload is all I need. Thank you for making it work.
Neil Griffin
RE: Multiple FileUploay Liferay 6.1 CE
April 30, 2012 7:14 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2179

Join Date: July 26, 2005

Recent Posts

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
RE: Multiple FileUploay Liferay 6.1 CE
May 10, 2012 1:03 AM
Answer

Christian Reitz

Rank: New Member

Posts: 4

Join Date: May 10, 2012

Recent Posts

Hi,

multiple fileuplaod using primefaces woks great. emoticon

But i have a question: emoticon
com.liferay.faces.bridge.context.map.RequestParameterMapMultiPartImpl
 1
 2...
 3protected String stripIllegalCharacters(String fileName) {
 4
 5        // FACES-64: Need to strip out invalid characters.
 6        // http://technet.microsoft.com/en-us/library/cc956689.aspx
 7        String strippedFileName = fileName;
 8
 9        if (fileName != null) {
10            strippedFileName = fileName.replaceAll("[\\\\/\\[\\]:|<>+;=.?\"]", "-");
11        }
12
13        return strippedFileName;
14}
15...

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 ... emoticon
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
RE: Multiple FileUploay Liferay 6.1 CE
May 11, 2012 10:14 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2179

Join Date: July 26, 2005

Recent Posts

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
RE: Multiple FileUploay Liferay 6.1 CE
May 16, 2012 8:15 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2179

Join Date: July 26, 2005

Recent Posts

@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
RE: Multiple FileUploay Liferay 6.1 CE
August 22, 2012 12:20 PM
Answer

Christian Reitz

Rank: New Member

Posts: 4

Join Date: May 10, 2012

Recent Posts

Thanks @Neil. Now it works perfectly ;)
Neil Griffin
RE: Multiple FileUploay Liferay 6.1 CE
August 22, 2012 12:30 PM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2179

Join Date: July 26, 2005

Recent Posts

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