Message Boards
Liferay.Upload - Liferay File Upload - < INPUTS NEEDED> URGENT
Prathibha h m, modified 3 Years ago.
Liferay.Upload - Liferay File Upload - < INPUTS NEEDED> URGENT
Junior Member Posts: 74 Join Date: 9/17/09 Recent Posts
I am using below plugin provided by liferay for achieving file upload functionality: ( Reference: liferay-upload-component-usage-for-multi-file-upload on stckoverflow) <aui:script use="liferay-upload,aui-base">
var liferayUpload = new Liferay.Upload({
allowedFileTypes: '<%= ".xls,.xlsx,.doc,.docx,.pdf,.zip" %>',
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
});
<!-- !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() {
console.log('upload');
$('.component.liferayupload').appendTo("#<portlet:namespace />fileUpload");
});
var continueButton = A.one('#<portlet:namespace />continueButton'); function toggleContinueButton() {
var uploadedFiles = liferayUpload._fileListContent.all('.upload-file.upload-complete');
var instance = this._multipleFiles;
console.log('files', instance);
if (uploadedFiles.size() == 1) {
console.log('One file Upload');
console.log(uploadedFiles);
continueButton.show();
}
else {
console.log(uploadedFiles);
continueButton.show();
}
}
<!-- Upload Component Events BEGIN-->
<!-- Fired when File Upload STARTS-->
liferayUpload._uploader.on(
'fileuploadstart',
function(event) {
console.log('File Upload Start');
}
);
<!-- Fired when File Upload is COMPLETE-->
Liferay.on(
'uploadcomplete',
function(event) {
console.log('File Upload Complete');
}
);
<!-- Fired when All Uploads are COMPLETE-->
liferayUpload._uploader.on(
'alluploadscomplete',
function(event) {
console.log('All Uploads Complete');
toggleContinueButton();
}
);
<!-- Fired when Temp file is REMOVED-->
Liferay.on(
'tempFileRemoved',
function(event) {
console.log('Temp File Removed');
toggleContinueButton();
}
);
<!-- Upload Component Events END-->
$('#<portlet:namespace />continueButton').on(
'click',
function(event) {
event.preventDefault(); $('#<portlet:namespace />fm1').ajaxSubmit(
{
success: function(responseData) {
console.log(responseData);
console.log('success');
<%-- $('#<portlet:namespace />exportImportOptions').html(responseData); --%>
}
}
);
}
);</aui:script>
Currently I want to have control of no. of files. Based on some condition , file upload should allow only 1 file and for others multiple.Another customization I want to make is restrict the fileTypes.
allowedFileTypes: '<%= ".xls,.xlsx,.doc,.docx,.pdf,.zip" %>', multipleFiles: false - These two arent working fine , also facing some other UI issues.
Has anyone tried this plugin and implemented file upload in custom portlet . Please do share your inputs
NOTE: please reply , Liferay being very big forum and I believe someone might have recently used this drag and drop funcationality .
Any one used this funcationality in Custom portlets? Please provide inputs
Regards,
Prathibha
var liferayUpload = new Liferay.Upload({
allowedFileTypes: '<%= ".xls,.xlsx,.doc,.docx,.pdf,.zip" %>',
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
});
<!-- !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() {
console.log('upload');
$('.component.liferayupload').appendTo("#<portlet:namespace />fileUpload");
});
var continueButton = A.one('#<portlet:namespace />continueButton'); function toggleContinueButton() {
var uploadedFiles = liferayUpload._fileListContent.all('.upload-file.upload-complete');
var instance = this._multipleFiles;
console.log('files', instance);
if (uploadedFiles.size() == 1) {
console.log('One file Upload');
console.log(uploadedFiles);
continueButton.show();
}
else {
console.log(uploadedFiles);
continueButton.show();
}
}
<!-- Upload Component Events BEGIN-->
<!-- Fired when File Upload STARTS-->
liferayUpload._uploader.on(
'fileuploadstart',
function(event) {
console.log('File Upload Start');
}
);
<!-- Fired when File Upload is COMPLETE-->
Liferay.on(
'uploadcomplete',
function(event) {
console.log('File Upload Complete');
}
);
<!-- Fired when All Uploads are COMPLETE-->
liferayUpload._uploader.on(
'alluploadscomplete',
function(event) {
console.log('All Uploads Complete');
toggleContinueButton();
}
);
<!-- Fired when Temp file is REMOVED-->
Liferay.on(
'tempFileRemoved',
function(event) {
console.log('Temp File Removed');
toggleContinueButton();
}
);
<!-- Upload Component Events END-->
$('#<portlet:namespace />continueButton').on(
'click',
function(event) {
event.preventDefault(); $('#<portlet:namespace />fm1').ajaxSubmit(
{
success: function(responseData) {
console.log(responseData);
console.log('success');
<%-- $('#<portlet:namespace />exportImportOptions').html(responseData); --%>
}
}
);
}
);</aui:script>
Currently I want to have control of no. of files. Based on some condition , file upload should allow only 1 file and for others multiple.Another customization I want to make is restrict the fileTypes.
allowedFileTypes: '<%= ".xls,.xlsx,.doc,.docx,.pdf,.zip" %>', multipleFiles: false - These two arent working fine , also facing some other UI issues.
Has anyone tried this plugin and implemented file upload in custom portlet . Please do share your inputs
NOTE: please reply , Liferay being very big forum and I believe someone might have recently used this drag and drop funcationality .
Any one used this funcationality in Custom portlets? Please provide inputs
Regards,
Prathibha