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